誰でも簡単!WordPressでブログをはじめたい方はコチラ!

完全ガイド|WordPressテーマ変更時のデザインが崩れ防止

  • URL Copied!

こんにちは、たくぞーです。

WordPressのテーマを変更すると、記事のデザインが崩れているという経験をしたことあると思います。

テーマ変更時に記事の修正は当然必要なのですが、デザインが崩れた記事が公開されてしまうのが嫌ですよね。

それを確実に避ける方法があります。

それは、テスト環境を作って、そこでテーマ変更などのデザイン崩れを修正する方法です。

テスト環境とは、

作成したサイトが正常に動くかどうか確認するために、普段のサイトと同じ環境を作って、そこで動作確認、デザイン変更などを行うためのサイトです。

テスト環境

この記事では、サブドメインを作り、そこにテスト環境を用意する方法を紹介します。

サブドメインとは
このブログのURLは、「takuzonoblog.org」です。
これを「△△△.takuzonoblog.org」と、ドメインを区分けしたものです。
1つのドメインを用途によって分けたいときに使います。

サブドメインを使ってテスト環境を作るメリットは以下です。

  • プラグインなどの動作環境を同じにできる
  • 好き勝手に編集しても他の人に見られない
この記事で分かること
  • サブドメインを作る方法
  • サブドメインを使ってテスト環境を作る方法
もくじ

テスト環境を作る目的

テスト環境では、他の人に見られたくない作業をすることができます。

僕は、これまでテーマを2回変えました。

またサイトトップページのデザインも大きく変更しました。

その都度デザインが崩れてしまいます。

短い時間で作業が終わるならいいですが、それなりに時間がかかります。

その間に記事を読みに来てくれた人は、デザインが崩れた状態の記事を読むことになります。

せっかくサイトを訪問してくれたのに、チャンスを逃してしまいます。

そうならないよう、テスト環境でサイトを整えてから、本番環境にコピーすることで、デザインが崩れた状態のサイトを見られないですみます。

たくぞー

それぞれについて詳しく説明していきます。

エックスサーバーのサブドメイン作成方法

STEP
エックスサーバーにログインし、サーバー管理を開く
サブドメイン設定

エックスサーバーにログインして、「サーバー管理」→「サブドメイン設定」の順にクリックします。

STEP
サブドメインを作りたいドメイン名を選択
ドメインを選択

サブドメインを作りたいドメイン名の「選択する」をクリックします。

STEP
「サブドメイン設定追加」をクリックし、サブドメイン名を入力
サブドメイン名を入力

「サブドメイン設定追加」のタブをクリックし、サブドメイン名を入力します。

テスト環境用だったら「test」など分かりやすい名前にしておくといいと思います。

入力したら「追加する」をクリックして、サブドメインの作成が完了です。

サブドメインにWordPressをインストール

サブドメインの作成が終わったら、WordPressをインストールします。

STEP
WordPress簡単インストールをクリック

サーバー管理画面に戻って、「WordPress簡単インストール」をクリックします。

STEP
ワードプレスをインストールするドメインを選択
WordPressをインストールしたいドメイン名を選択

さきほどサブドメインを作ったドメインの「選択する」をクリックします。

ここではサブドメイン名ではなく、ドメイン名しか表示されないです。

STEP
ドメイン名、ブログ名などを入力し「確認画面へ進む」をクリック
WordPressをインストールするドメイン、サイト名などを入力

サイトURLで先ほど作成したサブドメインを選択します。

「ブログ名」、「ユーザー名」、「パスワード」、「メールアドレス」を入力し、画面下の「確認画面へ進む」をクリックします。

STEP
確認画面が表示され「インストールする」をクリック

確認画面が表示されるので、右下の「インストールする」をクリックします。

サブドメインにアクセス制限をかける

本番環境(ドメイン)とテスト環境(サブドメイン)の内容が一緒だと、Googleに重複した記事と見なされ、SEOの評価が下がってしまいます。

そうならないよう、テスト環境(サブドメイン)にアクセス制限をかけておく必要があります。

STEP
サーバー管理画面から「アクセス制限」をクリック
アクセス制限をクリック

