究極の WordPress ローカル開発チートシート

公開: 2023-02-14

ページやドキュメントのページをめくることなく、ローカルの WordPress 開発環境をセットアップしたいですか? 私たちの WordPress ローカル開発チートシートは、すばやくスマートに立ち上げて実行するのに役立ちます!

この「綿密な」実践ガイドでは、WordPress のローカル開発とは何か、およびそれを使用することの主な利点のいくつかについて簡単に説明します。次に、ローカル環境をセットアップする方法、WordPress をローカルにインストールする方法について説明します。コンピューターに接続し、ウェブサイトを公開する前にテストします。

このガイドでは、次の内容について説明します。

  • WordPress ローカル開発とは?
  • WordPress ローカル開発の利点
  • ローカル開発環境のセットアップ
    • 必要なもの
    • ローカル サーバー ソフトウェアのインストール
    • 仮想ホストのセットアップ
    • ローカル WordPress インストール用のデータベースの作成
  • WordPress をローカルにインストールする
    • ローカルサーバーに WordPress をダウンロードしてインストールする
    • wp-config.php ファイルの構成
  • ライブ WordPress サイトをローカル環境にインポートする
    • ライブ サイトのデータベースのエクスポート
    • ライブ サイトのデータベースをローカル サーバーにインポートする
    • データベース内の URL の置換
    • ローカル環境へのライブ サイトのファイルのアップロード
  • ローカル WordPress サイトでの開発とテスト
    • 変更とテスト
    • デバッグ
    • さまざまなプラグインとテーマのテスト
  • ローカル WordPress サイトを Live Server にデプロイする
    • ローカル サイトのデータベースのエクスポート
    • データベースをライブサーバーにインポートする
    • ローカル サイトのファイルをライブ サーバーにアップロードする
    • データベース内の URL の更新
  • ローカル開発とウェブホスト ステージング環境
    • ローカル開発環境の長所
    • ローカル開発環境の短所
    • Webhost ステージング環境の長所
    • Webhost ステージング環境の短所

WordPress ローカル開発とは?

WordPress ローカル開発では、ライブ サイトに影響を与えることなく、コンピューター上で WordPress サイトを構築、作業、およびテストするための開発環境を作成できます。

ローカル開発環境は本番サーバーを複製するため、変更をライブ サイトにプッシュする前に、さまざまなシナリオをテストして問題を解決することができます。

ローカル開発のメリット

WordPress ローカル開発の主な利点には、次のようなものがあります。

  • 安全なテスト環境: ローカル開発環境は、ライブ サイトに影響を与えることなく、新しい機能、プラグイン、およびテーマをテストするための安全なスペースを提供します。
  • 速度、パフォーマンス、および効率: ローカル開発環境は、リモート サーバーよりも高速で応答性が高くなります。 これは、コンピューター上で実行されるため、コンピューターはサーバーよりもはるかに高速にデータにアクセスして処理でき、コンピューターとサーバー間の通信に遅延が発生しないためです。
  • 費用対効果: ローカル開発環境をセットアップすると、高価なホスティング サービスが不要になり、ライブ サイトへの変更の展開に関連するコストが削減されます。 始めるのに必要なのは、コンピューターとテキスト エディターだけです。
  • コラボレーションの改善: 複数の開発者が、互いの作業に干渉することなく、1 つのプロジェクトで同時に作業できます。
  • オフライン開発: ローカル開発環境により、オフラインでもサイトを開発できます。
  • セキュリティの向上: 取り組みたい「極秘」プロジェクトがありますか? ローカル開発環境はマシン上で実行されるため、リモート サーバーよりも安全であり、詮索好きな目から離れてサイトを構築して作業することができます。 不正アクセスやハッキングのリスクはありません。

WordPress 開発者として始めたばかりの場合は、WordPress ローカル開発の紹介記事を参照してください。 すでにもう少し経験がある場合は、ローカル環境で WordPress 開発ワークフローを改善する方法に関する記事をご覧ください。

ローカル開発環境の設定

ローカルの WordPress 開発環境をセットアップする前に、いくつか必要なものがあります。

必要なもの

開発作業をサポートするのに十分なストレージ容量と処理能力を備えたコンピューターに加えて、ローカル開発環境をセットアップするために必要なものは次のとおりです。

ローカル サーバー ソフトウェア

ローカル開発環境を実行するには、ローカル サーバー ソフトウェアをインストールする必要があります。

XAMPP、MAMP、および WAMP は、3 つの一般的なオプションです。 これらのローカル サーバー ソフトウェア パッケージはそれぞれ、必要なすべてのコンポーネント (Apache Web サーバー、MySQL データベース、PHP スクリプト言語など)、これらのコンポーネントを管理するためのコントロール パネル、および Web 開発者向けの完全な開発環境を提供します。データベースを管理するためのツール。

