魅了されてしまった。ついに乗り換えてしまった。最初はそんなつもりじゃなかったんだ。いや、どこかでそんな気持ちはあったのかもしれない・・・
え？あぁ、WordPressテーマの話ですよ。次々とリリースされるTCDテーマを見ていると・・サイトをリニューアルしたくなりますよね。でもテーマの変更って、レイアウトも変わるし、注意点多そうだし・・・いくら同じTCDテーマからの乗り換えだとしても・・ねぇ？
記事数が多いほど、カスタマイズが多いほど慎重になってしまいますよね。大切なサイトを台無しにしたくない！今回はそんな不安たちを一掃するテーマ変更方法を紹介します。
つい最近、無事にテーマ変更を終えた私が行った、全工程と注意点。テーマ変更したいのに・・ほんとはウズウズしてムラムラしてワクワクしてるのに・・二の足を踏んでいるあなたに。安心で、慎重派最前線の方法です。
記事が長いのはご愛嬌。そのぶん注意点もふんだんに盛り込んでるってわけです。早速どうぞ！
作業の流れ
大まかな作業工程としてはこれだけなんですが、実践した際にハマってしまった注意点も絡めて紹介していきます。
【1】現状のバックアップ
なんといっても外せないのが、WEBサイトの現状をバックアップしておくこと。もちろん何か不具合があったとき、元の状態に戻すために。コレを怠るともう・・・目も当てられないことになりかねます。ザンナイことになります。
BackWPupでバックアップ
私の場合、BackWPupというプラグインに日々自動でバックアップをとってもらっています
しかし！自動バックアップだけに頼らず、一度手動でジョブの実行をしておきましょう。
サーバーからもバックアップ
「BackWPup」だけで安心なハズなんですが、今回に限ってはさらに慎重に。FTPソフトを使ってサーバーから直接、まるっと全てのデータをダウンロードしておきました。
特にカスタマイズしているテンプレートファイル（phpファイル）などがある場合は、新テーマにも反映する必要があるため、別途個別でダウンロードしておくと後でラクです。
【2】ローカル環境でテストサイトをつくる
次に、下記サイトを参考にローカル環境を作ります。現状のサイトはそのままに、テストサイトを作るためです。
なんて響きに腰が引けましたが、素人ながら意外と簡単なものでした。
WindowsならXAMPP、MacならMAMPをインストールし、書いてある手順通りに行えばOK。
この記事はTCD公式サイトのものなので、一度記事全体に目を通しておくとよいと思います。私も実際に参考にしました。
Theme Test Driveは相性が悪い
ここで失敗談をひとつ。WordPressプラグインには「Theme Test Drive」という人気の秘密兵器があります。現状のサイトにインストールするだけで、「」という、神がかった気分にさせてくれるものです。
ところが、TCDテーマとは少々相性が悪い（？）らしく、私の場合「テーマオプション」内の設定が、まるっとデフォルト状態に戻ってしまいました。
そもそも「Theme Test Drive」ではあくまで、「」だけ。つまり何か変更を加えれば、切替前の世界にもしっかり反映されてしまいます。
例えば記事内容を更新すれば、閲覧者にも更新された状態で表示されます。ということはもちろん・・・カスタマイズを試すなんてこともできません。
同じTCDテーマだとしても、新テーマではカラムサイズやスタイルシートをはじめ、ほぼ全てが一新されているわけなので、「様子を確認」したところで、ほとんど何もできないんです。
サーバー環境、プラグインの影響などなど、現状と全く変わりない環境で気軽に様子見できる、という利点はありますが・・・テーマオプションの設定を犠牲にしてまで「様子見だけする」メリットはほぼありません。
「」というオドロオドロしい響きに屈さず、テストサイトを立ち上げましょう。いや、ホント簡単なんで。
【3】テストサイトを本番さながらに作り上げる！
テストサイトが立ち上げられたら、まずは出来る限り、現状の本番環境に近い状態にすることをオススメします。順番はある程度好みに変えてOKですが、全体の流れはこんなかんじです
なんて思うかもしれませんが、これだけ準備しても、本番移行時には時間がかかります。あらゆる場所のレイアウトがボロボロに崩れた、みっともない状態を晒したくないなら・・・ぜひ参考にしてください。
落ち着いて、出来るだけスムーズに、不具合無く移行するため。結局は最短で移行することができる準備だと思います。（上級者の方は、もっとラクにできるのかもしれませんが・・・）
1.テーマのインストール
なんのこっちゃありません。新テーマをアップロードし、インストールして有効化します。記事が無いまっさらなテストサイトなので、ためらう必要なんてありません！気楽ですねぇ。
2.主要記事をコピーする
記事ページはもちろん、TOPページやウィジェットではどう表示されるのか？のレイアウト確認のために行います。さらに・・・
後ほど行う「旧テーマでのカスタマイズ反映・微調整」のためにも、アクセスの多い主要記事などを中心に、タイトルや本文をコピペして作成します。大変ですが・・・出来るだけ多めに。
ふむふむ、なるほど。ウィジェットでの表示を確認するには、「おすすめ記事」や「カテゴリー」なども設定する必要がありますね。そのあたりはお好みでどうぞ。
（アイキャッチはひとつの画像を流用）
3.主要なプラグインのインストール
旧テーマで現状利用している、主要なプラグインをインストールします。先にお伝えしたとおり、出来る限り、現状の本番環境に近い状態にしたほうがいいからです。
プラグインによっては記事本文のレイアウトが変わる、なんてこともありますし、実際に思い通りに反映されるのか？新テーマとの相性はいいのか？確認するためには必要です。
OK！機能してますね。
4.テーマオプション内「カスタムCSS」のコピー
テーマオプション内の「カスタムCSS」を利用していた場合、テストサイトにもコピーします。これも「正常に表示されるか」の確認のためです。
私の場合、旧テーマのテーマオプションにカスタムCSS機能がありませんでした。
なので、これまでは「Simple Custom CSS」というプラグインを利用していたんですが、新テーマではカスタムCSS機能で事足りるため、プラグインから内容をまるっと移行することにしました。頼るプラグインが減るのは嬉しいですね！
また、旧テーマには「投稿ごとに設定できるカスタムCSS機能」も無かったため、「カスタムフィールド」を自作で設置していました。
それらの記述が消えてしまったら、その記事でのレイアウトが崩れてしまいます。万が一のことを考えてテキストでバックアップしておいたんですが・・・
少なくとも私の環境ではカスタムフィールドの設定は引き継がれました。でもまあせっかくなんで、テーマのカスタムCSSに移動しました もちろん正常に反映されています。
5.テーマオプションで大まかなレイアウト調整
テーマオプションで、サイトのメインカラーやフォントサイズ、ソーシャルボタンの表示など、おおまかな設定をざっくりと決めておきます。独自カスタマイズなどの細かい調整に入る前に、大まかなサイトレイアウトを決めておく必要があるからです。
もちろんロゴ画像もアップロード。サイトレイアウトを考える上で外せない要素ですよね。
大きさや設置場所などもあらかじめ決めておき、画像も「事前用意画像」フォルダを作って入れておきましょう。こういった「必要素材」もまとめておくと、来たる本番でのテーマ切り替え時にスムーズに移行できます。
テーマオプションやメニューの設定もテストサイトである程度詰めておけば、切り替え時に本番環境とテストサイトの設定を見比べて真似するだけになるので気分的にもラク。
もーそこまで仕上げておけば、ザ・機械作業。余裕です。
6.子テーマの作成・アップロード
子テーマも今のうちに作り、アップロードしておきましょう。
という人は気にしなくてOKです。
簡単に言うと、テーマがアップデートされた時にそのまま更新すると、せっかくのカスタマイズまで上書きされてしまうため、世のカスタマイザー一行は「子テーマ」という、世を忍ぶ仮の姿のテーマを作るわけですね。（別に悪いことでもなんでもないです）
気になってしまったなら・・・子テーマの設定方法はこちらが参考になります
作業自体は中級者向けですが、分かりやすい動画付きで説明してくれています。子テーマを作るところから始まり、「バイラルメディア風いいねボタン」の作りかたなんかも知れちゃいます。
7.旧テーマでのカスタマイズを反映・微調整
このチャプターは子テーマを利用したり、独自カスタマイズをする人向けのものです。
旧テーマではキレイに収まっていたはずのものが崩れたり、もうちょっとココの部分に余白が欲しい！なんてことは多々起こります。中級者以上の方はパパっ！と新たにカスタマイズ出来るんでしょうが、我々のような素人さんには、時間がかかってしょーがない。
そんな時に役に立つのがChromeの「デベロッパーツール」。実際のソースをいじらないでも、「もしココをこう変更したら？」をプレビューできるスグレモノ。スマートフォンでの表示具合も、機種ごとに確認できてしまいます。
詳しい使い方はこちら
Firefoxユーザーのための確認方法にも、ちゃんと触れられています。
8.親テーマをいじる必要があれば、変更点をメモ
このチャプターも「カスタマイザー」御一行様のためのものです。
同じTCDテーマでも、元々あったCSSコードが無くなっていることがあります。そりゃあ「テーマ」によって「テーマ」があるわけですから、レイアウトのためのスタイルシートに違いが出てくるのも、まあ当然ですね。
で、今回の私もそうでした。その影響で、例えばボタンリンクなどのレイアウトが崩れてしまっていたんです。もはやボタンになってへん・・・
・・・上手く反映されない。
・・・上手く反映されない。
まずは【!important】を試す
我々”素人族”には思い通りにいかないことがたくさんあります。そんな時はまず、【!important】を試してみましょう。例えば
.sz_l { font-size:100% !important; }
これを付けたところは（大体）最優先して反映されるのでとても重宝しました。
よーしよし。いい感じだ。
最終手段！親テーマを直接編集
しかし！それでも上手く反映されないときもあります。そんなときは・・・本家、親テーマを直接いじるしかありません。例えばこちらの記事で紹介している「ロゴのRetina対応方法」は
親テーマに直接記述する必要がありました。こういった「親テーマ直接変更部分」はアップデート時に限らず、今から本番移行する際にも必要になることなのでメモしておく必要があります。
こんな感じで、欲張るとどんどん大変になっていきますが・・・カスタマイザーなあなたなら、
譲れない思いはあるっ！でしょう？
私はタスク管理ツール【Todoist】にひたすらまとめていきました
今回も大いに思考の整理に役立ちました。頭がゴチャゴチャになりそうな時、おすすめです
9.Search Regexで一括置換&メモ
記事ページを覗いてみると、新しいテーマの雰囲気に合わせたい部分が出てきます。カラムサイズが変わり、フォントサイズも変わったなら、改行具合も気になる・・・・人もいるでしょう。私は気になります。
でもその辺りはグッ！とこらえて！移行後にジワジワ直すことにして！今はもっと俯瞰した目線での、レイアウトやデザインの更新に注力しましょう。
で、どーいうところが気になるのかというと・・・例えば先ほどチャプター8で挙げたのがいい例です。私の場合、今までこちらの記事で使っていたボタンに使用していたCSSコードが、新たなテーマのスタイルシートからは無くなっており、レイアウトが崩れてしまっていました。
まあでも元のボタンよりも、新しく用意されたデザインを少しいじり、使いたくなったんです。
▼今までの記述
a class="linkbtn"
▼新しい記述
a class="q_button"
しかし、ボタンの数が多い・・・一個一個書き換えていくなんてだいぶ面倒。というわけで、お花畑プラグイン【Search Regex】の登場です。
なんでお花畑なんやろ。にしても、なんでこんなチカチカする花選んだんやろ。そーか、きっとドラマチックな思い出のあるお花畑なんやろなぁとステキな妄想は膨らみますが、このプラグインは全記事をまたいで、記述の一括置換をしてくれるスグレモノ。
精度も高く、ガンガン使いましたが私の環境では全く不具合がありませんでした。
置換前に「どの記事のどの場所が置換されるのか」をプレビューすることもできます。
さらにそのプレビューから1つずつ選んで置換することも可能。さらにさらに！プレビューからその該当記事へジャンプすることもできるという・・詳しい使い方はこちらへ任せます
テストサイトだから迷いなく置換できますね。で、本番環境でテーマを切り替えた直後にも、同じように置換作業をする必要があるわけですから、置換した記述は全てメモっておきましょう。
注意点
置換後、記事ページの表示を確認していくと、「アレ？・・・ココ、うまく置換されてないんちゃう？」というところがありました。それはもちろん、プラグインのせいなんかじゃなく・・・だけのこと。例えば、h3タグをリデザインしよう！として・・・
▼タグ頭
<h3><b>
<h3 style3b>
▼タグ末尾
</b></h3>
</h3>
とタイトルを挟むタグを置換したつもりが、思った通りに表示されなかった部分がありました。その理由は・・・
▼置換前の記述
<h3><b><b>タイトル</b></b></h3>
がーん。凡ミス。元々ボールドが重複していたんですね。
こういう部分を発見したら都度、「今のうちに本番環境の記述を直しておいてやる」、という流れになります。この場合で言うとボールドタグの重複を取り除いておいてやる、ということ。
そうすればその部分も、いざ本番で一括置換した時にうまくリデザインされることになります。
といった感じで・・・こだわろうとすればするほど、結構大変になってきますし、記事数が多ければ多いほど、大量の時間を費やすことになりそうです。
「」を考慮して、バランスを取ることも必要になってきますね。それでも、だけは避けましょう。
「誰が見てもおかしい」たくさんのレイアウト崩れが気になって結局は・・・焦りながらの作業に追われることになるはずです。
なので私は「早くテーマを変えてみたい！」という”はやる気持ち”を抑えて、ジワジワとテストサイトで準備するという一見ストイックな道を選びました。しかも・・・全記事をコピペし、置換しても大きな異常がないかを、ざっと確認することにしたんです！
（記事数もそんなに多くないし、どーせ後で確認したくなるので・・・）
これはちょっと極端な例かもしれません。まあ、どこまでテストサイトで仕上げておくかは自分次第、でもはコワすぎる、焦るハメになる、ということを伝えたいわけです。
10.ウィジェット内容・配置を決める
これも同じく、出来るだけテストサイトで仕上げておくための作業です。本番でテーマを切り替える時に、テストサイトからダーッとコピペするだけで済んだらスムーズなんですよね。
世間に公開してから、焦りながらレイアウトを考えるよりはずっといいんじゃないか、という考えです。もちろんこれも、自分次第ですね。
さあ次はいよいよ本番！テーマの切り替え作業に入ります！（⇒次のページヘ）