サーバー管理画面の「アクセス制限」をクリックします。

STEP
ドメインを選択し、フォルダ画面が表示されたら「ユーザー設定」をクリック
IDとパスワードを入力

「ユーザー設定」をクリックして、「ユーザーID」、「パスワード」を入力します。

STEP
アクセス制限をONにし、「設定する」をクリック
アクセス制限をON

「アクセス制限」をONにし、右下の「設定する」をクリックします。

これでサブドメインにアクセスしようとすると、さきほどのIDとパスワードを入力しないとアクセスできないようになっていると思います。

本番環境からテスト環境(サブドメイン)にコピーする

もう少しで終わります。

サブドメインの準備ができたので、本番環境からテスト環境にコピーします。

コピーするために、「All-in-One WP Migration」というプラグインを使います。

STEP
「All-in-One WP Migration」をインストール
All-in-One WP Migrationをインストール

ダッシュボードのプラグインから「 All-in-One WP Migration 」を新規追加し、有効化します。

無料版では512MBまでしかコピーすることができません。

容量が大きい場合は、有料ですが拡張プラグインが用意されています。

STEP
All-in-One WP Migration からファイルをエクスポート
ファイルのエクスポート

ダッシュボードに「 All-in-One WP Migration 」が表示されるので、クリックします。

「 All-in-One WP Migration 」を開いたら、エクスポート先の「ファイル」をクリックし、ファイルサイズが表示されます。

512MB以下なら、容量が表示されている緑の枠をクリックし、ファイルをダウンロードします。

STEP
テスト環境にも 「All-in-One WP Migration」 をインストール

サブドメインで作ったテスト環境にも同様に「All-in-One WP Migration」をインストールしてください。

STEP
「All-in-One WP Migration」 のインポートをクリック
「All-in-One WP Migration」 のインポートをクリック

テスト環境で、ダッシュボードの「All-in-One WP Migration」 の「インポート」をクリックします。

STEP
インポートするファイルを選択
インポート元のファイルを選択

インポート元のファイルをクリックし、さきほどエクスポートしたファイルを選んで読み込んでください。

STEP
コピー完了
コピー完了

これでコピーが完了しました。

再度テスト環境にアクセスすると、コピー元のブログそのままの状態になっていると思います。
※コピー後はコピー元のIDとパスワードになるので注意してください。

テスト環境での作業が終わったら、初期化しておきましょう

新しいテーマ変更など作業が終わったら、テスト環境は初期化しましょう。

アクセス制限をかけて重複したコンテンツにならないようにしていますが、念のため初期化しておくことをオススメします。

STEP
テスト環境にプラグイン「Advanced WordPress Reset」をインストール

Advanced WordPress Resetをインストール

テスト環境にプラグイン「Advanced WordPress Reset」をインストール して、有効化にします。

STEP
ツール→ Advanced WordPress Reset をクリック
Advanced WordPress Resetを表示

ツール→ Advanced WordPress Reset の順でクリックし、 Advanced WordPress Reset を呼び出します。

STEP
resetと入力して、「データベースをリセット」をクリック

resetと入力し、「データベースをリセット」をクリックすると、サーバーにあるデータが削除されます。

STEP
初期化完了
初期化

Hello world!が表示され、初期化されていることが確認できます。

※ログインIDとパスワードは、コピー元のままです。戻したい場合は、アクセス制限と同じ方法で再度設定する必要があります。

まとめ:テーマ移行時などテスト環境を上手く活用しよう

エックスサーバーでサブドメインを用意し、テスト環境を準備する方法について説明しました。

新しいテーマにするとデザインが崩れてしまい、それが読者に見えてしまうのが嫌だなぁっと感じていた方もいると思います。

この方法であれば、本番環境でのデザイン崩れがないのでオススメです。

もしテーマ変更など機会があったら、活用してみてください。

たくぞー
サルリーマン
ブログを始めようと思っている方、ブログを始めたばかりの方に向けて、ブログに関する情報を発信しています。
よかったらシェアしてね!
  • URL Copied!
  • URL Copied!
もくじ
閉じる