ワードプレス

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

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

theme-change_ins6

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

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

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

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

さあいよいよ本番!テーマの切り替えです!ここからはテストサイトではなく、本番環境での作業説明になります。まずは新テーマの親テーマ・子テーマを順にアップロード。もちろん、まだ有効化しないでください

子テーマの必要がない人は、単純に新テーマのデータをアップロードすればOKです。

Search Regexのインストール

theme-change_01

テーマ変更直後に、一括置換作業が待ってますよね?あらかじめインストール・有効化しておきましょう。本番環境にも、お花畑を。

親テーマの変更点を更新しておく

次に、テストサイトで準備した「8.親テーマをいじる必要があれば、変更点をメモ」した分を、「テーマの編集」からあらかじめ反映しておきます

例「ロゴ画像のRetina対応」

外観⇒テーマの編集⇒「編集するテーマを選択」で、新テーマの親テーマを選び、修正します。

theme-change_32

theme-change_33

theme-change_34

 「ロゴ画像のRetina対応」参考記事

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

AdSenseは全て、一旦削除

AdSenseはこの段階で一度、全て撤去しておいたほうがいいと思います。新テーマへ切替後、思わぬところに反映されてしまうためです(体験済み!)

記事下、ウィジェット、フッターなど、設置しているものは忘れずに撤去しておきましょう!

Simple Image Sizesをインストール

theme-change_37

予言しましょう。
あなたはこの後テーマを切り替え、まずなんとなーくサイトを表示してみると・・・恐らく想像とは違った表示に面食らうことになるでしょう。

でも大丈夫。原因は「アイキャッチ画像」。新テーマに適したサイズのアイキャッチ画像が自動生成されていないためです

ん?・・自動生成ってなにぃ?おいしーの??

という人はこちらを 

知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

・・・まあでも、知識は後回しでも大丈夫。とにかくプラグイン【Simple Image Sizes】をインストールしておきましょう。ただしまだ有効化はしないでください。今は細かく説明しませんが、ソイツがテーマ切り替え後に救ってくれることになります

説明もなしに得体の知れないプラグインはインストールしたくないっ!

という人はこちらを 

メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Sizes」の設定方法

注意点

ここで思い出してほしいことがあります。あなたは今まで、アイキャッチ画像をどんなサイズでアップロードしていましたか?

というのも、2通りに分けて説明する必要があるんです。
【A】新テーマで使われるサイズよりも、大きいサイズでアップロードしていた
【B】それより小さいサイズでアップロードしていた(orバラバラ!orんなもん覚えてへん!)

の2通りです。

そのままでOK!

今のうちに新テーマで使われるサイズのアイキャッチ画像を用意し、テーマ切り替え後にアップロード&差し替えたほうが「より良い結果」となります。

というのも、小さいサイズの画像が引き伸ばされて粗い画像表示になってしまったり、本来表示されるはずのサイズよりも、小さく表示されてしまったりするからです

ただし記事数が多い場合は大変なので、後でジワジワと差し替えるのもアリでしょう。

ちなみに私は【A】の人でした。使用される画像幅は大きくなり・・・

 旧テーマ | 新テーマ(クリックで拡大)

theme-change_22

theme-change_23

アイキャッチ画像は大きめのものをアップロードしていました。画像サイズはメディアライブラリから確認できます。

theme-change_35

theme-change_36

画像幅の簡単な調べ方はこちら 

WEBサイズマスターへ。Chrome拡張「Page Ruler」「Image Size Info」でなんでも計測!

【A】の人も【B】の人も、「Simple Image Sizes」プラグインはインストールしておいてください。後ほど必要になります。(有効化はテーマ切り替え後に!)

元々導入済みの人向けの注意点は後述しています。

あくまで寄り道になりますが、【A】の人も【B】の人も、もし「画像をRetinaディスプレイでも美しく表示させたい!」のであれば、こちらも参考に 

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

しかし!今は、無事にテーマ変更することが最優先です。どーしてもムラムラした時に改めて取り組んでみてください。え?今ムラムラしてもーたんならしゃーないです。覗いてください。

WP Maintenance Modeをインストール

よーやく新テーマへの切替え準備が整いました。ここで、テーマ切替後にやるべきことを整理しておきます。

アイキャッチ画像問題の解決(後述)

「カスタムCSS」を含むテーマオプションの設定

投稿ごとの「カスタムCSS」の設定(必要であれば)

Search Regexで一括置換

ウィジェットの設定

AdSenseの再設定(後回しでもいい)

・・・ね?こんなに準備してきても、けっこう時間かかりそうでしょ?

というわけで、さすがに一瞬では終わりそうにないテーマ切り替え作業の間、訪問者には崩れたレイアウトではなく、キレイな「メンテナンスモード画面」を表示しておきましょう。あっという間に設定できる【WP Maintenance Mode】プラグインをインストールします。

theme-change_03

使い方は再び、こちらのページから 

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

メンテナンスモードに切り替えたら早速、新テーマを有効化して一連の作業に入りましょう。出来るだけ、アクセスの少ない時間帯に作業したいところですね。でも大丈夫。きっとスムーズです。しっかり準備してきましたから!

theme-change_38

子テーマを利用している場合はもちろん、子テーマ側を有効化しましょう。

アイキャッチ画像のリサイズ

さて、一連の予定されていた作業を終えてサイトを見てみると、予言していたとおりアイキャッチ画像の表示に違和感を覚えることになります。では早速「Simple Image Sizes」を有効化。

メディアライブラリからアイキャッチに使用されている画像たちを選んで魔法のじゅもんを唱えます。「Regenerate thumbnails」!

