WordPressのローカル開発環境の作り方【Windows＆XAMPP編】
今回は、Wordpress（ワードプレス）のローカル開発環境をつくる方法について詳しく解説してゆきます。
▼この記事を書いたひと
フリーランスのみやしも（@miyashimo_eng）です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。
Wordpressのローカル開発環境を作るための全手順を解説する
今回は『Wordpress（ワードプレス）』を使用したWEBサイトの制作者や、ブログ・WEBメディアを運営をしている方に向けて、ローカル開発環境を作成する手順を解説してゆきます。
▼この記事はこんな方向け
- Wordpressのオリジナルテーマを制作したい
- Wordpressのテーマ・プラグインの動作検証を行いたい
- プログラミング学習のためにローカル開発環境を作りたい
自分のパソコン上でWordpressを動作させる方法として『ローカル開発環境』という言葉を知っていても、作り方がわからない・導入手順に心配があるという方は多いと思います。
そこで今回は、『XAMPP（ザンプ）』というソフトウェアを使用のもとに、ローカル開発環境の構築手順について、画像付きで詳しく解説してゆきます。
ローカル開発環境とは
『ローカル開発環境』とは自分のパソコン上でのみ動作するWEBサイトの仮想環境のことをいい、サーバーと同じ機能をパソコン上に再現する形で実現します。
対して実際のWEB上に公開されているサイトは『本番環境』とも呼ばれ、通常はレンタルサーバーなどを利用して構築されています。
ローカル開発環境・本番環境とでは、WEB上に公開されていない（ユーザーからアクセスが発生しない）点が大きく異なりますが、この上でもローカル開発環境を導入すると、次のようなメリットが得られることとなります。
▼ローカル開発環境のメリット
- サーバーがなくてもWEBサイトの制作を始める事ができる
- アップデートやプラグインの検証を本番環境に影響せずに行える
- インターネットに接続していなくても作業を進める事ができる
ローカル開発環境の導入のメリットとしては上記の様になります。
また、新規WEBサイトの制作においては『ローカル開発環境⇒本番環境』の順番に作業をしていくことが一般的な手法でもあり、作業者にとってローカル開発環境は、もはや導入必須とも言えるべき存在です。
XAMPPについて
PC上にローカル開発環境を作成する方法にはいくつか手段がありますが、今回は一般的に広く利用されている『XAMPP（ザンプ）』というソフトウェアを使用してゆきます。
XAMPPとは、WEBサイトの動作に必要なツールを一括してパソコン上に導入できる無料のソフトウェアのことをいい、ソフトウェアの名前の由来にもなっている次のツールが含まれています。
▼XAMPPに含まれているツール
- X：クロスプラットフォーム
- A：Apache（WEBサーバー）
- M：MySQL（データベース）
- P：PHP（プログラミング言語）
- P：Perl（プログラミング言語）
また今回は、Wordpressの動作環境に必要となるPHP・Apache・MySQLの３つのツールを使用してゆきます。
作業の流れについて
Wordpressのローカル開発環境を構築するために、今回は次のような手順で作業をすすめてゆきます。
▼今回の作業内容
- XAMPPをインストールする
- Wordpressをインストールする
前置きが長くなってしまいましたが、それではスタートします。
STEP1. XAMPPのインストール
まずはローカル開発環境用のソフトウェアであるXAMPPのインストールから行います。
インストーラーを取得する
公式サイトのダウンロードと書かれた所から、XAMPPのインストーラーをダウンロードします。
▼XAMPP公式サイト
※クリックすると別ウィンドウで開きます
またこの際には、自分のパソコンのOSの種類に合ったバージョンを選択する様にします。
- Windows：Windows向けXAMPP
- Linux：Linux向けXAMPP
- Mac：OS X 向けXAMPP
XAMPPをインストールする
続けてインストーラーを実行して、自分のパソコンにXAMPをインストールしてゆきます。
基本的にはインストーラーの手順にしたがって作業を進めてゆけば完了させることが出来ますが、詳しいインストールの手順や、基本的な使い方について知りたい方には、つぎの記事が参考になります。
インストールが完了したら、XAMPPのコントロールパネルを開きます。XAMPPのコントロールパネルは次の場所にあります。
XAMPPコントロールパネルを開いたら、続けて、ApacheとMySQLを起動させます。 （※それぞれの『Start』のボタンを押すとソフトを起動することができます）
以上でXAMPPのインストール作業と、コントロールパネルの準備は完了です。
STEP2. Wordpressのインストール
XAMPPのインストール作業が終わったら、今度はWordpressをインストールする作業を進めてゆきます。
Wordpressをダウンロードする
Wordpressをインストールするために、まずは『Wordpress（ワードプレス）』の本体ファイルを入手します。以下のサイトから『Wordpress日本語版』のファイルをダウンロードしましょう。
▼Wordpress日本語サイト
Wordpress日本語版のサイトを開く※クリックすると別ウィンドウで開きます
上記サイトを開いたら、トップページの『Wordpressをダウンロード』のボタンを押してファイルをダウンロードします。
ダウンロードしたzipファイルをPC上で解凍しましょう。すると次のようなWordpressのファイル一式が取得できます。 （※zipファイルを右クリックして「すべて展開」を選択すると解凍できます）
Wordpressを設置する
取得したWordpressのファイル一式をXAMPP内に設置してゆきます。
さきほどインストールしたXAMPPに含まれている『htdocs』というフォルダ配下に、解凍したWordpressのフォルダをまるごと移動させましょう。
フォルダを移動させた実際の様子は次のようになります。
また、設置したWordpressのフォルダのパスは、次の作業で使用するため控えておく様にしましょう。
WEBサーバーを設定する
設置したWordpressにブラウザからアクセスできる様にするために、WEBサーバーである『Apache』の設定ファイルを変更します。
Apacheの設定ファイルを変更するには、XAMPPコントロールパネルからConfigボタンを押して、『Apache(httpd.conf)』のメニューを選択します。
Apacheの設定ファイルを開いたら、ファイルの末尾に次の設定内容を追記します。
# wordpress
Listen 50000
<VirtualHost localhost:50000>
ServerName localhost:50000
DocumentRoot "C:\xampp\htdocs\wordpress"
<Directory "C:\xampp\htdocs\wordpress">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>追記した設定内容を端的に説明すると、『http://localhost:50000』という自分のパソコンでのみ使用できるURLを使用して、設置したWordpressにアクセスできる様にする、といった意味合いになります。
このほか、ポート番号の部分を50001、50002、50003といった風にずらしてゆけば、ローカル開発環境に複数のWordpressサイトを設置する事も可能となります。
ローカル開発環境に複数のサイトを設置する方法について詳しく知りたい方には、次の記事も参考になります。
Wordpressにアクセスする
Apacheの設定ファイルの追記と再起動が終わったら、この時点で一度、設置したWordpressにアクセスが出来るかを確認してみましょう。
PC上に設置したWordpressに対してアクセスするには、先ほどの設定ファイルにも追記した次のURLを使用します。
設定が上手くいっていると、WEBブラウザでは次のような画面にアクセスできます。
上記の画面は、XAMPP環境に設置したWordpressのインストール画面になります。
ただしこの時点では、Wordpressの画面にもある通り、つづけて作業する必要があることが分かります。
WordPress へようこそ。作業を始める前にデータベースに関するいくつかの情報が必要となります。以下の項目を準備してください。
データベース名
データベースのユーザー名
データベースのパスワード
データベースホスト
テーブル接頭辞 (1つのデータベースに複数の WordPress を作動させる場合)
なのでこの画面はひとまず置いて、今度はWordpressで使用するデータベースの作成を行います。
データベースを作成する
続けてWordpressで使用するためのデータベースを準備してゆきます。
MySQLのデータベースを作成するために、XAMPPコントロールパネルのMySQLの欄にある『Admin』ボタンを押します。
するとブラウザ上に『phpMyAdmin』と書かれた画面が表示されます。
多くはWEBサービス・システム開発におけるプログラミング作業の過程で使用されるツールですが、とはいえ今回のようなWordpressの利用において、難しい作業が発生することは基本的にはありません。
今回おこなうべきデータベース作成のための作業はつぎの通りになります。
▼データベースを作る3つの手順
- 画面左上にある『新規作成』のメニューを選択する
- データベース名のところに『wordpress』を、その右の選択肢で『utf8_general_ci』を選択する
- 『作成』ボタンを押してデータベースの作成を完了させる
上記の順番にしたがって作業を進めてゆきましょう。
以上の操作を行うと、MySQL上に新しいデータベースが作成され、phpMyAdminでは次のように確認ができます。
また、作成時点のデータベースは中に何も入っていない空の状態ですが、データベースに対するデータ挿入などの作業はすべてWordpressから自動的に行われる様になっています。よって、ここでのこれ以上の作業は必要ありません。
今回Wordpress用に作成したデータベースの情報をまとめると、次のような内容になります。
▼データベースの情報
| データベース名 |
wordpress |
|---|---|
| ユーザー名 |
root |
| パスワード |
※パスワードなし |
| ホスト名 |
localhost |
以上でデータベースの作成の作業は終わりになります。
インストール作業を完了させる
MySQLのデータベースの作成が終わったら、再び『Wordpressの画面(http://localhost:50000)』を開いて、残りの インストールの作業を進めてゆきます。
Wordpressの画面を開いたら『さあ、始めましょう！』のボタンを押して、次のページに進みます。
するとWordpressで使用するデータベースの情報を入力を行うページが開きますので、先ほど作成したデータベースの情報を入力してゆきます。
ここで控えておいたデータベースの情報を使います。画面に対して『データベース名』『ユーザー名』『パスワード』『データベースのホスト名』の情報を入力してゆきましょう。（※テーブル接頭辞はデフォルトの”wp_”のままでOKです）
以上の入力が終わったら『送信』をクリックして次に進みます。データベースの設定が正しく通ると次の画面に進みますので、続けて『インストール実行』ボタンを押します。
続く画面では、Wordpressで使うサイト名や管理画面にログインするためのユーザーの情報を作成します。
順番に『サイトのタイトル』『ユーザー名』『パスワード』『メールアドレス』を入力してゆきましょう。（※後から変える事も出来るので仮の内容でもOKです）
入力が終わったら、最後に『Wordpressをインストール』ボタンを押します。インストールが無事に終わったら次の画面に移動します。
続く画面で『ログイン』ボタンを押すと、Wordpressのログイン画面に移動できます。
最後に情報を入力して『ログイン』をクリックすると、Wordpressにログインできます。
Wordpressを利用したことがある方にとってはお馴染みとも思いますが、上記がWordpressの管理画面になります。
今回の作業目的のとおり、あくまでパソコン上に構築したWordpressのローカル開発環境ですので、インターネットを通して外部からアクセスすることは出来ません。
とはいえそれ以外の記事投稿、テーマ・プラグインの導入、各種カスタマイズといったWordpressの基本機能は、レンタルサーバーなどに設置したWordpressと同じように利用する事が可能です。
以降はローカル開発環境をWordpressにおける各種作業に役立てることが出来ます。
▼Wordpressローカル開発環境の活用例
- Wordpressオリジナルテーマの制作
- Wordpressの各種カスタマイズ作業
- アップデート・テーマ・プラグインの動作検証
この記事のまとめ
今回は、Wordpressのローカル開発環境を作成する方法について詳しく解説してゆきした。
Wordpressのローカル環境には、オリジナルテーマの制作やアップデート・プラグインの検証など、WEBサイトの制作者や運営者を問わず、さまざまな使い道があります。
このほか、サイトの改修や検証といったリスクを伴う作業を本番間環境から切り離すことができるため、安全なサイト運営が出来るという意味でも大きなメリットが生まれます。
ローカル環境をお持ちでない方は、今回の作業手順を参考にぜひ構築にトライしてみて頂ければと思います。