ただし、各ソフトウェア パッケージには、重要な違いを伴う独自の機能もあるため、特定のニーズを満たすものを選択することが重要です。

それぞれについて簡単に見てみましょう。

XAMPP

XAMPP
XAMPP

XAMPP は、Web 開発者にローカル開発環境を提供する、無料でオープンソースでインストールが簡単な Web サーバー ソフトウェアです。 これは、XAMPP の 4 つの主要コンポーネントである Apache、MariaDB、PHP、および Perl の略です。

XAMPP のいくつかの重要な機能 (および長所):

  • Apache Web サーバー、MariaDB データベース、PHP および Perl スクリプト言語が含まれます。
  • Windows、Mac、Linux など、複数のオペレーティング システムをサポートします。
  • Web サーバーとデータベース コンポーネントを管理するための使いやすいコントロール パネル。
  • データベース管理用の phpMyAdmin などの追加コンポーネントをインストールするオプション。

短所：

  • MAMP や WAMP ほど人気が​​ないため、コミュニティのサポートはそれほど強力ではない可能性があります。
  • MAMP や WAMP に比べてセットアップが複雑で、コンポーネントのインストールと構成にはより多くの技術的知識が必要です。

XAMPP は、複数のコンポーネントを備えた完全な開発環境を必要とし、これらのコンポーネントの構成と管理に精通している Web 開発者に最適です。 また、複数のオペレーティング システムで作業し、クロスプラットフォーム ソリューションを必要とする開発者にも最適です。

MAMP

MAMP
MAMP

MAMP は、Web 開発者に開発環境を提供するローカル サーバー ソフトウェアです。 これは、MAMP の 4 つの主要コンポーネントである Macintosh、Apache、MySQL、および PHP の略です。

MAMP のいくつかの重要な機能 (および長所):

  • Apache Web サーバー、MySQL データベース、および PHP スクリプト言語が含まれています。
  • macOS オペレーティング システムでサポートされていますが、Windows ベースの OS でも使用できます。
  • Web サーバーとデータベース コンポーネントを管理するための使いやすいコントロール パネル。
  • データベース管理用の phpMyAdmin などの追加コンポーネントをインストールするオプション。

短所：

  • PHP スクリプト言語のみを使用できます。
  • XAMPP と比較してコンポーネントが少ないため、一部の開発者のニーズが制限される可能性があります。

MAMP は、macOS オペレーティング システムで作業する Web 開発者に最適です。

このオプションの使用に関する詳細については、MAMP を使用して WordPress をローカルで開発する方法に関するチュートリアルをご覧ください。

ワンプサーバー

ワンプサーバー
ワンプサーバー

WAMP は、Web 開発者に開発環境を提供するローカル サーバー ソフトウェアです。 これは、WAMP の 4 つの主要コンポーネントである Windows、Apache、MySQL、および PHP の略です。

WAMP のいくつかの重要な機能 (および長所):

  • Apache Web サーバー、MySQL データベース、および PHP スクリプト言語が含まれています。
  • Windows オペレーティング システムをサポートします。
  • Web サーバーとデータベース コンポーネントを管理するための使いやすいコントロール パネル。
  • データベース管理用の phpMyAdmin などの追加コンポーネントをインストールするオプション。

短所：

  • Windows のみをサポートしているため、macOS または Linux を使用している開発者は他の場所を探す必要がある場合があります。
  • XAMPP と比較してコンポーネントが少ないため、一部の開発者のニーズが制限される可能性があります。

WAMP は、Windows オペレーティング システムで作業し、基本的なコンポーネントを備えた完全な開発環境を必要とする Web 開発者に最適です。

このオプションの詳細については、WAMP を使用して WordPress をローカルで開発する方法に関するチュートリアルをご覧ください。

XAMPP、MAMP、および WAMP はすべて、ローカル開発環境を探している Web 開発者にとって優れた選択肢ですが、Local by Flywheel、DesktopServer、および (複数のマシンでローカルに WordPress で作業する必要がある場合) など、他のオプションも利用できます。 USB から WordPress をインストールして実行することもできます。

テキストエディタ

必要なもう 1 つのコンポーネントは、PHP などのプログラミング言語で作業するために特別に設計された WordPress 開発用のテキスト エディターです。 コードを編集して Web サイトに変更を加えるには、テキスト エディターが不可欠です。

テキスト エディターの一般的なオプションをいくつか見てみましょう。

崇高なテキスト

崇高なテキスト
崇高なテキスト

Sublime Text は、開発者がコーディングやスクリプト作成の目的で広く使用している人気のあるテキスト エディターです。 すっきりとした高速で直感的なインターフェイスを提供し、大規模なコードベースでの作業を容易にします。

Sublime Text の主な機能:

  • 80 を超えるプログラミング言語の構文強調表示とコード補完
  • カスタマイズ可能な配色、キー バインド、およびマクロ
  • 複数選択、分割編集、列編集などの高度な検索および編集ツール
  • プロジェクト固有の設定システムを使用してプロジェクトを即座に切り替える

