毎日更新しているサイトのデザインを閲覧者に影響なく入れ替える方法

ワードプレスでホームページを長期間運営しているとデザインを変更したくなります。もし大人気のテーマを使っているとたくさんの方と見た目がかぶるのでテーマを変えてデザインを一新したくなりますよね。ただ、閲覧ユーザーのことを考えると「テーマの変更」はさくっと手短に行なえるのがベストです。

毎日更新しているサイトのデザインを閲覧者に影響なく入れ替える方法

ワードプレスでテーマを素早く入れ替える方法は「２つ」あります。１つはサブドメインを使って個別で「完全クローンサイト」を立ち上げて準備を進めてから本番ドメインと入れ替える方法です。

この方法であればデザイン調整などの下準備をすべて裏側で行ってから瞬時に入れ替えるので閲覧ユーザーにレイアウトが崩れている状態を見られる心配がありません。ただ、サブドメイン（test.example.com等）に現在のサイトを完全コピーした個別サイトを立ち上げる必要があるので少しだけ技術力が必要です。

１. サブドメインを追加する
２. サブドメイン用にワードプレスをコピーする
３. サブドメイン用にデータベースを作成する
４. サブドメイン上に複製サイトを作る
５. 複製サイトにパスワード認証をかける（非公開クローズド化）
６. 非公開のサイト上でテーマを入れ替える

ちなみに「テーマ」を入れ替えると「メニュー」と「ウィジェット」は新テーマ側に引き継がれません。つまり新しいテーマを適用したワードプレスにメニューとウィジェットの設定を追加する必要があります。

そして２つめの方法。この方法は初心者でもできるのが特徴です。ただし、いくつか注意点もあります。まずはざっと手順について解説をさせていただきます。テーマを切り替える前の下準備がポイントとなります。

１. 旧テーマでメニューの設定画面をあらかじめ開いておく
２. 旧テーマでウィジェットの設定画面をあらかじめ開いておく

つまり、新テーマへ切り替えたら「メニュー」と「ウィジェット」の設定が新しい画面側では引き継げないのでテーマを切り替える前（旧テーマを適用している状態）のメニューとウィジェット設定画面を開いておく作戦。

新テーマを適用したあとに「旧テーマ」の画面で設定していた「メニューやウィジェット」を参考にしつつ、新テーマを適用したあとの画面と、旧テーマで開いた画面を両方見比べながら作業を進めていく方法です。

テーマを入れ変える直前に「メニュー」を開いておく

メニューは「テーマ毎」で紐づいている仕様

ウィジェット設定画面は事前に開いておく

ウィジェットも「テーマ毎」で紐づくのがワードプレスの仕様

新テーマを適用する前に開いた画面では「メニュー」や「ウィジェット」は旧テーマに紐づいた画面が表示されていますので、その画面を開いたままにしておき、新テーマを適用したあとにカンニング用に使うわけです。

ただ、一度でも画面を更新してしまうと、新テーマ側のウィジェットに戻ってしまうので扱いは要注意。また新テーマを設定し終わったあとに、旧テーマ側の画面が開いたままになると設定が上書きされておかしくなることもあるので旧テーマ側の画面はカンニングが終わったら静かに×ボタンで閉じてしまってください。

新テーマ側は新たなウィジェット画面が開くので、旧テーマを適用していた状態のウィジェット画面を見ながら同じようにコピペしていけばOKです。もし何かしらで「旧テーマ側の画面が更新されてしまう」とカンニングすらできなくなるので慎重に作業を進める必要があります。ちょっと強引なテーマ変更ですね。

まとめ

テーマを変更すると言っても構造はテーマ次第です。テーマを変更して「メニューとウィジェットが違うだけ」ならまだ良いですが、テーマによってはCTA（コールトゥアクション）が付いていなかったり、ショートコードでの差込みが必要になってくるなどさまざまな「固有仕様」も絡んでくるのが現実です。

困ったら落ち着いたすぐ前のテーマへ戻せば良いのですが「テーマによっては特殊な設定が上書きされる」場合もあるので全員が全員それで解決するわけでもありません。

やはりもっとも安全なのは「サブドメインを使って完全クローンの複製サイトを事前準備する方法」です。

例）本番ドメイン
https://example.com

例）サブドメイン（複製）
https://test.example.com

全部の設定が終わってから最終的にドメインを一気に入れ替えた方がスマートなのは間違いありません。ただ複製サイトを作ってから再度本番サイト用に入れ替えるので多少の時間とコストがかかります。来訪者を驚かせるためにも裏側でひっそりとリニューアルを進めて時期を見て一気に変更する方がインパクトもあります。

もしテーマ変更を考えている場合はぜひ手順の参考にしてくださいませ。