Wordpress

WordPressをローカル環境で構築する方法(XAMPP編)

WordPressをローカル環境で構築する方法(XAMPP編)

WordPressをローカル環境に構築

WordPressをローカル環境で構築する方法として、MAMPやLOCAL、XAMPPなどがあります。ローカル環境でWordPressを構築できるようになれば、WordPressをカスタマイズしたり、新しいプラグインやテーマをテストする時にも役立ちます。今回は「XAMPP」を利用して、ローカル環境にWordPressを構築する方法と、バーチャルホストや複数サイトの構築について説明します。

LOCALを使用する場合は下記の記事を参照してみてください。

簡単すぎる!WordPressをローカル環境で構築する方法(Local編)
簡単すぎる!WordPressをローカル環境で構築する方法(Local編) WordPressをローカル環境に構築 WordPressをローカル環境に構築する方法として、MAMPやXAMPP、Local、...

MAMPを使用する場合は下記の記事を参照してみてください。

Wordpressをローカル環境で構築する方法(MAMP編)
WordPressをローカル環境で構築する方法(MAMP編) Wordpressをローカル環境に構築 Wordpressをローカル環境に構築するためには、パソコン内でサーバーを立ち上げる必要...

RaspberryPi ZERO Wを使用する場合は下記の記事を参照してみてください。

Wordpressをローカル環境で構築する方法(RaspberryPi ZERO W編)
WordPressをローカル環境で構築する方法(RaspberryPi ZERO W編) wordpressをローカル環境に構築 WordPressをローカル環境に構築するにはLAMP、MAMP、XAMPP、LOCAL...

XAMPPとは

XAMPPは自分のパソコン内でウェブサーバーを構築し、ウェブアプリケーションを動かすために必要なパッケージがまとめられているソフトです。

Xはクラスプラットフォーム、AはApacheサーバー、MはMySQL、PはPHPとPerlであり、それぞれの頭文字を取ってXAMPPと呼ばれています。
ローカルのウェブサーバーを構築すると聞くと初心者には敷居が高いように感じますが、XAMPPはインストールした後、いくつかの手順を実行するだけなので、非常にお手軽です。

また、バーチャルホストによって、ローカル環境でドメインを割り当てて作業したり、複数のWordPressを設置して様々なテストを行うことが可能です。
オンラインで稼働中のWordPressでテストをしてしまうと、何らかの原因で不具合が起きた時にユーザーがサイトやサービスにアクセスできなくなります。
XAMPPでローカル環境に構築したWordPressでテストをすることで、ユーザーに迷惑を掛けることなく、安全に作業をすることができます。

XAMPPのインストール

公式ページ: https://www.apachefriends.org/jp/index.html

まずはXAMPPをダウンロードするために、上記の公式ページにアクセスしましょう。お使いのOSに合わせてダウンロードをクリックします。
今回の作業環境はWindows10PROですので、Windows向けXAMPPをクリックしました。
xampp-windows-x64-7.3.3-1-VC15-installer.exeというファイルがダウンロードされたので、ダブルクリックして起動します。

