Wordpressのローカル開発環境を作る方法【XAMPP】

みやしも ローカル開発環境

今回は、Wordpress(ワードプレス)のローカル開発環境をつくる方法について詳しく解説してゆきます。



▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

Wordpressのローカル開発環境を作るための全手順を解説する

今回は『Wordpress(ワードプレス)』を使用したWEBサイトの制作者や、ブログ・WEBメディアを運営をしている方に向けて、ローカル開発環境を作成する手順を解説してゆきます。



▼この記事はこんな方向け

  • Wordpressのオリジナルテーマを制作したい
  • Wordpressのテーマ・プラグインの動作検証を行いたい
  • プログラミング学習のためにローカル開発環境を作りたい



自分のパソコン上でWordpressを動作させる方法として『ローカル開発環境』という言葉を知っていても、作り方がわからない・導入手順に心配があるという方は多いと思います。



そこで今回は、『XAMPP(ザンプ)』というソフトウェアを使用のもとに、ローカル開発環境の構築手順について、画像付きで詳しく解説してゆきます。

2020年12月の最新バージョンに基づく解説内容となります。作業の開始から完了まで、およそ30分前後で完了させることが出来る内容です。

ローカル開発環境とは

『ローカル開発環境』とは自分のパソコン上でのみ動作するWEBサイトの仮想環境のことをいい、サーバーと同じ機能をパソコン上に再現する形で実現します。

パソコン上にローカル開発環境が構築出来れば、例えば自分専用のWordpressサイトを作れる様になったり、PHPやMySQLなどのプログラミング環境を得ることが出来ます。

対して実際のWEB上に公開されているサイトは『本番環境』とも呼ばれ、通常はレンタルサーバーなどを利用して構築されています。

ローカル環境の全体イメージ
ローカル開発環境・本番環境のイメージ図

ローカル開発環境・本番環境とでは、WEB上に公開されていない(ユーザーからアクセスが発生しない)点が大きく異なりますが、この上でもローカル開発環境を導入すると、次のようなメリットが得られることとなります。



▼ローカル開発環境のメリット

  • サーバーがなくてもWEBサイトの制作を始める事ができる
  • アップデートやプラグインの検証を本番環境に影響せずに行える
  • インターネットに接続していなくても作業を進める事ができる



ローカル開発環境の導入のメリットとしては上記の様になります。

とくに本番環境からリスクを伴う作業を切り離せるという意味では、安全にサイトを運用して行く上でも重要な役割があると言えます。

また、新規WEBサイトの制作においては『ローカル開発環境⇒本番環境』の順番に作業をしていくことが一般的な手法でもあり、作業者にとってローカル開発環境は、もはや導入必須とも言えるべき存在です。

この様にローカル開発環境には、エンジニアやWEBデザイナーといったサイト制作者のみならず、Wordpressを利用している全ての人にとって導入のメリットがあります。

XAMPPについて

PC上にローカル開発環境を作成する方法にはいくつか手段がありますが、今回は一般的に広く利用されている『XAMPP(ザンプ)』というソフトウェアを使用してゆきます。



XAMPPとは、WEBサイトの動作に必要なツールを一括してパソコン上に導入できる無料のソフトウェアのことをいい、ソフトウェアの名前の由来にもなっている次のツールが含まれています。



▼XAMPPに含まれているツール

  • X:クロスプラットフォーム
  • A:Apache(WEBサーバー)
  • M:MySQL(データベース)
  • P:PHP(プログラミング言語)
  • P:Perl(プログラミング言語)
上記の頭文字をとって『XAMPP』という名前になっています。

また今回は、Wordpressの動作環境に必要となるPHP・Apache・MySQLの3つのツールを使用してゆきます。

XAMPP利用イメージ
XAMPPの利用イメージ
作業に対して難しいイメージを持たれるかたも多いと思いますが、いずれもXAMPPの『コントロールパネル』というツールを利用してほとんどクリック操作で進めることができます。

作業の流れについて

Wordpressのローカル開発環境を構築するために、今回は次のような手順で作業をすすめてゆきます。



▼今回の作業内容

  1. XAMPPをインストールする
  2. Wordpressをインストールする
すべて画像付きで詳しく解説してゆきますので、初心者の方でも安心してついてきてくださいね!

