theme-change_ecrt

ワードプレス

【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

魅了されてしまった。ついに乗り換えてしまった。最初はそんなつもりじゃなかったんだ。いや、どこかでそんな気持ちはあったのかもしれない・・・

え?あぁ、WordPressテーマの話ですよ。次々とリリースされるTCDテーマを見ていると・・サイトをリニューアルしたくなりますよね。でもテーマの変更って、レイアウトも変わるし、注意点多そうだし・・・いくら同じTCDテーマからの乗り換えだとしても・・ねぇ?

いきなり新しいテーマを「有効化」するなんて不安過ぎる・・・

不具合でぐちゃぐちゃになったサイトなんて、一瞬たりとも見せたくないね

今までしてきたカスタマイズって、うまく引き継げるんだろうか?

どーせやるなら絶っっ対に失敗したくない!

記事数が多いほど、カスタマイズが多いほど慎重になってしまいますよね。大切なサイトを台無しにしたくない!今回はそんな不安たちを一掃するテーマ変更方法を紹介します

つい最近、無事にテーマ変更を終えた私が行った、全工程と注意点。テーマ変更したいのに・・ほんとはウズウズしてムラムラしてワクワクしてるのに・・二の足を踏んでいるあなたに。安心で、慎重派最前線の方法です。

記事が長いのはご愛嬌。そのぶん注意点もふんだんに盛り込んでるってわけです。早速どうぞ!

作業の流れ

【1】現状のバックアップ

【2】ローカル環境でテストサイトをつくる

【3】テストサイトを本番さながらに作り上げる!

【4】メンテナンスモードで一気に切り替え!

大まかな作業工程としてはこれだけなんですが、実践した際にハマってしまった注意点も絡めて紹介していきます。

【1】現状のバックアップ

theme-change_ins1

なんといっても外せないのが、WEBサイトの現状をバックアップしておくこと。もちろん何か不具合があったとき、元の状態に戻すために。コレを怠るともう・・・目も当てられないことになりかねます。ザンナイことになります。

BackWPupでバックアップ

私の場合、BackWPupというプラグインに日々自動でバックアップをとってもらっています 

WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

しかし!自動バックアップだけに頼らず、一度手動でジョブの実行をしておきましょう。

サーバーからもバックアップ

「BackWPup」だけで安心なハズなんですが、今回に限ってはさらに慎重に。FTPソフトを使ってサーバーから直接、まるっと全てのデータをダウンロードしておきました。

特にカスタマイズしているテンプレートファイル(phpファイル)などがある場合は、新テーマにも反映する必要があるため、別途個別でダウンロードしておくと後でラクです

【2】ローカル環境でテストサイトをつくる

theme-change_ins2

次に、下記サイトを参考にローカル環境を作ります。現状のサイトはそのままに、テストサイトを作るためです。

ワードプレステーマを変更するためにしておく5つのこと

ローカル環境構築なんて響きに腰が引けましたが、素人ながら意外と簡単なものでした。
WindowsならXAMPP、MacならMAMPをインストールし、書いてある手順通りに行えばOK。

この記事はTCD公式サイトのものなので、一度記事全体に目を通しておくとよいと思います。私も実際に参考にしました。

画像のRetina対応具合も判断するため、私はMac環境でMAMPを利用しました。

Theme Test Driveは相性が悪い

ここで失敗談をひとつ。WordPressプラグインには「Theme Test Drive」という人気の秘密兵器があります。現状のサイトにインストールするだけで、「自分だけ新テーマ切替後の世界を見ることができる」という、神がかった気分にさせてくれるものです。

theme-change_02

ところが、TCDテーマとは少々相性が悪い(?)らしく、私の場合「テーマオプション」内の設定が、まるっとデフォルト状態に戻ってしまいました

そもそも「Theme Test Drive」ではあくまで、「自分だけ新テーマ切替後の世界を見ることができる」だけ。つまり何か変更を加えれば、切替前の世界にもしっかり反映されてしまいます。

