ワードプレス

【徹底検証】乗り換えたいでしょ?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」の設定変更で、都度適切なサイズの画像を再生成し、置換することができる。

 関連記事

魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバーセレクション

ページ:
1

2

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

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  2. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  5. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…

関連記事

  1. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  2. display-speed_ec

    ワードプレス

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

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

  3. todoist-extension_ecmg

    マネジメント

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

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

  4. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  5. sns-count-cache_ecmg

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス!「ページを表示するたびに、今のシェア数…

  6. lightshot_ecmg

    WEBデザイン

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

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

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

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

レク.サウンドラボ

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

特集記事

  1. valuable-content-from-image_ec
  2. todoist-extension_ecmg
  3. improvement-flow_ecmg
  4. business-books_ecmg
  5. extension-tools-for-bloggers_ec
  6. todoist_ec
  7. theme-change_ecrt
  8. todoist-tips_ecmg
  9. retina_ecmg
  10. tcd-mag_ecmg

ピックアップ記事

  1. reset-button_ecrt
  2. tcd-css-customize_ecmg
  3. todoist-class_ecrt
  4. phrase-express_ecmg
  5. todoist-routine_ecrt
  6. tcd-theme-options_ecmg
  7. jpg-gif-png_ecmg
  8. dash_ecmg
  9. facebook-page-plugin_ecmg
  10. quicktag_ecmg

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

business-books

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

todoist

おすすめ記事

  1. Screenpresso(スクリーンプレッソ)を使うなら、や…
  2. 「Mailboxの代わりは・・?」代替メールアプリ最有力。S…
  3. Windows?Mac?なんでもゴザレ。スクリーンショットに…
  4. 成長に欠かせない大切な秘訣。真面目な人ほど陥りやすい、”モヤ…
  5. タスクを完了させたくなる!? モチベーションアップに役立つT…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  2. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  3. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  4. 【目的別】とっておきのWordPressテーマ比較。TCDテ…
  5. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. theme-change_ecrt

    ワードプレス

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

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  3. business-books_ecmg

    マーケティング

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  5. valuable-content-from-image_ec

    ワードプレス

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