Sublime Text は、HTML、CSS、および JavaScript でコードを記述する必要があるプロジェクトに取り組む開発者にとって優れたツールです。 使いやすい構文の強調表示、コード補完、およびコーディング プロセスを迅速かつ効率的にする編集ツールを提供します。

ビジュアル スタジオ コード

ビジュアル スタジオ コード
ビジュアル スタジオ コード

Visual Studio Code は、Microsoft が開発した無料のオープン ソース コード エディターです。 開発者が大規模なプロジェクトを作成および管理するのに役立つさまざまな機能とツールを提供します。

Visual Studio Code の主な機能:

  • IntelliSense、スマートで高度なコード補完およびデバッグ ツール
  • 組み込みの Git サポートとデバッグ
  • 複数のプログラミング言語をサポートし、拡張機能の大規模なライブラリを備えています
  • カスタマイズ可能なインターフェースとワークスペース

その他のテキスト エディターについては、WordPress 開発に最適なテキスト エディターのリストを参照してください。

上記のすべての要件にチェックを入れましたか?

パソコンが必要なスペックを満たしている
選択したローカル サーバー ソフトウェア
選択したテキスト エディタ

素晴らしい！ それでは、次のステップに進みましょう…

ローカル サーバー ソフトウェアのインストール

この例では、XAMPP を Windows オペレーティング システムにインストールします。 以下で説明するのと同じプロセスを使用して、選択したローカル サーバー ソフトウェアをコンピューターにインストールし、ソフトウェア パッケージの特定の指示に従います。

  1. XAMPP のダウンロード: XAMPP の公式 Web サイトにアクセスし、Windows 用の最新バージョンの XAMPP をダウンロードします。
  2. XAMPP のインストール: ダウンロードしたファイルをダブルクリックして、インストール プロセスを開始します。 ダウンロードしたインストーラー ファイルを実行し、画面の指示に従って XAMPP をインストールします。 デフォルトでは、XAMPP はC:\xamppディレクトリにインストールされます。
  3. XAMPP の開始: インストール後、[スタート] メニューまたはデスクトップ ショートカットから XAMPP コントロール パネルを開きます。 各モジュールの横にある「開始」ボタンをクリックして、Apache および MySQL モジュールを開始します。
  4. インストールの確認: XAMPP が正しく動作していることを確認するには、Web ブラウザーを開いてhttp://localhostに移動します。 これにより、XAMPP ウェルカム ページが表示されます。
  5. 仮想ホストの作成: 仮想ホストを作成するには、以下の手順に従ってください。

XAMPP をマシンにインストールして構成する必要があります。 ローカルで Web サイトの開発とテストを開始する準備が整いました。

注: XAMPP または MAMP や WAMP などの他のローカル サーバー ソフトウェアをインストールするプロセスは、使用しているオペレーティング システムによって若干異なる場合があります。 Mac および Linux オペレーティング システムの場合は、XAMPP Web サイトにあるインストール手順に従ってください。

XAMPP のセットアップ、XAMPP のアップグレード、XAMPP のトラブルシューティング、および XAMPP ローカルホストから Web への WordPress の移行に関する追加情報については、XAMPP 関連の他のチュートリアルを参照してください。

仮想ホストのセットアップ

ローカル開発環境で仮想ホストを設定すると、開発者はローカル マシン上で複数の Web サイトを実行でき、それぞれに固有の URL があります。 これにより、より現実的なテスト環境が提供され、異なるプロジェクト間の切り替えが容易になります。

以下のステップバイステップ ガイドでは、ローカル開発環境で仮想ホストをセットアップし、Web サイトのテストを開始します。

1. Apache 構成ファイルを開きます: ローカル サーバー ソフトウェアの構成ファイルを開きます。 この例では、XAMPP を使用しているため、通常は/etc/httpd/conf/httpd.confまたはC:\xampp\apache\conf\httpd.confにある Apache 構成ファイルを開きます。

2.仮想ホスティングを有効にします。「# Virtual Hosts」というラベルの付いたセクションを見つけ、次の行の先頭にあるハッシュ記号 (#) を削除してコメントを外します。 #Include conf/extra/httpd-vhosts.conf .

3.仮想ホストを構成します。通常は/etc/httpd/conf/extra/httpd-vhosts.confまたはC:\xampp\apache\conf\extra\httpd-vhosts.confにある仮想ホスト構成ファイルを開きます。

4.新しい仮想ホストの追加: 次の形式で新しいコード ブロックを作成して、新しい仮想ホストを追加します。 

ServerName example.local
DocumentRoot "/path/to/document/root"
<Directory "/path/to/document/root">
AllowOverride All
Require all granted

これを行う：

  • 「example.local」を仮想ホストの目的の URL に置き換えます。
  • 「/path/to/document/root」を、仮想ホストのドキュメント ルート ディレクトリへのフル パスに置き換えます。