前置きが長くなってしまいましたが、それではスタートします。

STEP1. XAMPPのインストール

XAMPP
XAMPP(ザンプ)

まずはローカル開発環境用のソフトウェアであるXAMPPのインストールから行います。

インストーラーを取得する

公式サイトのダウンロードと書かれた所から、XAMPPのインストーラーをダウンロードします。



▼XAMPP公式サイト

XAMPP

※クリックすると別ウィンドウで開きます

XAMPPダウンロード
XAMPP公式サイト

またこの際には、自分のパソコンのOSの種類に合ったバージョンを選択する様にします。



  • Windows:Windows向けXAMPP
  • Linux:Linux向けXAMPP
  • Mac:OS X 向けXAMPP

XAMPPをインストールする

続けてインストーラーを実行して、自分のパソコンにXAMPをインストールしてゆきます。

XAMPPのインストーラー
XAMPPインストール中の様子

基本的にはインストーラーの手順にしたがって作業を進めてゆけば完了させることが出来ますが、詳しいインストールの手順や、基本的な使い方について知りたい方には、つぎの記事が参考になります。

インストールが完了したら、XAMPPのコントロールパネルを開きます。XAMPPのコントロールパネルは次の場所にあります。

例)XAMPPコントロールパネルの場所
C:\xampp\xampp-control.exe

XAMPPコントロールパネルを開いたら、続けて、ApacheとMySQLを起動させます。 (※それぞれの『Start』のボタンを押すとソフトを起動することができます)

Apache・MySQLが起動した状態
XAMPPのApacheとMySQLを起動した状態

以上でXAMPPのインストール作業と、コントロールパネルの準備は完了です。

つづけてWordpressのインストール作業を進めてゆきましょう。

STEP2. Wordpressのインストール

Wordpress(ワードプレス)
Wordpress(ワードプレス)

XAMPPのインストール作業が終わったら、今度はWordpressをインストールする作業を進めてゆきます。

Wordpressをダウンロードする

Wordpressをインストールするために、まずは『Wordpress(ワードプレス)』の本体ファイルを入手します。以下のサイトから『Wordpress日本語版』のファイルをダウンロードしましょう。



▼Wordpress日本語サイト

Wordpress日本語版のサイトを開く※クリックすると別ウィンドウで開きます

Wordpress日本語版のダウンロード
Wordpress(ワードプレス)の日本語サイト

上記サイトを開いたら、トップページの『Wordpressをダウンロード』のボタンを押してファイルをダウンロードします。



ダウンロードしたzipファイルをPC上で解凍しましょう。すると次のようなWordpressのファイル一式が取得できます。(※zipファイルを右クリックして「すべて展開」を選択すると解凍できます)

Wordpressをインストールする方法_日本語版ファイル②.png
Wordpress(ワードプレス)のファイル一式
上記はいずれもWordpressを構成をするファイルであり、プログラミング言語の『PHP』で記述されています。

Wordpressを設置する

取得したWordpressのファイル一式をXAMPP内に設置してゆきます。



さきほどインストールしたXAMPPに含まれている『htdocs』というフォルダ配下に、解凍したWordpressのフォルダをまるごと移動させましょう。

例)フォルダの移動先
C:\xampp\htdocs\wordpress

フォルダを移動させた実際の様子は次のようになります。

Wordpressのフォルダ移動先
設置したWordpressのフォルダ

また、設置したWordpressのフォルダのパスは、次の作業で使用するため控えておく様にしましょう。

上記以外にWordpressのフォルダを設置しても後の作業を進めることも出来ます。ただしフォルダのパスに日本語が含まれていると、XAMPPやApacheの動作に不具合が発生することがあるため注意が必要です。

WEBサーバーを設定する

設置したWordpressにブラウザからアクセスできる様にするために、WEBサーバーである『Apache』の設定ファイルを変更します。



Apacheの設定ファイルを変更するには、XAMPPコントロールパネルからConfigボタンを押して、『Apache(httpd.conf)』のメニューを選択します。

XAMPPのコントロールパネルでApache設定ファイルを開く
Apacheの設定ファイルを開く方法

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>
この際のDocumentRoot、Directoryの部分に書かれているパスは、さきほど自分のPC上に設置したWordpressフォルダのパスに置きかえる様にしましょう。