例えば記事内容を更新すれば、閲覧者にも更新された状態で表示されます。ということはもちろん・・・カスタマイズを試すなんてこともできません。

同じTCDテーマだとしても、新テーマではカラムサイズやスタイルシートをはじめ、ほぼ全てが一新されているわけなので、「様子を確認」したところで、ほとんど何もできないんです。

サーバー環境、プラグインの影響などなど、現状と全く変わりない環境で気軽に様子見できる、という利点はありますが・・・テーマオプションの設定を犠牲にしてまで「様子見だけする」メリットはほぼありません

ローカル環境ぉというオドロオドロしい響きに屈さず、テストサイトを立ち上げましょう。いや、ホント簡単なんで。

【3】テストサイトを本番さながらに作り上げる!

theme-change_ins4

テストサイトが立ち上げられたら、まずは出来る限り、現状の本番環境に近い状態にすることをオススメします。順番はある程度好みに変えてOKですが、全体の流れはこんなかんじです 

1.テストサイトにテーマをインストール

2.主要記事をコピーする

3.主要なプラグインのインストール

4.テーマオプション内「カスタムCSS」のコピー

5.テーマオプションで大まかなレイアウト調整

6.子テーマの作成・アップロード

7.旧テーマでのカスタマイズを反映・微調整

8.親テーマをいじる必要があれば、変更点をメモ

9.Search Regexで一括置換&メモ

10.ウィジェット内容・配置を決める

ちょっ、、、テストサイトに気合入れすぎじゃね!?

なんて思うかもしれませんが、これだけ準備しても、本番移行時には時間がかかります。あらゆる場所のレイアウトがボロボロに崩れた、みっともない状態を晒したくないなら・・・ぜひ参考にしてください。

落ち着いて、出来るだけスムーズに、不具合無く移行するため。結局は最短で移行することができる準備だと思います。(上級者の方は、もっとラクにできるのかもしれませんが・・・)

カスタマイズなんてしませんっ!という人は、上のチャプター6から8は飛ばしてOKです。

1.テストサイトにテーマをインストール

なんのこっちゃありません。新テーマをアップロードし、インストールして有効化します。記事が無いまっさらなテストサイトなので、ためらう必要なんてありません!気楽ですねぇ。

theme-change_04

theme-change_05

2.主要記事をコピーする

記事ページはもちろん、TOPページやウィジェットではどう表示されるのか?のレイアウト確認のために行います。さらに・・・

後ほど行う「旧テーマでのカスタマイズ反映・微調整」のためにも、アクセスの多い主要記事などを中心に、タイトルや本文をコピペして作成します。大変ですが・・・出来るだけ多めに。

theme-change_07

theme-change_10

ふむふむ、なるほど。ウィジェットでの表示を確認するには、「おすすめ記事」や「カテゴリー」なども設定する必要がありますね。そのあたりはお好みでどうぞ。

theme-change_08

theme-change_09

理由は後述しますが、私の場合は結局、全記事をコピーして再現しました。
(アイキャッチはひとつの画像を流用)

3.主要なプラグインのインストール

旧テーマで現状利用している、主要なプラグインをインストールします。先にお伝えしたとおり、出来る限り、現状の本番環境に近い状態にしたほうがいいからです。

プラグインによっては記事本文のレイアウトが変わる、なんてこともありますし、実際に思い通りに反映されるのか?新テーマとの相性はいいのか?確認するためには必要です。

theme-change_06

OK!機能してますね。

4.テーマオプション内「カスタムCSS」のコピー

テーマオプション内の「カスタムCSS」を利用していた場合、テストサイトにもコピーします。これも「正常に表示されるか」の確認のためです。

theme-change_11

私の場合、旧テーマのテーマオプションにカスタムCSS機能がありませんでした。

なので、これまでは「Simple Custom CSS」というプラグインを利用していたんですが、新テーマではカスタムCSS機能で事足りるため、プラグインから内容をまるっと移行することにしました。頼るプラグインが減るのは嬉しいですね!

また、旧テーマには「投稿ごとに設定できるカスタムCSS機能」も無かったため、「カスタムフィールド」を自作で設置していました。