5. hosts ファイルを更新します。hosts ファイルは、ドメイン名を IP アドレスにマップします。 指定した URL 経由で仮想ホストにアクセスできるようにするには、hosts ファイルにエントリを追加する必要があります。 通常、hosts ファイル/etc/hosts or C:\Windows\System32\drivers\etc\hostsにあります。 次の形式で新しい行を追加します: 127.0.0.1 example.local 。 「example.local」を、仮想ホスト構成で指定された URL に置き換えます。 変更を構成ファイルに保存します。

6. Apache の再起動: Apache ローカル Web サーバーを再起動して、変更を適用します。

7.仮想ホストのテスト: Web ブラウザーで URL にアクセスして、仮想ホストをテストします。 ブラウザには、仮想ホストのドキュメント ルート ディレクトリの内容が表示されます。

ローカル WordPress インストール用のデータベースの作成

WordPress プロジェクトをローカルでセットアップする前の次のステップは、ローカル開発環境用のデータベースを作成することです。

次の手順に従って、XAMPP でデータベースを作成します。

1. XAMPP コントロール パネルを開く: [スタート] メニューまたはデスクトップ ショートカットから XAMPP コントロール パネルを開きます。 Apache および MySQL モジュールが実行されていることを確認します。

2. phpMyAdmin へのアクセス: phpMyAdmin にアクセスするには、Web ブラウザーを開いてhttp://localhost/phpmyadminに移動します。 これにより、ブラウザで phpMyAdmin インターフェイスが開きます。

3.新しいデータベースの作成: phpMyAdmin インターフェイスで、[データベース] タブをクリックします。 「データベースの作成」セクションで、新しいデータベースの名前を入力し、「utf8mb4_general_ci」照合を選択します。 次に、「作成」ボタンをクリックします。

4.新しいユーザーの作成: データベースの新しいユーザーを作成するには、[ユーザー] タブをクリックし、[ユーザーの追加] ボタンをクリックします。 「ユーザーの追加」フォームで、新しいユーザーのユーザー名とパスワードを入力し、ホストとして「ローカル」を選択します。 「データベースに対するすべての権限を付与する」チェックボックスをオンにして、ユーザーにすべての権限を付与してください。 最後に、「Go」ボタンをクリックします。

5.詳細の保存: データベース名、ユーザー名、およびパスワードを書き留めるか、保存します。 これらは、後でデータベースを WordPress に接続するために必要になります。

上記の手順を完了すると、ローカル WordPress インストールおよびローカル開発環境用のデータベースが正常に作成されます。

WordPress サイトをローカルで開発およびテストする際に、このデータベースを使用してデータを保存および管理できるようになりました。

上記の手順をすべて完了しましたか?

インストールされたローカル サーバー ソフトウェア
仮想ホストのセットアップ
データベースを作成しました

素晴らしい！ それでは、次のステップに進みましょう…

WordPress をローカルにインストールする

ローカル環境の準備ができたので、次のステップは、WordPress をダウンロード、インストール、構成することです。

ローカルサーバーに WordPress をダウンロードしてインストールする

このプロセスを完了するには、次の手順に従います。

  1. WordPress の Web サイトにアクセスする: WordPress.org の公式 Web サイトにアクセスし、[WordPress をダウンロード] ボタンをクリックして、WordPress の最新バージョンをダウンロードします。
  2. アーカイブを解凍します。WordPress のダウンロードは、圧縮された ZIP ファイルになります。 アーカイブの内容をコンピューターのディレクトリに抽出します。
  3. 抽出したファイルをローカル サーバーに移動する: 抽出したディレクトリの内容をローカル サーバーのルート ディレクトリに移動します。 たとえば、XAMPP を使用している場合、これは通常、Windows ではC:\xampp\htdocs 、macOS では/Applications/XAMPP/htdocsです。
  4. データベースの作成: (注: この手順に従っている場合は、この手順は既に完了している必要があります。) WordPress をインストールする前に、データベースを作成する必要があります。 これは、XAMPP や MAMP などのほとんどのローカル サーバー ソフトウェアに含まれている phpMyAdmin などのツールを使用して行うことができます。
  5. インストールの開始: Web ブラウザーを開き、 http://localhost/wordpress (またはローカル サーバーの同等の URL) に移動します。 これにより、WordPress のインストール プロセスが開始されます。
  6. 言語の選択: 最初の画面で、希望する言語を選択し、[続行] ボタンをクリックします。
  7. データベース情報の入力: 次の画面で、手順 4 で作成したデータベース情報を入力します。これには、データベース名、データベース ユーザー名、およびデータベース パスワードが含まれます。
  8. サイト情報の入力: 次の画面で、ローカルの WordPress サイトの情報を入力します。 これには、サイトのタイトル、ユーザー名、パスワード、電子メール アドレスが含まれます。
  9. インストールの実行: すべての情報を入力したら、[WordPress のインストール] ボタンをクリックしてインストールを実行します。
  10. サイトへのログイン: インストールが完了したら、手順 8 で作成したユーザー名とパスワードを使用してローカル WordPress サイトにログインし、ローカル サイトのカスタマイズと開発を開始します。

