ワードプレス

【徹底検証】乗り換えたいでしょ?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. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  2. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  3. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  4. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  5. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…

関連記事

  1. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット」の使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  2. tcd-theme-options_ecmg

    ワードプレス

    理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

  3. switch-by-the-device_ecmg
  4. customized-theme-update_ecmg-1-ps

    ワードプレス

    子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と注意点

    もう、逃げなくてもえーんやで。ついにやってきた、WordPre…

  5. lightshot_ecmg

    WEBデザイン

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

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

  6. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

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

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

レク.サウンドラボ

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

特集記事

  1. improvement-flow_ecmg
  2. valuable-content-from-image_ec
  3. tcd-theme-selection_ecmg-ps
  4. extension-tools-for-bloggers_ec
  5. theme-change_ecrt
  6. retina_ecmg
  7. tcd-mag_ecmg-ps
  8. todoist-tips_ecmg

ピックアップ記事

  1. todoist-advanced_ec
  2. tcd-theme-widget_ecmg
  3. todoist-basic_ec-ps
  4. annotation-image_ecmg
  5. like-button-card_ecmg-ps
  6. todoist-productivity_ecmg
  7. todoist-routine_ecrt
  8. tcd-css-customize_ecmg

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

business-books

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

todoist

掘り出し記事

  1. retina-os-solution_ecmg
  2. facebook-fast-display_ecmg
  3. meta-seo-inspector_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. todoist-basic_ec-ps
  2. quicktag_ecmg
  3. unroll-me_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 | Blogger向けおすすめ書籍

「言葉にできる」は武器になる。 現代広告の心理技術101

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

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

  1. reset-button_ecrt
  2. blog-contents_ecrt
  3. restriction_ecmg-ps
  1. tcd-theme-user-review_ecmg

    ワードプレス

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

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  3. extension-tools-for-bloggers_ec

    ブログ

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

    マネジメント

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

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
PAGE TOP