追記した設定内容を端的に説明すると、『http://localhost:50000』という自分のパソコンでのみ使用できるURLを使用して、設置したWordpressにアクセスできる様にする、といった意味合いになります。



このほか、ポート番号の部分を50001、50002、50003といった風にずらしてゆけば、ローカル開発環境に複数のWordpressサイトを設置する事も可能となります。

複数のサイトを扱うWEB制作において、非常に有効な手法です!

ローカル開発環境に複数のサイトを設置する方法について詳しく知りたい方には、次の記事も参考になります。

設定内容を記述してファイルを保存したら、必ずApacheの再起動を行うようにしましょう。
Apacheの再起動をしないと設定内容が反映されないので、この作業をお忘れなく。

Wordpressにアクセスする

Apacheの設定ファイルの追記と再起動が終わったら、この時点で一度、設置したWordpressにアクセスが出来るかを確認してみましょう。



PC上に設置したWordpressに対してアクセスするには、先ほどの設定ファイルにも追記した次のURLを使用します。

▼ローカルPCにアクセスするURL
http://localhost:50000/

設定が上手くいっていると、WEBブラウザでは次のような画面にアクセスできます。

Wordpressへのアクセスを確認する

上記の画面は、XAMPP環境に設置したWordpressのインストール画面になります。

また、この画面が表示出来ていれば、今までの作業が上手くいっている事の確認にもなります。

ただしこの時点では、Wordpressの画面にもある通り、つづけて作業する必要があることが分かります。

WordPress へようこそ。作業を始める前にデータベースに関するいくつかの情報が必要となります。以下の項目を準備してください。

データベース名
データベースのユーザー名
データベースのパスワード
データベースホスト
テーブル接頭辞 (1つのデータベースに複数の WordPress を作動させる場合)

なのでこの画面はひとまず置いて、今度はWordpressで使用するデータベースの作成を行います。

データベースの作成には、XAMPPに含まれている『MySQL』というソフトウェアを使用してゆきます。

データベースを作成する

続けてWordpressで使用するためのデータベースを準備してゆきます。

データベースとは情報を蓄積するためソフトウェアのことを言います。Wordpressでは『MySQL』という種類のデータベースを、記事などの文章データを保存するために使用してゆきます。

MySQLのデータベースを作成するために、XAMPPコントロールパネルのMySQLの欄にある『Admin』ボタンを押します。

MySQLデータベースの作成①
XAMPPコントロールパネル

するとブラウザ上に『phpMyAdmin』と書かれた画面が表示されます。

phpMyAdmin
phpMyAdmin
phpMyAdmin(ピーエッチピー・マイアドミン)は、MySQLをWEBブラウザから管理することが出来るデータベースの管理ツールです。XAMPPでは、このソフトウェアを通してMySQLデータベースの操作を行います。

多くはWEBサービス・システム開発におけるプログラミング作業の過程で使用されるツールですが、とはいえ今回のようなWordpressの利用において、難しい作業が発生することは基本的にはありません

初心者の方も安心して作業をすすめて下さいね。
今回はWordpressで利用するデータベースの作成をするために、3ステップで済むかんたんな作業のみを行います。

今回おこなうべきデータベース作成のための作業はつぎの通りになります。



▼データベースを作る3つの手順

  1. 画面左上にある『新規作成』のメニューを選択する
  2. データベース名のところに『wordpress』を、その右の選択肢で『utf8_general_ci』を選択する
  3. 『作成』ボタンを押してデータベースの作成を完了させる



上記の順番にしたがって作業を進めてゆきましょう。

MySQLデータベースの作成②
phpMyAdminでデータベースを作成する方法

以上の操作を行うと、MySQL上に新しいデータベースが作成され、phpMyAdminでは次のように確認ができます。

MySQLデータベースの作成③
phpMyAdminで作成したデータベース
今回は『wordpress』という名前でデータベースを作成しましたが、データベースの名前は任意の内容に変えることも出来ます。

また、作成時点のデータベースは中に何も入っていない空の状態ですが、データベースに対するデータ挿入などの作業はすべてWordpressから自動的に行われる様になっています。よって、ここでのこれ以上の作業は必要ありません。