これで、WordPress のダウンロードとインストールが完了しました。

サイトをライブ サーバーにデプロイする前に、ローカル開発環境のすべての利点を利用して、サイトのカスタマイズと開発をローカルで開始できるようになりました。

wp-config.php ファイルの構成

wp-config.phpファイルは、ローカル WordPress インストールおよびローカル開発環境のセットアップにおいて重要なコンポーネントです。 このファイルには、WordPress がデータベースやその他の重要な設定と対話する方法を制御する構成設定が含まれています。

上記のインストール手順に従った場合、データベース資格情報が自動的にwp-config.phpファイルに追加されます。

何らかの理由でwp-config.phpファイルを手動で構成する必要がある場合は、以下の手順に従ってください。

1. wp-config.phpファイルを作成します: ローカルの WordPress インストールにwp-config.phpファイルがまだない場合は、 wp-config-sample.phpファイルをコピーして名前をwp-config.phpに変更することで作成できます。 wp-config.php 。

2.データベース資格情報の更新: wp-config.phpファイルを開き、次の行を適切な情報で更新します。 

define( 'DB_NAME', 'database_name' );
define( 'DB_USER', 'database_user' );
define( 'DB_PASSWORD', 'database_password' );
define( 'DB_HOST', 'localhost' );

database_name 、 database_user 、およびdatabase_password 、前の手順でデータベースとユーザーを作成したときに使用した値に置き換えます。

3. WordPress セキュリティ キーを設定する: WordPress セキュリティ キーは、Cookie に保存されている情報を暗号化することで、サイトのセキュリティをさらに強化します。 WordPress の公式サイトで一連のセキュリティ キーを生成できます。 生成されたキーをコピーしてwp-config.phpファイルに貼り付け、既存のプレースホルダー キーを置き換えます。

4.デバッグを有効にする: ローカル開発では、WordPress でデバッグを有効にすると便利です。 これにより、サイトの問題のトラブルシューティングに役立つ、より詳細なエラー メッセージと警告が提供されます。 デバッグを有効にするには、次の行を wp-config.php ファイルに追加します。

define( 'WP_DEBUG', true );

5.変更を保存します。 wp-config.phpファイルに変更を加えたら、ファイルを保存して閉じます。

wp-config.phpファイルを正常に構成すると、ローカルにインストールされた WordPress サイトがデータベースに接続でき、安全であり、サイトをローカルで開発およびテストするときに役立つデバッグ情報が提供されます。

ライブ WordPress サイトをローカル環境にインポートする

ライブ WordPress サイトをローカル環境にインポートする必要がある場合は、以下の手順に従ってください。

ライブ サイトのデータベースのエクスポート

ライブ サイトのデータベースをエクスポートするには、ライブ サイトのサーバーにアクセスできる必要があります。

ライブ サイトのデータベースをエクスポートする手順は次のとおりです (注: サーバー環境によって実行方法は異なりますが、ほとんどの場合は同様のプロセスに従う必要があります)。

  1. ライブ サーバーのコントロール パネルにログインします。
  2. データベースへのアクセス: 最初のステップは、ライブ サイトのデータベースにアクセスすることです。 phpMyAdmin などのツールを使用してこれを行うことができます。これは、多くの場合、Web ホスティング プロバイダーによって提供されます。 「データベース」というセクションを探し、「phpMyAdmin」をクリックします。
  3. データベースの選択: phpMyAdmin にログインしたら、左側のパネルからライブ サイトのデータベースを選択します。
  4. データベースのエクスポート: [エクスポート] ボタンをクリックして、エクスポート プロセスを開始します。
  5. エクスポート形式の選択: エクスポート画面で、[クイック] エクスポート方法を選択し、[SQL] 形式を選択して、[構造] オプションと [データ] オプションが選択されていることを確認します。
  6. エクスポート ファイルのダウンロード: [実行] ボタンをクリックして、エクスポート ファイルをコンピュータにダウンロードします。

ローカル サーバーへのデータベースのインポート

ライブ サイトのデータベースをローカル サーバーにインポートするには、選択したローカル サーバー ソフトウェアが既にコンピューターにインストールされていることを確認してください。

ライブ サイトのデータベースをローカル サーバーにインポートする手順は次のとおりです。

  1. ローカル サーバー ソフトウェアで phpMyAdmin を開きます: ローカル サーバーの phpMyAdmin にログインし、ローカルの WordPress インストール用に作成したデータベースを選択します。
  2. データベースのインポート: [インポート] ボタンをクリックして、ダウンロードしたエクスポート ファイルからデータをインポートします。
  3. インポート ファイルの選択: インポート画面で [ファイルの選択] ボタンをクリックし、ダウンロードしたエクスポート ファイルを選択し、[実行] ボタンをクリックしてインポート プロセスを開始します。

