theme-change_ecrt

ワードプレス

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

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

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

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

不具合で表示が崩れたサイトなんて、一瞬たりとも見せたくないっ

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

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

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

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

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

スポンサーリンク

作業全体の流れ

手順

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

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

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

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

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

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

theme-change_ins1

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

BackWPupでバックアップ

バックアップの方法も様々ですが、「BackWPup」プラグインなら、日々自動でバックアップをとってくれるので便利です。しかし自動バックアップ機能だけに頼らず、テーマ移行作業直前に一度、手動で「ジョブの実行」をしておくと安心です。

サーバーからも直接ダウンロード

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

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

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

theme-change_ins2

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

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

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

Theme Test Driveは相性が悪い…?

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

theme-change_02

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

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

例えば記事内容を更新すれば、閲覧者にも更新された状態で表示されます。ということはもちろん・・・カスタマイズを試すなんてこともできません。新テーマではカラムサイズやスタイルシートをはじめ、ほぼ全てが一新されているわけなので、「様子を確認」したところで、ほとんど何もできないのです。

サーバー環境、プラグインの影響などなど、現状と全く変わりない環境で気軽に様子見できる、という利点はありますが・・・テーマオプションの設定を犠牲にしてまで「様子見だけする」メリットはほぼありません。「ローカル環境ぉ」というオドロオドロしい響きに屈さず、テストサイトを立ち上げましょう。簡単なので。

【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.テーマオプションで大まかなレイアウト調整

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

theme-change_15

theme-change_16

theme-change_17

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

theme-change_18

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

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

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

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

theme-change_19

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

という方は気にしなくてOK。

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

子テーマの設定方法はこちらが参考になります。

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

なお動画ではありませんが、このサイトでも小分けにして紹介しています。

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

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

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

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

使用例

theme-change_20

モバイル表示の確認

theme-change_21

詳しい使い方はこちら。

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

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

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

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

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

theme-change_28

ほな、新しいCSSにならって、子テーマのスタイルシートに追記更新や!

・・・うまく反映されない。

ほな、テーマオプションの「カスタムCSS」に追記更新や!

・・・うまく反映されない。

子テーマの記述を変更してみる

そんなときは、子テーマの「functions.php」の記述を変更してみましょう。親テーマ→子テーマの順にスタイルシートを読み込むように、より明示的な記述に変更すると、うまく反映されることがあります。

theme-change_27

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

参考記事

上記記事内の「子テーマの記述がうまく反映されない場合」部分で言及しています。
【!important】を試す

他の手段としては、【!important】を追記してみる方法があります。例えば・・・

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

これを付けたところは(大体)最優先して反映されるので、いざという時には重宝します。

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

それでも上手く反映されないときは・・・本家、親テーマを直接いじるしかありません

例えば下の記事で紹介している「ロゴのRetina対応方法」は、親テーマに直接記述する必要がありました。

テーマオプション内にデフォルトで「Retinaディスプレイ対応機能」が実装されているテンプレートもあります。

このような「親テーマを直接変更した部分」は、アップデート時に限らず、今から本番移行する際にも必要になることなのでメモしておく必要があります。私の場合、タスク管理ツール【Todoist】にまとめておきました。

theme-change_29

theme-change_30

頭がゴチャゴチャになりそうなこんな時にも、おすすめです。

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

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

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

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

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

今までの記述

a class="linkbtn"

新しい記述

a class="q_button"

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

theme-change_01

このプラグインは、全記事をまたいで、記述の一括置換をしてくれる男前野郎です

しかしなんでお花畑なんでしょう。なんでこんなチカチカするお花をチョイスしたんでしょう。そうかきっと作者のドラマチックな思い出のつまった場所で、と妄想は膨らみますが集中して進めましょう。精度も高く、ガンガン使いましたが私の環境では全く不具合がありませんでした。

theme-change_39

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

theme-change_40

さらにそのプレビューから該当記事の編集画面を開き、1つずつ選んで置換することも可能。詳しい使い方はこちらへ任せます。

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

theme-change_31

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

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

タグ頭

<h3><b>

<h3 style3b>

タグ末尾

</b></h3>

</h3>

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

置換前の記述

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

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

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

Before/After

theme-change_41

theme-change_42

といった感じで、こだわろうとすれば気にかけることが増えてきますし、記事数が多ければ多いほど、大量の時間を費やすことになりそうです。なので、「新テーマに切り替えた後に、少しずつ更新してもいい部分か?」を考慮して、バランスを取ることも必要になってきます。

それでも、いきなり本番環境へドン!だけは避けましょう。
「誰が見てもおかしい」大きなレイアウト崩れが気になって、結局は焦りながら、たくさんの時間を使うことになる可能性があります。

theme-change_ins5

なので・・・「早くテーマを変えてみたい!」という”はやる気持ち”を抑えて、ある程度テストサイトで準備しておくことをおすすめします。その間、旧テーマのサイトはそのままなので、焦る必要はないんですよね。

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

これも同じく、出来るだけテストサイトでイメージを固めるための作業なので、飛ばしてしまっても構いません。が、本番でテーマを切り替える時に、テストサイトからダーッとコピペするだけで済むので、スムーズになります

theme-change_26

さあ次はいよいよ本番。テーマの切り替え作業に入ります。

本番環境編

ページ:

1

2

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  2. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  3. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  4. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  5. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

関連記事

  1. chrome-full-screen-capture-ecmg

    ブログ

    ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウ…

    上から下までの、全体像をゲット。たった今見ている「WEBページ全体…

  2. analytics-ip-filter-ecmg
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計画/基本編

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  4. description-video_ec
  5. ad-placement-in-mag_ecmg
  6. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. todoist_ec
  2. retina_ecmg
  3. todoist-tips_ecmg
  4. tcd-mag_ecmg-ps
  5. improvement-flow_ecmg
  6. extension-tools-for-bloggers_ec

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

todoist

人気記事

  1. child-theme-mechanism_ecmg-ps
  2. child-theme_ecmg
  3. compress-jpeg-png-images-ecmg
  4. chrome-font_ecmg
  5. jpg-gif-png_ecmg
  6. todoist-basic_ec-ps

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. todoist-productivity_ecmg
  2. compress-jpeg-png-images-ecmg
  3. todoist-constitution_ec
  4. gif-animation_ec
  5. chrome-full-screen-capture-ecmg
  6. lightshot_ecmg

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

retina-os-solution

掘り出し記事

  1. retina-weight-saving_ecmg
  2. mergely-ecmg
  3. screenpresso-capture-ecmg
  4. LightShot-Screenpresso_ecmg
  5. pushbullet_ec
  6. facebook-app-id-app-secret-ecmg2

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. annotation-image-ecmg
  2. gif-animation_ec
  3. todoist-advanced_ec
  4. spark-tutorial-ecmg
  5. todoist-basic_ec-ps
  6. chrome-font_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. improvement-flow_ecmg
  2. theme-change_ecrt
  3. tcd-mag_ecmg-ps
  4. extension-tools-for-bloggers_ec
  5. tcd-theme-selection_ecmg-ps
  6. adjust-the-button_ecmg

人気記事

  1. todoist-basic_ec-ps
  2. screenpresso-initial-setting_ec
  3. media-setting_ec
  4. chrome-full-screen-capture-ecmg
  5. child-theme_ecmg
  6. child-theme-mechanism_ecmg-ps
  7. compress-jpeg-png-images-ecmg

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  2. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  3. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  4. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  5. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
PAGE TOP