【WordPress／TCD】デザイン変更手順
7、8年前に旧HPのデザイン「ANGEL」をTCDデザインから購入しました。
全くやったことのないWEBデザインでしたが、色々と学びながら試したり練習したりをしてきた土台です。
ですが、今みたいに気まぐれのブログ更新だけとなると「ANGEL」ではしっくりこなくなってしまって、今年現デザインの「Be」に変更しました。
でも7年前の「ANGEL」でこれって改めてデザイナーさんってすごいですよね。
さて、「Be」に変更する前はテストサイトで色々と試していました。
いきなり本番環境でデザインを変えると、デザイン崩れなどが発生します。思っていた以上に。
「ANGEL」用に設定していたCSSも「Be」では必要ないですし、別の色々な再設定が必要でした。こればっかりは変えてみないと分からないという感じ。
なのでテストサイト…面倒だなと思ってましたが、結果とても必要でしたので将来に通用するか分かりませんが一応残しておきたいと思います。
テストサイトは本番サイトをコピーし、テスト用ディレクトリを設定しました。本番サイトと同じIDとPWでログインできます。※これの作り方は以下のブログを参照
【例】https://本番URL/testsite
テストサイトが用意できたら、いよいよデザインを購入し、テストサイトに設定します。
Chrome（＝本番）とMicrosoft Edge（＝テスト）のように、ブラウザを分けて本番とテスト環境を開くようにし（セッションの干渉や混乱を防ぐため）、旧デザインの設定を見ながら新デザインの調整をするといいと思います。
全記事チェックしながらデザインを調整していきますが、その間本番サイトを更新したらテストサイトも同じように更新しないと後で丸々上書きするので抜けが生じます。
頻繁にサイトを更新するならかなり手間になるので、短期集中でデザインは整えたほうがいいですね。
調整し終えたら、本番サイトへ移行になりますが、ここからが慎重にならなければいけませんので丁寧に行いましょう。
本番サイトへの移行方法
①テストサイトのURLはそのままでワードプレス管理画面からデータをエクスポート
「All-in-One WP Migration」のプラグインを使ってエクスポート。「ファイル」を選んでダウンロード。
※無料版は512MB制限あり（それよりデータがある場合は拡張やプロ版が必要かと思います。）
②本番サイトを丸々バックアップ
私はXサーバーを使っていますので、サーバーからも取りましたし、本番サイト側でも「All-in-One WP Migration」のプラグインを使ってエクスポートしました。何かあっても元に戻せるよう念には念をで必ず取っておきましょう。
③本番サイトにテストサイトのデータをインポート
本番サイト側の「All-in-One WP Migration」のプラグインを使い、インポートを選択し、①のダウンロードしたデータ（.wpessファイル）を選択します。
「このサイトのすべてのデータが上書きされます」と出るか、
「一致するコンテンツのみが置き換えられます。その他の項目は変更されません。 まずは完全なリセットが必要ですか ? Unlimited Extensionの Reset Hub をお試しください。最新のバックアップがあることを確認してください。続行しますか？」と出ます。
私の場合は後者で出ましたが、そのまま続行してテストサイトに置き換わりました。不安のある場合はよく調べて行いましょう。
④インポートするとログイン画面でログインできなくなる可能性が高い
そのため、Xサーバーのファイルマネージャーで作業します。これはテストサイトを作った時と同じです。
本番側の「public_html」→「wp-config.php」を開く。
冒頭の「<?php」の下に以下のように追加し、再ログインができるようになりました。
define(‘WP_HOME’, ‘本番サイトのURL’);
define(‘WP_SITEURL’, ‘本番サイトのURL’);
※ログイン画面を間違わないこと。本番サイトの管理画面URL/wp-login.php
サイトタイトルがテストのままかと思いますので設定から修正すれば大丈夫です。
⑤データーベース内のURLの置き換えが必要かどうかチェック
ここまで成功してきたら嬉しいものですが、データーベース内のURLの置き換えが必要かどうかチェックする必要があります。もし内部リンクや画像がテストサイトのURLで登録されていた場合に読み込みエラーとなる為です。
プラグイン「Better Search Replace」をインストール＆有効化し、検索側にテストサイトのURL（httpかhttpsで指定しているか厳密に）、置き換え側に本番サイトのURLを入力します。
必要なのは、wp_options、wp_posts、wp_postmeta、wp_usermeta、wp_links、wp_yoast_seo_links（ある場合）ですが、心配なら全部選んでもOKです。
どれくらい見つかるか最初は必ずドライランから試しましょう。実行すると「○件見つかりました」と出てくるか、もしくは出てきません。
出ればドライランのチェックを外し本番書き換えをします。
⑥最終確認
本番サイトをくまなくチェックして不具合が出ている箇所がないか、あれば修正しましょう。また使わなくなったプラグインも整理整頓しましょう。
問題なければ、④で「wp-config.php」に追加した2行は削除して大丈夫です。また、テストサイトをしばらく使わないのであれば、セキュリティ的にも消したほうがいいかと思います。Xサーバーのサーバーパネルから、「WordPress簡単インストール」 → 該当のドメインを選び削除しておきましょう。
Xサーバーをご検討中の方は以下のリンクからご登録いただくことで利用料金がお安くなります。
特典の適用ページはこちら
※キャンペーン内容は変わる可能性があります。ご確認の上お申し込みください。
参照ブログ：【Xserver】【WordPress】テーマ移行を確実に進めるための手順と注意点を解説！