データベース内の URL の置換

ライブ サイトのデータベースをインポートしたら、ローカルの開発環境に合わせてデータベースの URL を置き換える必要があります。

データベース内の URL を置き換える手順は次のとおりです。

1. ローカル サーバー ソフトウェアで phpMyAdmin を開きます。
2. 左側のパネルからインポートしたデータベースを選択します。
3. 「SQL」タブをクリックします。
4. テキスト領域に次のクエリを入力します。 

UPDATE wp_options SET option_value = replace(option_value, 'http://www.livesite.com', 'http://local.livesite.com') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.livesite.com','http://local.livesite.com');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.livesite.com', 'http://local.livesite.com');

5. 「http://www.livesite.com」をライブ サイトの URL に置き換え、「http://local.livesite.com」をローカル開発環境の URL に置き換えます。

6. [Go] ボタンをクリックしてクエリを実行します。

ローカル環境へのライブ サイトのファイルのアップロード

ライブ サイトのファイルをローカル環境にアップロードするには、ライブ サイトのサーバーへの FTP アクセスが必要です。

以下の手順に従って、ライブ サイトのファイルをローカル環境にアップロードします。

  1. FileZilla などの FTP クライアントを使用して、ライブ サイトのサーバーに接続します。
  2. サーバー上のライブ サイトのルート ディレクトリに移動します。
  3. すべてのファイルをローカル コンピューターにダウンロードします。
  4. ダウンロードしたファイルをローカル開発環境のルート ディレクトリに置きます。通常、このルート ディレクトリは、XAMPP またはその他のローカル サーバー ソフトウェアの「htdocs」または「www」フォルダーにあります。

ノート：

  1. すでに WordPress をインストールしている場合、上記のフォルダーは空にならず、既存のファイルとディレクトリを置き換えるように求められます。そのためwp-config.phpファイルを除くすべてのファイルを置き換えて、接続されているものを含め、同じ構成を維持します。ライブ サイトのデータが取り込まれたデータベース。
  2. ライブ サイトのファイルをローカル環境にアップロードする前に、ファイルのアクセス許可を変更して、ローカル サーバー ソフトウェアがファイルを書き込めるようにする必要がある場合があります。
  3. また、変更を加える前に、必ずローカルの WordPress バックアップをテストしてください。

それでおしまい！ これで、ライブ サイトをローカルの WordPress インストールおよびローカル開発環境に正常にインポートできました。

ローカル WordPress サイトでの開発とテスト

これで、実際のサイトと同じデータを使用してローカルでサイトを開発およびテストする準備が整いました。これにより、テストと開発のための現実に近い環境が得られます。

プロセスを見てみましょう：

変更とテスト

  1. ローカルの WordPress サイトにログインする: Web ブラウザーでローカルの WordPress サイトを開き、管理者の資格情報を使用して WordPress ダッシュボードにログインします。
  2. サイトに変更を加える:テーマ、プラグイン、またはカスタム コードを編集して、ローカルの WordPress サイトに変更を加えることができます。 WordPress ダッシュボードからこれらの要素にアクセスするだけです。
  3. 変更をテストする:ローカルの WordPress サイトに変更を加えた後、変更をテストして、期待どおりに機能することを確認することが重要です。 サイトのフロントエンドにアクセスし、変更が有効になっていることを確認することで、変更をテストできます。

デバッグ

  1. デバッグモードを使用する: WordPress には組み込みのデバッグモードがあり、サイトの問題を簡単に特定して解決できます。 デバッグモードを有効にするには、次のコードを wp-config.php ファイルに追加する必要があります: define( 'WP_DEBUG', true ); .
  2. エラー ログを確認する:ローカルの WordPress サイトで問題が発生している場合は、エラー ログを確認して、問題の特定に役立つエラー メッセージや警告メッセージがないかどうかを確認できます。 エラー ログは、wp-content ディレクトリにある WordPress デバッグ ログ ファイルにあります。
  3. デバッグ ツールを使用する: WordPress には、サイトの問題を特定して解決するのに役立つデバッグ ツールとプラグインが多数用意されています。 たとえば、Query Monitor プラグインは、データベース クエリ、プラグインの使用状況などに関する詳細情報を提供します。 WordPress のデバッグのヘルプについては、このチュートリアルを参照してください: WordPress のデバッグ: WP_Debug の使用方法

さまざまなプラグインとテーマのテスト