今回Wordpress用に作成したデータベースの情報をまとめると、次のような内容になります。



▼データベースの情報

データベース名

wordpress

ユーザー名

root

パスワード

※パスワードなし

ホスト名

localhost

後に続くWordpressのインストール作業をすすめる上でも上記のデータベースの情報が必要となりますので、作業をおこなったらメモなどに控えておくと後の作業がスムーズになります。

以上でデータベースの作成の作業は終わりになります。

あとはWordpressのインストール作業を完了させるだけですね!

インストール作業を完了させる

MySQLのデータベースの作成が終わったら、再び『Wordpressの画面(http://localhost:50000)』を開いて、残りの インストールの作業を進めてゆきます。



Wordpressの画面を開いたら『さあ、始めましょう!』のボタンを押して、次のページに進みます。

Wordpressのインストール①
Wordpressのインストール作業①

するとWordpressで使用するデータベースの情報を入力を行うページが開きますので、先ほど作成したデータベースの情報を入力してゆきます。

Wordpressのインストール作業②
Wordpressのインストール作業②

ここで控えておいたデータベースの情報を使います。画面に対して『データベース名』『ユーザー名』『パスワード』『データベースのホスト名』の情報を入力してゆきましょう。(※テーブル接頭辞はデフォルトの”wp_”のままでOKです)



以上の入力が終わったら『送信』をクリックして次に進みます。データベースの設定が正しく通ると次の画面に進みますので、続けて『インストール実行』ボタンを押します。

Wordpressのインストール作業③
Wordpressのインストール作業③

続く画面では、Wordpressで使うサイト名や管理画面にログインするためのユーザーの情報を作成します。

Wordpressのインストール作業④
Wordpressのインストール作業④

順番に『サイトのタイトル』『ユーザー名』『パスワード』『メールアドレス』を入力してゆきましょう。(※後から変える事も出来るので仮の内容でもOKです)

この時に登録するユーザーの情報は管理画面にログインするために必要なので、必ず控えておくようにしましょう。

入力が終わったら、最後に『Wordpressをインストール』ボタンを押します。インストールが無事に終わったら次の画面に移動します。

Wordpressのインストール作業⑤
Wordpressのインストール作業⑤

続く画面で『ログイン』ボタンを押すと、Wordpressのログイン画面に移動できます。

Wordpressのインストール作業⑥
Wordpressのインストール作業⑥

最後に情報を入力して『ログイン』をクリックすると、Wordpressにログインできます。

ログインするには先ほど入力した『ユーザー名(メールアドレス)』と『パスワード』を使用します。
Wordpressのインストール作業⑦
Wordpressのインストール作業⑦

Wordpressを利用したことがある方にとってはお馴染みとも思いますが、上記がWordpressの管理画面になります。



今回の作業目的のとおり、あくまでパソコン上に構築したWordpressのローカル開発環境ですので、インターネットを通して外部からアクセスすることは出来ません。



とはいえそれ以外の記事投稿、テーマ・プラグインの導入、各種カスタマイズといったWordpressの基本機能は、レンタルサーバーなどに設置したWordpressと同じように利用する事が可能です。

以上でパソコン上にWordpressのローカル開発環境を作る作業はすべて完了となります。

以降はローカル開発環境をWordpressにおける各種作業に役立てることが出来ます。



▼Wordpressローカル開発環境の活用例

  • Wordpressオリジナルテーマの制作
  • Wordpressの各種カスタマイズ作業
  • アップデート・テーマ・プラグインの動作検証
ここまでの作業、本当にお疲れ様でした!

この記事のまとめ

今回は、Wordpressのローカル開発環境を作成する方法について詳しく解説してゆきした。



Wordpressのローカル環境には、オリジナルテーマの制作やアップデート・プラグインの検証など、WEBサイトの制作者や運営者を問わず、さまざまな使い道があります。



このほか、サイトの改修や検証といったリスクを伴う作業を本番間環境から切り離すことができるため、安全なサイト運営が出来るという意味でも大きなメリットが生まれます。



ローカル環境をお持ちでない方は、今回の作業手順を参考にぜひ構築にトライしてみて頂ければと思います。

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事