retina-slider_14

retina-slider_15

ハイ、これだけでOK。新テーマに合ったサイズが再生成されました。もう一度サイトを覗いてみましょう。正常に表示されているはずです。

TCDサイトで紹介されている「Regenerate Thumbnails」も、この「Simple Image Sizes」も、既にメディアライブラリに登録されている画像全てに対して一括生成をかけることができますが、手放しでオススメできません。

ライブラリ内にある全ての画像ひとつひとつの新たなサイズが、ダダダーッ!!と生成されるわけですから・・・サーバー容量が一気にキュークツになりそうです。

記事中の画像サイズも一気に切替える目的があったり、ビジョンがハッキリしていなければ・・取り急ぎ、面倒でもアイキャッチに使われている画像のみを選択することをおすすめします。

注意点

旧テーマで既にSimple Image Sizesを導入していた人向けの注意点です
その場合、旧テーマの設定が残ってしまっていることがあります。インストールしなおしても設定はリセットされません。

その場合は慌てず、ローカル環境で立ち上げたテストサイトを参考に、設定をし直しましょう。今まで設定していたものを削除しても大丈夫。今までの記事に影響することはありません。

 テストサイトでのデフォルト設定

theme-change_24

 新サイトでの現状設定

theme-change_25

「新サイトでの現状設定」の数値はRetina対応させるために若干変更してあります。項目も、用途に合わせて増やしています。基本的にはテストサイトでの設定を参考にすればOKです

最終チェック-サイト内巡回

全ての作業が完了したら、ある程度サイト内を巡回してみましょう。思わぬ表示崩れがないか?やり残した作業はないか?チェック項目をもう一度挙げておきます。

アイキャッチ画像問題の解決

「カスタムCSS」を含むテーマオプションの設定

投稿ごとの「カスタムCSS」の設定(必要であれば)

Search Regexで一括置換

ウィジェットの設定

AdSenseの再設定(後回しでもいい)

問題無ければ、あとは後ほど、細かい部分をジワジワと修正していけばOKですね。早速メンテナンスモードを解除しましょう。

無事テーマの変更が出来ました!いやーお疲れさまでした。ホントに。

まとめ / 今後のために

theme-change_ins7

最後に、今回テーマ変更を実践・検証してみて気づいたこと、今後のために心がけておいたほうがいいだろうことをまとめて終わります。

テーマ変更後のウィジェットに注意

テーマ変更後、元々設定していたウィジェットの一部は消えずに残っていることがある。

思わぬところに反映されていたりするので、テーマ変更後は全てのウィジェット設置場所の中身をチェックしたほうがいい。

逆に、それを流用すれば、再現するための時間短縮にもなる。

ローカル環境でのチェックは入念に

思わぬレイアウト崩れは必ずと言っていいほどあるので、出来るだけ全体のレイアウトを確認したほうがいい。必要となる画像もまとめておく。

目指すところは、テストサイトからコピーしていくだけの機械作業!

そうすれば何かしら予期せぬ不具合が起こったときも、その対応に注力できるので、最低限の時間で公開できる。

編集して作った画像は保管しておく

特にアイキャッチ画像が小さいと、カラムサイズが大きいテーマへ切り替えた時、きれいに表示されない。リサイズ前の、大きい状態のマスターデータを保管しておくと安心。

アップロード画像は少し大きめにしておく

今後テーマ変更の可能性があり、今よりカラムサイズが大きくなることが予想される場合、記事本文へアップロードする画像は少し大きめのものをアップロードしておく。

そうしておけばいざという時、「Simple Image Sizes」の設定変更で、都度適切なサイズの画像を再生成し、置換することができる。

 関連記事

【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト機能と魅力を徹底解説

ページ:
1

2

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  2. ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIn…
  3. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  4. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  5. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする

関連記事

  1. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選

    さらに便利に。タスク管理の母艦へ。Todoistはそれ自体の持つ機…

  2. retina-text-widget_ecrt
  3. facebook-app-id-app-secret_ecmg

    マーケティング

    サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp secretの取得方…

    え・・こんな簡単だったんすか。サイト運営をしていると、Facebo…

  4. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

  5. theme-manual-update_ec

    ワードプレス

    アップデート通知が来ない!?WordPressテーマを手動でアップデートする方法

    アップデート通知、なんでこないの?ある有名なストーリーがあります。…

  6. lightshot_ecmg

    WEBデザイン

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

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

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

特集記事

  1. todoist-extension_ecmg
  2. tcd-theme-selection_ecmg-ps
  3. extension-tools-for-bloggers_ec
  4. retina_ecmg
  5. business-books_ecmg
  6. display-speed_ec
  7. improvement-flow_ecmg
  8. adjust-the-button_ecmg

ピックアップ記事

  1. like-button-card_ecmg-ps
  2. gif-animation_ec
  3. lightshot_ecmg
  4. compress-jpeg-png-images_ecrt
  5. tcd-css-customize_ecmg
  6. customized-theme-update_ecmg-1-ps
  7. tcd-theme-options_ecmg
  8. blog-theme-mag_ecmg-ps

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. feedly-count-problem_ecmg
  2. mergely-ecmg
  3. mailbox-goodbye-newapp_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-basic_ec-ps
  2. widgetoon-js-count-jsoon_ecmg
  3. todoist-constitution_ec

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. blog-contents_ecrt
  2. reset-button_ecrt
  3. restriction_ecmg-ps
  1. todoist-tips_ecmg

    マネジメント

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

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. valuable-content-from-image_ec

    ワードプレス

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
PAGE TOP