ローカルの WordPress サイトでのプラグインとテーマのインストール、アクティブ化、およびテストは、他の通常の WordPress サイトとまったく同じように機能します。 そのため、テスト モードで次の操作を行ってください。

  1. プラグインのインストール: ローカルの WordPress サイトにプラグインをインストールして、新しい機能をサイトに追加します。 プラグインをインストールするには、WordPress ダッシュボードにログインし、[プラグイン] セクションに移動して、[新規追加] ボタンをクリックします。
  2. プラグインを有効にする: インストール後にテストしているプラ​​グインを有効にして、サイトで使用します。 プラグインを有効にするには、WordPress ダッシュボードの [プラグイン] セクションに移動し、使用するプラグインの横にある [有効にする] ボタンをクリックします。
  3. プラグインのテスト: プラグインを有効にした後、プラグインをテストして、期待どおりに動作していることを確認することが重要です。 サイトのフロントエンドにアクセスし、プラグインが有効になっていることを確認して、プラグインをテストします。
  4. テーマのインストール: ローカルの WordPress サイトにテーマをインストールして、サイトの外観を変更します。 テーマをインストールするには、WordPress ダッシュボードにログインし、[外観] セクションに移動して、[テーマ] ボタンをクリックします。
  5. テーマを有効にする: インストール後にテーマを有効にして、サイトの外観を変更します。 テーマをアクティブ化するには、WordPress ダッシュボードの [外観] セクションに移動し、使用するテーマの横にある [アクティブ化] ボタンをクリックします。
  6. テーマのテスト: テーマをアクティブ化したら、テーマをテストして、期待どおりに動作することを確認することが重要です。 サイトのフロントエンドにアクセスし、テーマが有効になっていることを確認して、テーマをテストします。

必要なすべての変更を行い、問題をデバッグし、ローカル サイトでさまざまなプラグインとテーマをテストしましたか?

素晴らしい！ これで、ローカルの WordPress サイトを公開する準備が整いました。

ローカル WordPress サイトを Live Server にデプロイする

このプロセスの最後のステップは、すべてのローカル WordPress ファイルとデータベースをライブ ホスティング環境にエクスポートし、サイトのすべての変更、構成、および URL がライブ サイトで機能していることを確認することです。

ローカル サイトのデータベースのエクスポート

以下の手順に従って、ローカルの WordPress サイトをライブ サーバーにエクスポートします。

  1. PHPMyAdmin を使用して、ローカル サイトのデータベースにログインします。
  2. エクスポートするデータベースを選択します。
  3. 「エクスポート」タブに移動します。
  4. 「クイック」エクスポート方法を選択します。
  5. 「SQL」形式を選択します。
  6. [Go] をクリックして、SQL ファイルをコンピュータにダウンロードします。

データベースをライブサーバーにインポートする

以下の手順に従って、ローカルの WordPress データベースのエクスポート ファイルをライブ サイトにインポートします。

  1. PHPMyAdmin を使用してライブ サーバーのデータベースにログインします。
  2. ライブ サイト用の新しいデータベースを作成します。
  3. 新しいデータベースに移動し、[インポート] タブを選択します。
  4. ローカル サイトからエクスポートされた SQL ファイルを選択します。
  5. 「Go」をクリックしてデータベースをインポートします。

ローカル サイトからライブ サイトにデータベースを移行したので、サイトのファイルについても同じことを行いましょう。

ローカル サイトのファイルをライブ サーバーにアップロードする

以下の手順に従って、ローカルの WordPress サイトのファイルをライブ サイトにアップロードします。

  1. ファイルの準備:ローカル サイトのファイルをサーバーにアップロードする前に、ファイルを確認してクリーンアップすることをお勧めします。 これには、アップロードされるデータの量を最小限に抑えるために、バックアップやテスト ファイルなどの不要なファイルを削除することが含まれる場合があります。
  2. サーバーに接続する: FTP や SFTP など、さまざまな方法を使用してサーバーに接続できます。 サーバーに接続するには、FileZilla などのクライアント ソフトウェアを使用する必要があります。 接続するには、サーバー ホスト、ユーザー名、およびパスワードを指定する必要があります。
  3. ファイルのアップロード:サーバーに接続したら、ローカル サイトのファイルをサーバーにアップロードできます。 個々のファイルのアップロードやローカル サイト フォルダー全体のアップロードなど、さまざまな方法でファイルをアップロードできます。 サーバー上のライブ サイトのルート ディレクトリに移動します。 ローカル サイトのすべてのファイルをサーバー上のライブ サイトのディレクトリにアップロードし、プロンプトが表示されたら既存のファイルを置き換えます。
  4. データベース情報の更新:ファイルをサーバーにアップロードした後、 wp-config.phpファイルのデータベース情報を更新して、ライブ サイトのデータベース情報を反映する必要があります。 wp-config.phpファイルをテキスト エディターで開き、データベース名、ユーザー名、およびパスワードをライブ データベースと一致するように更新します。
  5. データベース内の URL を更新する:以下のセクションを参照してください。
  6. サイトをテストする:ローカル サイトのファイルをサーバーにアップロードしたら、サイトをテストして、すべてが正しく機能していることを確認することをお勧めします。 これには、サイトの機能、リンク、および画像をテストして、期待どおりに機能していることを確認することが含まれる場合があります。