ユーザーアカウント制御(User Account Control」の警告が出たら「はい」をクリックすると上記のようにインストーラが起動されますので、Nextをクリックしましょう。

何をインストールするか聞かれますが、今回はそのまま全てにチェックをいれたまま、Nextをクリックします。

次にインストールするフォルダを指定します。ドライブの空き容量をチェックして、余裕のあるドライブのフォルダにインストールしましょう。

通常はデフォルトのままCドライブで大丈夫ですので、Nextをクリックします。

画面が切り替わったら、そのままNextをクリックします。

同じく、画面が切り替わったら、Nextをクリックします。

スクリーンショットのようにインストールが始まりますので、しばらく待ちます。

上記のようにファイアウォールの表示が出たら、アクセスを許可するをクリックします。

上記の画面が出たら、XAMPPのインストールは終了です。

Finishをクリックすると言語の選択が出るので、そのままSaveをクリックします。

無事にXAMPPのコントロールパネルが表示されれば終了です。
次はXAMPPの初期設定に入ります。

XAMPPの初期設定

XAMPPのコントロール画面が開いたら、まずはApacheとMySQLの項目のStartをクリックしてみましょう。

ファイアウォールの警告が出たら、アクセスを許可するをクリックします。

ブラウザを開いて localhost と入力してみましょう。上記のようにXAMPPのダッシュボードが表示されれば問題ありません。

次はXAMPPのコントロール画面のConfigをクリックしてみましょう。

テスト環境として利用する場合は、Autostart of modulesの項目でApacheとMySQLにチェックをいれておくことで、XAMPPを起動した時にそれぞれが自動起動するようになります。
その他の項目については、Portのセッティングの項目でそれぞれのポートを指定することができるので、何らかのサーバー系のソフトウェアを既に利用していて、同じポートを使用してしまうと困る場合に、ポートを変更しましょう。
基本的にはXAMPPのコントロールパネルでApacheとMySQLをStartで起動する以外は特にいじらなくても大丈夫です。

次にphpMyAdminでWordPressで利用するデータベースの作成を行います。

データベースの作成

XAMPPを起動した状態でブラウザのアドレスバーに localhost/phpmyadmin とコピペするとphpMyAdminにログインできます。

ログインしたらデータベースの項目をクリックします。

データベースを作成するの下の部分の空白に任意の文字列を入力して、作成をクリックします。

今回は複数のWordPressを構築する手順も含めるので、wp_xampp_db_01とwp_xampp_db_02という名前を付けてみます。
照合順序は「utf8_general_ci」を選びます。
特に現時点で複数のWordPressを構築しない場合は1つだけデータベースを作成してください。

入力したデータベース名が表示されたらデータベースの作成は終了です。
※今回はローカル環境にWordPressを設置、稼働するための手順ですので、データベースの作成のみとなっております。お使いの環境に合わせてユーザーの作成やrootのパスワードの変更を適宜行ってください。

次はWordPressの本体をダウンロードしてインストールします。

WordPressのダウンロード

公式ページ:https://ja.wordpress.org/

WordPressの公式ページを開いて、WordPressを入手をクリックして、画面が移動したら、WordPress 5.1.1 をダウンロードをクリックしてダウンロードします。

.zip形式で圧縮されているので、右クリックで「すべて展開」を選んで展開してください。

すべて展開したら、xamppをインストールしたフォルダを開きます。
デフォルトのままなら、Cドライブのxamppフォルダですので、開いたら htdocsフォルダをクリックして表示してください。

開いたら任意の文字列で新規フォルダを作ってください。今回は複数のWordPress構築を紹介するために「wp_01」と「wp_02」というフォルダを作りました。
それぞれのフォルダに、展開したwordpressのフォルダの中身をすべてコピーします。
これでひとまずWordPressのダウンロードは終了です。

次はXAMPPのバーチャルホストの設定を行います。

バーチャルホストの設定

バーチャルホストとはローカル環境で任意のホストネームやドメイン名にルートフォルダを設定することで、いくつでもローカルホストを増やせる方法です。
WordPressを複数設置する時に非常に役立ちます。
また、複数のWordPressを構築する以外にも他のウェブアプリケーションを作って管理する時にも便利ですので、ぜひ覚えておきましょう。

httpd-vhosts.confの設定

XAMPPをCドライブにインストールしたと仮定して説明します。
エクスプローラーのアドレスバーに C:\xampp\apache\conf\extra をコピペして開いてください。
httpd-vhosts.confを見つけたら、選択してコピー、すぐに張り付けをしてバックアップを残しておきましょう。
バックアップが作れたら、httpd-vhosts.confをメモ帳で開きます。

NameVirtualHost *:80
<VirtualHost *:80>
  DocumentRoot &quot;C:\xampp\htdocs\wp_01&quot;
  ServerName wp1.xampp
</VirtualHost>

<VirtualHost *:80>
  DocumentRoot &quot;C:\xampp\htdocs\wp_02&quot;
  ServerName wp2.xampp
</VirtualHost>

httpd-vhosts.confを開いたら、一番最後までカーソルで移動して上記を追記します。

次にhostsの設定を行います。

Windowsボタンを右クリックして、Windows PowerShell(管理者)をクリックします。

cd .¥drivers¥etc¥

上記を入力してエンターを押すとhostsのあるフォルダに移動します。

notepad hosts

上記を入力してエンターすると、メモ帳でhostsが開きます。

127.0.0.1    wp1.xampp
127.0.0.1    wp2.xampp

メモ帳が開いたら一番下まで移動して、上記を追記します。追記したら保存してメモ帳を閉じます。

Windows PowerShellは exit 

と入力してエンターを押せば終了されます。

これでwp_01のフォルダに、wp1.xamppでアクセスできるようになりました。wp_02のフォルダについても同様です。

WordPressのインストール

まずは http://wp1.xampp/ にアクセスして、ポート81、wp_01のフォルダにあるWordPressをインストールします。

「さあ、始めましょう!」をクリックします。

データベース名 wp_xampp_db_01
ユーザー名 root
パスワード ※パスワードを設定していないので空白
データベースのホスト名 localhost
テーブル接頭辞 wp_

上記のように必要な項目を入力したら「送信」をクリックします。

ようこその画面に移動したら、同じく必要な情報を入力します。

成功しました!の画面が出ればWordPressのインストールは完了です。

表示・動作確認

先ほどの画面でログインをクリックするとログイン画面に移動します。ユーザー名とパスワードを入れてログインしてみます。

無事にログインできました!次はサイトが開けるか見てみます。

何の問題もなく開くことができました。

次は http://wp2.xampp/ でアクセスしてみます。

こちらはインストール前の状態になっているのがわかります。先ほどと同じ手順で、データベースの部分のみ「wp_xampp_db_02」に変更して、インストールして表示や動作を確認してみます。

無事に別のWordPressとして構築することができました。

もっとWordPressを増やしたい場合はphpMyAdminでデータベースを増やして、htdocsにフォルダを増やし、httpd-vhosts.confでそれぞれの項目を追記、hostsも追記すること増やせます。
2019年4月4日の時点ではhttpd.confのファイルを触らなくてもバーチャルホストの設定ができましたが、httpd.confの編集が必要な場合もあります。
その他にもインストールしたタイミングや環境によってはポートを増やしたり、httpd-vhosts.confの記述が異なる場合もありますので、注意してください。

まとめ

XAMPPでWordPressのローカル環境の構築は非常に簡単でした。
まず、XAMPPのダウンロードからインストールまで難しい部分はありませんし、設定するファイルも現時点ではhttpd-vhosts.confに追記するだけです。
唯一、コマンドプロンプトの管理者権限でhostsへの追記があり、CUIに慣れていない場合は戸惑うかもしれないくらいです。
ファイルを編集したり追記する時は必ずバックアップを取り、いつでも元に戻せるような手順を覚えておきましょう。
もし、わからなくなったらXAMPPやWordPressを再インストールするほうが早い場合もありますので、どこをいじったかわからなかったり、何がどうなっているかわからない時は最初からやり直すこともおすすめです。
ちなみに、他のローカル環境の構築と同じような雰囲気で進めてしまうと誤った記述をしたまま進まなくなることもありますので、XAMPPやMAMP、LOCALでの手順は同じようなものもありますが、それぞれ鮮度の高い情報を収集してチャレンジしてみてくださいね。