theme-change_12

それらの記述が消えてしまったら、その記事でのレイアウトが崩れてしまいます。万が一のことを考えてテキストでバックアップしておいたんですが・・・

theme-change_14

少なくとも私の環境ではカスタムフィールドの設定は引き継がれました。でもまあせっかくなんで、テーマのカスタムCSSに移動しました  もちろん正常に反映されています。

theme-change_13

5.テーマオプションで大まかなレイアウト調整

テーマオプションで、サイトのメインカラーやフォントサイズ、ソーシャルボタンの表示など、おおまかな設定をざっくりと決めておきます。独自カスタマイズなどの細かい調整に入る前に、大まかなサイトレイアウトを決めておく必要があるからです。

theme-change_15

theme-change_16

theme-change_17

もちろんロゴ画像もアップロード。サイトレイアウトを考える上で外せない要素ですよね。

theme-change_18

大きさや設置場所などもあらかじめ決めておき、画像も「事前用意画像」フォルダを作って入れておきましょう。こういった「必要素材」もまとめておくと、来たる本番でのテーマ切り替え時にスムーズに移行できます。

テーマオプションやメニューの設定もテストサイトである程度詰めておけば、切り替え時に本番環境とテストサイトの設定を見比べて真似するだけになるので気分的にもラク。
もーそこまで仕上げておけば、ザ・機械作業。余裕です。

6.子テーマの作成・アップロード

子テーマも今のうちに作り、アップロードしておきましょう。

theme-change_19

ん?・・子テーマってなにぃ?おいしーの??

という人は気にしなくてOKです。
簡単に言うと、テーマがアップデートされた時にそのまま更新すると、せっかくのカスタマイズまで上書きされてしまうため、世のカスタマイザー一行は「子テーマ」という、世を忍ぶ仮の姿のテーマを作るわけですね。(別に悪いことでもなんでもないです)

気になってしまったなら・・・子テーマの設定方法はこちらが参考になります 

【動画版】子テーマでのバイラルメディア風facebookボタン設置方法

作業自体は中級者向けですが、分かりやすい動画付きで説明してくれています。子テーマを作るところから始まり、「バイラルメディア風いいねボタン」の作りかたなんかも知れちゃいます。

動画ではありませんが、Requ.logでも小分けにして紹介してます。

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセンスよく設置する方法

7.旧テーマでのカスタマイズを反映・微調整

このチャプターは子テーマを利用したり、独自カスタマイズをする人向けのものです。

旧テーマではキレイに収まっていたはずのものが崩れたり、もうちょっとココの部分に余白が欲しい!なんてことは多々起こります。中級者以上の方はパパっ!と新たにカスタマイズ出来るんでしょうが、我々のような素人さんには、時間がかかってしょーがない。

そんな時に役に立つのがChromeの「デベロッパーツール」。実際のソースをいじらないでも、「もしココをこう変更したら?」をプレビューできるスグレモノ。スマートフォンでの表示具合も、機種ごとに確認できてしまいます。

theme-change_20

theme-change_21

詳しい使い方はこちら 

サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方

Firefoxユーザーのための確認方法にも、ちゃんと触れられています。

8.親テーマをいじる必要があれば、変更点をメモ

このチャプターも「カスタマイザー」御一行様のためのものです。

同じTCDテーマでも、元々あったCSSコードが無くなっていることがあります。そりゃあ「テーマ」によって「テーマ」があるわけですから、レイアウトのためのスタイルシートに違いが出てくるのも、まあ当然ですね。

で、今回の私もそうでした。その影響で、例えばボタンリンクなどのレイアウトが崩れてしまっていたんです。もはやボタンになってへん・・・ 

theme-change_28

ほな、新しいCSSにならって、子テーマのスタイルシートに追記更新や!
・・・上手く反映されない。

ほな、テーマオプションの「カスタムCSS」に追記更新や!
・・・上手く反映されない。

まずは【!important】を試す