データベース内の URL の更新

テキスト エディターを使用するか、データベースで直接作業することにより、データベース内の URL を更新できます (変更を行う前に、データベースが完全にバックアップされていることを確認してください)。

テキスト エディタを使用した URL の更新

以下の手順に従って、テキスト エディターを使用してデータベース内の URL を更新します。

  1. データベースのエクスポート:データベース内の URL を更新する前に、データベースをエクスポートする必要があります。 データベース管理ツール (phpMyAdmin など) を使用します。
  2. URL の検索と置換: データベースをエクスポートしたら、データベース内の URL を検索して置換する必要があります。 これは、Sublime や Visual Studio Code などのテキスト エディターを使用して行うことができます。 URL を検索して置換し、シリアル化されたデータ内の URL を含め、慎重かつ徹底的に URL を置換してください。
  3. データベースのインポート: データベースの URL を更新した後、データベースをローカルの開発環境にインポートする必要があります。 phpMyAdmin などのデータベース管理ツールを使用して、データベースをインポートできます。
  4. サイトをテストする: 更新されたデータベースをインポートした後、サイトをテストして、すべてが正しく機能していることを確認することをお勧めします。 これには、サイトの機能、リンク、および画像をテストして、期待どおりに機能していることを確認することが含まれる場合があります。

データベース内の URL の更新

以下の手順に従って、データベース内の URL を直接更新します。

1. PHPMyAdmin を使用してライブ サイトのデータベースにログインします。
2. ライブ サイトのデータベースを選択します。
3. 「SQL」タブに移動します。
4. 次の SQL クエリを実行して URL を更新します。 

UPDATE wp_options SET option_value = replace(option_value, 'http://old-url', 'http://new-url') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://old-url','http://new-url');
UPDATE wp_posts SET post_content = replace(post_content, 'http://old-url', 'http://new-url');

「old-url」をローカル サイトの URL に置き換え、「new-url」をライブ サイトの URL に置き換えます。

5. Click “Go” to run the query.
6. This will update all references to the local site's URL with the live site's URL in the database, ensuring that all links and images on the live site work correctly.

If you have followed the above steps correctly, the URLs in your database should have successfully updated. After these steps, your local WordPress site should now be fully functional on the live server. Make sure to thoroughly test the live site to ensure that all features are working correctly, and make any necessary adjustments to ensure a seamless transition from the local development environment to the live server.

Local Development vs Webhost Staging Environment

While WordPress local development provides a safe and efficient environment to build, edit, and test WordPress websites, you may decide to work in a webhost staging environment instead (here are some good reasons why you may not want to develop WordPress locally).

Both local development environments and webhost staging environments, however, have their pros and cons.

Here is a brief overview of the pros and cons of using a WordPress local development versus a webhost staging environment:

Pros of Local Development Environment

  • Easy to Use : Local development environments are easy to use, even for beginner developers.
  • Flexibility : You have complete control over your local development environment, so you can configure it however you like.
  • Test Any Changes : With a local development environment, you can test any changes you make to your site without affecting the live version.

Cons of Local Development Environment

  • Not a Live Environment : A local development environment is not a live environment, so you cannot test your site with live data.
  • Limited Resources : Your local machine may have limited resources, such as memory and processing power, which can affect your site's performance.
  • Not a True Representation : A local development environment may not accurately represent a live server environment, so testing may not be 100% accurate.

Pros of Webhost Staging Environment

  • Live Environment : A webhost staging environment is a live environment, so you can test your site with live data.
  • More Accurate Testing : A webhost staging environment is a more accurate representation of a live server environment, so testing is more reliable.
  • More Resources : A webhost staging environment typically has more resources available than a local development environment, so your site's performance will be better.

Cons of Webhost Staging Environment

  • Cost : Setting up a webhost staging environment can be expensive, as you have to pay for hosting and a domain name.
  • Not as Fast : A webhost staging environment is not as fast as a local development environment because it runs on a remote server.

For smaller projects, a local development environment is a great option because it is free and easy to use. For larger projects, however, a webhost staging environment may be a better option because it is a live environment and provides more accurate testing.

Ultimately, the choice between these two methods will depend on your individual needs, preferences, and hosting options.

Note: We recommend avoiding shared hosting, and hosting on our Quantum plan instead for basic WordPress sites, but if you have reasons for choosing shared hosting, then check out our article on how to run WordPress local development on shared hosting.

All WPMU DEV hosting plans (except for Quantum) include a staging environment. Refer to our staging documentation for more details on the benefits of using a staging environment to develop and test WordPress sites.

Do you use a local environment to build and test WordPress sites? Share your experiences and comments below!