WordPressのテーマ変更でやったこと・つまずいた所まとめ【運営日記】

ノートパソコンの上に置かれた携帯電話

先日、WeberNoteのWordPressテーマをまるっと入れ替えました。「テーマを選んで有効化のボタンを押すだけでしょ?」と、作業を始める前の私は本気でそう思っていました。ところがフタを開けてみたら、サイドバーのウィジェットは消えるわ、メニューはバラバラになるわ、一部のページの表示は崩れるわで、半日で終わるはずの作業が結局まる二日がかりになりました。

この記事は、運営者である私がWeberNoteのテーマを実際に切り替えてみて、テーマ変更という作業そのもので何をやったのか、どこでつまずいたのか、次にやるなら何に気をつけるのかを、手順ベースで包み隠さずまとめた運営日記です。

デザインを刷新して何を感じたか、というデザイン論の話ではありません。あくまで「テーマを切り替えるという作業」にぐっと寄った、地味で実務的な記録です。バックアップから事前のプレビュー確認、消えたウィジェットやメニューの再設定、プラグインとの相性チェック、そして崩れた過去記事の手直しまで、作業の順番にそってひととおり押さえています。テーマ選びそのものより、選んだあとの調整のほうがよほど時間がかかる、というのが今回いちばんの実感でした。

WordPressを長年さわってきた私でも、テーマ変更は油断するとあちこちで足をすくわれる作業でした。これからテーマを変えようとしている人が「あ、ここで引っかかるのか」と先回りで知っておけるよう、私の二日間の右往左往をそのままお裾分けします。手を動かす前に、ざっと目を通してもらえたらと思います。

まずやったのは「全部バックアップ」

テーマ変更で最初にやるべきは、デザインを選ぶことでも管理画面を開くことでもなく、バックアップです。これは作業前の私が唯一、最初からきちんとやれたことでした。

テーマを切り替えると、サイトの見た目を支えている部分が一気に入れ替わります。うまくいけば何の問題もありませんが、表示が崩れたり真っ白になったりしたとき、元に戻せる状態を用意していないと一気に詰みます。「失敗してもすぐ戻せる」という安心感があるだけで、その後の作業の思いきりがまるで変わります。

私が実際に取ったのは次の2種類です。

  1. ファイル一式のバックアップ … テーマやアップロードした画像など、サーバー上のファイルをまるごと控える
  2. データベースのバックアップ … 記事や設定が保存されているデータベースを書き出しておく

見た目に直結するのはファイル側ですが、設定や記事はデータベース側に入っているので、テーマ変更の前には両方そろえておくと安心です。多くの解説でも、テーマ変更前にはファイルとデータベースの両方をバックアップしておくことが推奨されています。レンタルサーバーのバックアップ機能を使ってもいいですし、専用のバックアッププラグインを入れる手もあります。

ここを面倒くさがってすっ飛ばすと、いざというときに泣くのは自分です。私は過去にバックアップなしで作業して半泣きになった経験があるので、ここだけは毎回しつこく確認しています。

出典・参考: WordPressテーマ移行を確実に進めるための手順と注意点(Xserver)WordPressテーマを安全に更新する完全ガイド(MozCheck)

いきなり有効化せず「プレビュー」で下見する

バックアップが済んだら、すぐにテーマを有効化したくなります。でも、ここでぐっとこらえてプレビューで下見をするのがおすすめです。私はこれを面倒がって一度いきなり有効化し、訪問者にぐちゃぐちゃの画面を見せてしまったことがあります。

WordPressには、テーマを有効化する前に見た目を試せる「ライブプレビュー(カスタマイザー)」という仕組みがあります。新しいテーマを当てたらどう見えるかを、本番サイトには反映させないまま画面上で確認できる機能です。実際にWordPressのカスタマイザーは、テーマを有効化する前に設定を試しながらデザインをリアルタイムで確認できるようになっています。

私はこのプレビューで、次のあたりを重点的に見ました。

  1. トップページと、長文の記事ページのレイアウト
  2. サイドバーやメニューの並び
  3. スマホ表示(実機でも確認)