我々”素人族”には思い通りにいかないことがたくさんあります。そんな時はまず、【!important】を試してみましょう。例えば 

.sz_l { font-size:100% !important; }

これを付けたところは(大体)最優先して反映されるのでとても重宝しました。

theme-change_27

よーしよし。いい感じだ。

最終手段!親テーマを直接編集

しかし!それでも上手く反映されないときもあります。そんなときは・・・本家、親テーマを直接いじるしかありません。例えばこちらの記事で紹介している「ロゴのRetina対応方法」は 

【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像の解像度アップ

親テーマに直接記述する必要がありました。こういった「親テーマ直接変更部分」はアップデート時に限らず、今から本番移行する際にも必要になることなのでメモしておく必要があります

こんな感じで、欲張るとどんどん大変になっていきますが・・・カスタマイザーなあなたなら、
譲れない思いはあるっ!でしょう?

私はタスク管理ツール【Todoist】にひたすらまとめていきました 

theme-change_29

theme-change_30

今回も大いに思考の整理に役立ちました。頭がゴチャゴチャになりそうな時、おすすめです 

【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹底解説!

9.Search Regexで一括置換&メモ

記事ページを覗いてみると、新しいテーマの雰囲気に合わせたい部分が出てきます。カラムサイズが変わり、フォントサイズも変わったなら、改行具合も気になる・・・・人もいるでしょう。私は気になります。

でもその辺りはグッ!とこらえて!移行後にジワジワ直すことにして!今はもっと俯瞰した目線での、レイアウトやデザインの更新に注力しましょう

で、どーいうところが気になるのかというと・・・例えば先ほどチャプター8で挙げたのがいい例です。私の場合、今までこちらの記事で使っていたボタンに使用していたCSSコードが、新たなテーマのスタイルシートからは無くなっており、レイアウトが崩れてしまっていました。

まあでも元のボタンよりも、新しく用意されたデザインを少しいじり、使いたくなったんです。

▼今までの記述

a class="linkbtn"

▼新しい記述

a class="q_button"

しかし、ボタンの数が多い・・・一個一個書き換えていくなんてだいぶ面倒。というわけで、お花畑プラグイン【Search Regex】の登場です。

theme-change_01

なんでお花畑なんやろ。にしても、なんでこんなチカチカする花選んだんやろ。そーか、きっとドラマチックな思い出のあるお花畑なんやろなぁとステキな妄想は膨らみますが、このプラグインは全記事をまたいで、記述の一括置換をしてくれるスグレモノ

精度も高く、ガンガン使いましたが私の環境では全く不具合がありませんでした。

theme-change_39

置換前に「どの記事のどの場所が置換されるのか」をプレビューすることもできます。

theme-change_40

さらにそのプレビューから1つずつ選んで置換することも可能。さらにさらに!プレビューからその該当記事へジャンプすることもできるという・・詳しい使い方はこちらへ任せます 

特定のキーワードやタグを一括置換するプラグインSearch Regex

テストサイトだから迷いなく置換できますね。で、本番環境でテーマを切り替えた直後にも、同じように置換作業をする必要があるわけですから、置換した記述は全てメモっておきましょう。

theme-change_31

上の例は一部。実際はもっとたくさん置換してます。table系も注意!
注意点

置換後、記事ページの表示を確認していくと、「アレ?・・・ココ、うまく置換されてないんちゃう?」というところがありました。それはもちろん、プラグインのせいなんかじゃなく・・・もともと記述ミスしていただけのこと。例えば、h3タグをリデザインしよう!として・・・

▼タグ頭

<h3><b>

<h3 style3b>

▼タグ末尾

</b></h3>

</h3>

とタイトルを挟むタグを置換したつもりが、思った通りに表示されなかった部分がありました。その理由は・・・

▼置換前の記述

<h3><b><b>タイトル</b></b></h3>

がーん。凡ミス。元々ボールドが重複していたんですね。

こういう部分を発見したら都度、「今のうちに本番環境の記述を直しておいてやる」、という流れになります。この場合で言うとボールドタグの重複を取り除いておいてやる、ということ。
そうすればその部分も、いざ本番で一括置換した時にうまくリデザインされることになります