下見の段階で「ここは崩れそうだな」と当たりがついていると、有効化したあとの修正がぐっとラクになります。プレビューはあくまで簡易的な確認なので、すべての不具合がここで見つかるわけではありませんが、それでも何も見ずに突っ込むのとは雲泥の差でした。

本来いちばん安全なのは、本番とは別のテスト用環境で先に試すやり方です。本番サイトでいきなりテーマを差し替えるのはやはりリスキーだと、多くの解説でも指摘されています。そこまで用意するのが難しければ、せめてアクセスの少ない時間帯を選んで、プレビューでしっかり下見してから切り替えるとよいです。

出典・参考: テーマをプレビューする(WordPressマニュアル)WordPressテーマ移行の手順と注意点(Xserver)

有効化したら案の定、ウィジェットとメニューが消えた

いよいよテーマを有効化。そして、わかってはいたものの、やっぱり起きました。サイドバーに並べていたウィジェットがごっそり消え、ヘッダーのナビゲーションメニューもどこかへ行ってしまったのです。

これはバグでも事故でもなく、テーマ変更ではごく普通に起きる現象です。ウィジェットやメニューの「置き場所」はテーマごとに違うので、テーマを変えると以前の配置がそのまま引き継がれないんです。解説記事でも、新テーマでは登録されているエリア(サイドバーやメニューの位置)の構造が違うため、ウィジェットやメニューが表示されなくなることがあると説明されています。

ありがたいことに、消えたといっても中身のデータが全部吹き飛んだわけではありませんでした。私が再設定でやったのは、おおむね次の流れです。

  1. 新テーマで用意されているウィジェットエリアを確認する
  2. 必要なウィジェット(プロフィール、検索、人気記事など)を置き直す
  3. メニューを新テーマの表示位置に割り当て直す
  4. 実際の画面で、リンク切れや並び順のおかしい所がないかチェックする

地味ですが、ここを丁寧にやらないと、訪問者から見て「あれ、メニューがない不便なサイト」になってしまいます。テーマを変えたらウィジェットとメニューは作り直しになる、と最初から覚悟しておくと精神的にもラクです。私は「消えた!」と一瞬あせりましたが、想定内だと知っていれば淡々と置き直すだけの作業でした。

出典・参考: WordPressのテーマ変更で崩れる?8つのリスク(INSPIRE)WordPressテーマを変更する方法【注意点も含めて完全解説】(wp.geek)

地味に怖い、プラグインとの相性チェック

ウィジェットの次に時間を取られたのが、プラグインまわりの確認でした。これがテーマ変更で一番見落としやすく、かつ後からじわじわ効いてくる落とし穴だと感じています。

厄介なのは、テーマとプラグインがそれぞれ別々に作られていて、相性が必ずしも保証されていない点です。テーマとプラグインはアップデートのタイミングも仕様も違うため、その食い違いが表示崩れや不具合の原因になることがある、と複数の解説で指摘されています。実際に私のサイトでも、前のテーマでは普通に動いていた一部の表示が、新テーマでは微妙にズレるという現象が出ました。

特に注意したいのが、ショートコードやカスタム投稿タイプといった「テーマに依存しがちな機能」です。前のテーマ独自の機能やショートコードに頼っていた箇所は、テーマを変えるとそのまま文字列が表示されてしまったり、空白になったりすることがあります。カスタム投稿タイプやショートコードを多用しているサイトは、新テーマでも正常に表示されるか必ず確認したほうがよい、というのは方々で言われている通りでした。

私が実際にやったチェックは次のとおりです。

  1. 使っているプラグインを一覧で洗い出す
  2. 有効化後にエラーや警告が出ていないか管理画面を確認
  3. 記事内のショートコードや埋め込みがちゃんと表示されているか目視
  4. 問い合わせフォームや関連記事など、動きのある部分を実際に操作してみる

導入予定のテーマに公式ドキュメントがあるなら、対応プラグインの記載に目を通しておくと、無用なトラブルを減らせます。「動いて当たり前」と思っている機能ほど、テーマ変更後はいったん疑ってかかるくらいでちょうどいいです。

出典・参考: WordPressテーマ乗り換え時のプラグイン互換性の確認ポイント(リットアップ)WordPressテーマ変更で崩れる?原因と対処法(サイト引越し屋さん)

関連記事:これだけでよかった!WordPressで本当に必要だった8つのおすすめプラグイン

古い記事の「表示崩れ」を一本ずつ直す

ウィジェットとプラグインが落ち着いて「よし終わった」と思ったのも束の間、過去記事を見て回ると、あちこちでレイアウトが崩れていました。これがテーマ変更で一番じわじわ効いてくる作業でした。

崩れの主な原因は、前のテーマに合わせて書いていたHTMLやCSSが、新テーマと噛み合わないことです。テーマ変更後にデザインが崩れるのは、旧テーマのCSSやウィジェット構造が新テーマと合っていないことが主因だと、複数の解説で説明されています。長く運営していると、その時々のテーマ前提で書いたコードが記事の中に積み重なっているので、テーマを変えるとそのツケがまとめて表面化するわけです。

私がやった直し方は、結局のところ地道な総点検でした。

  1. アクセスの多い人気記事から優先して見直す
  2. 表組みや画像まわりなど、崩れやすい部分を重点的にチェック
  3. テーマ依存の古い書き方を見つけたら、汎用的な書き方に直す

全記事を一気に完璧にしようとすると心が折れるので、まずはよく読まれているページから手をつけました。残りは運営しながら気づいたタイミングでこまめに直していく方針です。手間はかかりましたが、テーマ変更はサイト全体を棚卸しする、またとない機会でもありました。崩れを直して回るうちに、見た目に統一感が戻ってきたのは素直にうれしかったです。

出典・参考: WordPressの「表示が崩れた!」ときの原因と対処法(MozCheck)WordPressテーマ変更で崩れる?原因と対処法(サイト引越し屋さん)

関連記事:WordPressで関連記事が表示されない時の対処法と今どきの代替プラグイン

テーマ変更で気をつけたいポイントまとめ

ここまでの二日間を振り返って、テーマ変更でこれだけは押さえておきたいと感じたポイントを、作業の順番にそって整理しておきます。

  1. ファイルとデータベースの両方をバックアップしてから始める
  2. いきなり有効化せず、プレビューや別環境で先に下見する
  3. 有効化後はウィジェットとメニューが消える前提で、置き直す段取りをしておく
  4. ショートコードやカスタム機能など、プラグインとの相性を一つずつ確認する
  5. 過去記事の表示崩れは、人気ページから優先して直していく

どれも派手さはありませんが、この順番を守るだけで、テーマ変更の事故はぐっと減らせます。なお、URLが変わるような大がかりな引っ越しを伴う場合は、リダイレクトの設定など別の注意も必要になってくるので、そこは慎重に進めてください。

関連記事:【WordPress】301リダイレクトを.htaccessで行う方法と注意点

まとめ:テーマ変更は「ボタン一つ」では終わらない

今回いちばん身にしみたのは、テーマ変更は有効化ボタンを押した瞬間がゴールではなく、そこからが本番だということです。消えたウィジェットを置き直し、プラグインの相性を確かめ、崩れた過去記事を一本ずつ直す。この地味な後始末をどれだけ丁寧にやれるかで、訪問者から見たサイトの仕上がりが決まります。

正直に言えば、作業を始める前の私は「テーマを選んで切り替えるだけ」と高をくくっていました。でも実際に手を動かしてみると、デザインを選ぶ時間より、選んだあとの調整に費やす時間のほうがずっと長かったです。長年この仕事をしていても、自分のサイトで全部一人でやると、こうしてあちこち引っかかるものなんだなと、あらためて思い知りました。

これからテーマを変えようとしている人がいたら、伝えたいことは一つです。バックアップを取って、いきなり有効化せず下見をして、ウィジェット・プラグイン・過去記事の調整まで含めて「ひと仕事」と見積もっておくこと。そう構えておけば、途中で「聞いてないよ!」とあわてることはほとんどなくなります。完璧を目指して身構えるより、変えたあとに走りながら直す、くらいの気持ちのほうがうまくいきます。

ちょっと新しくなったWeberNote、これからも中身も見た目も少しずつ手を入れながら続けていきます。よかったらまたのぞきに来てください。

関連記事:ブログのデザインをリニューアルした話。読みやすさを優先して見えてきた課題

関連記事:ホームページリニューアルで失敗しないコツ。自己満足のデザインにしない方法