theme-change_41

theme-change_42

といった感じで・・・こだわろうとすればするほど、結構大変になってきますし、記事数が多ければ多いほど、大量の時間を費やすことになりそうです。

本番でテーマ切り替え後に、ジワジワ更新してもいい部分か?」を考慮して、バランスを取ることも必要になってきますね。それでも、いきなり本番環境へドン!だけは避けましょう。

「誰が見てもおかしい」たくさんのレイアウト崩れが気になって結局は・・・焦りながらの作業に追われることになるはずです。

theme-change_ins5

なので私は「早くテーマを変えてみたい!」という”はやる気持ち”を抑えて、ジワジワとテストサイトで準備するという一見ストイックな道を選びました。しかも・・・全記事をコピペし、置換しても大きな異常がないかを、ざっと確認することにしたんです!
(記事数もそんなに多くないし、どーせ後で確認したくなるので・・・)

これはちょっと極端な例かもしれません。まあ、どこまでテストサイトで仕上げておくかは自分次第、でも「本番ドン」はコワすぎる、焦るハメになる、ということを伝えたいわけです。

10.ウィジェット内容・配置を決める

これも同じく、出来るだけテストサイトで仕上げておくための作業です。本番でテーマを切り替える時に、テストサイトからダーッとコピペするだけで済んだらスムーズなんですよね。

theme-change_26

世間に公開してから、焦りながらレイアウトを考えるよりはずっといいんじゃないか、という考えです。もちろんこれも、自分次第ですね。

さあ次はいよいよ本番!テーマの切り替え作業に入ります!(⇒次のページヘ

ページ:

1

2

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  3. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…
  4. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  2. compress-jpeg-png-images_ecrt

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PN…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトで表示されている…

  3. facebook-fast-display_ecmg

    ワードプレス

    瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

    余計な読込み遅延を解消セヨ。えぇー今回の任務は「ぺいじ」の読込…

  4. like-button-card_ecmg
  5. lightshot_ecmg

    WEBデザイン

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    "気軽な"先輩をウマく使おう。それなりに融通のきくMacのスクリー…

  6. original-share-button_ecmg
スポンサーリンク
高速・安定レンタルサーバー
高速・高機能・高安定レンタルサーバー【エックスサーバー】 高速・高機能・高安定レンタルサーバー【エックスサーバー】

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. theme-change_ecrt
  2. todoist_ec
  3. retina_ecmg
  4. business-books_ecmg
  5. improvement-flow_ecmg
  6. tcd-theme-selection_ecmg
  7. extension-tools-for-bloggers_ec
  8. display-speed_ec
  9. original-share-button_ecmg
  10. todoist-extension_ecmg

ピックアップ記事

  1. phrase-express_ecmg
  2. widgetoon-js-count-jsoon_ecmg
  3. facebook-app-id-app-secret_ecmg
  4. todoist-constitution_ec
  5. reset-button_ecrt
  6. tcd-css-customize_ecmg
  7. quicktag_ecmg
  8. todoist-basic_ec
  9. jpg-gif-png_ecmg
  10. chrome-font_ecmg

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. WordPressサイトを丸ごとバックアップ!「BackWP…
  2. 【Retinaディスプレイ対応3】ねえ…どうする…
  3. 瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移…
  4. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  5. “WEBサイズマスター”へ。Chro…

ブログのRetina対応、始めませんか?

retina-os-solution

ブログクオリティー底上げ10ツール

extools-for-bloggers

最近の記事

  1. 「私の名前はページプラグイン。」Facebookページのいい…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせ…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

Requ.log | STORY

  1. 「あの時、気づけなかった。」苦しい時に思い出して奮い立つ、人…
  2. 心が折れそうに辛いとき。一歩前へ踏み出し紡がれた、今へ続くス…
  3. 大切な人の最後の1年
  1. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  2. original-share-button_ecmg

    マーケティング

    カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  4. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  5. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP