XAMPPを使ってローカル環境にWordPressを構築する方法

みなさんこんにちは！エンジニアの高澤です。

今回はXAMPPの使い方とローカル環境でのWordPressの立ち上げ方について解説いたします。

XAMPP（ザンプ）とは、PC内に（つまりローカルに）ローカルサーバーを設置することができる無料のソフトウェアです。

初心者の方にはXAMPPって一体なんだろう？と不思議に思ってらっしゃる方が多いのではないでしょうか。

筆者もエンジニアでありながら、「初めはよくわからない難しそうなものだ」と感じてなかなか扱うのにも抵抗があるなと思っていました。

ですが、使い方を知ってしまえばすぐに使いこなせますし決して難しいものではありません。

まったく同じ用途でMAMPという無料のツールもありますが、MAMPも含めてローカル環境を構築してくれるツールは、エンジニアやデザイナーなど開発者にとって必須のツールであるといっても過言ではありません。

XAMPPには次のようなことを提供してくれます。

ローカル上でサーバー機能を無料で構築できる
WordPressをローカルで立ち上げることができる
データベースもデータベースを操作するツールも備わっている
バックエンドのプログラミング言語を動かすことができる

当記事では初心者の方、またプロとしてお仕事をされている開発者の方やディレクターの方、またブロガーの方などWebに携わるみなさまに、XAMPPの説明ができるようになるまで理解し、使いこなせるようになることをゴールに解説しております。

ぜひ当記事をご活用いただきお仕事などに活かしていただければ幸いです。

XAMPPとは

自分のPC内にテスト用サーバーを立ち上げることができる無料のソフトウェアのことを「XAMPP」といいます。

動的なシステム（掲示板など投稿機能など）が導入されたWebサイトやWebアプリケーションは、そのシステムを構築するためのプログラミング言語（例えばPHP、Ruby、Pythonなど）で作られているためサーバー環境がなければ動きません。

つまり、PC内（例えばデスクトップ上など）でPHPファイル（拡張子が「.php」のファイルなど）をダブルクリックしてブラウザで開いても一切動かないということになります。

ただ、サーバーが必要とはいえレンタルサーバーを借りるにはお金がかかりますし、また、構築する段階でいきなり本番サーバーにアップしながら構築するのは何かとリスクがあります。

そこで、今回ご紹介する「XAMPP」が登場するわけです。

XAMPPはPC内にに無料でサーバー環境と、データベース、またデータベースを簡単に操作することができるphpMyAdminというツールが標準で搭載されているためとても高機能です。

パソコンにインストールするだけで簡単にPHPやPerlなどで作られたWebシステムの動きを確認、Web構築するとこができます。

XAMPPの使いどころ

XAMPPはただローカルにサーバーを用意してくれるだけではなく、実に多くの使い道があります。

筆者は現役のPHPエンジニアですが、ざっと下記の様な使い方をしています。

WordPressをデプロイ（本番にアップ）する前にローカルに構築してWeb開発するとき
PHPやPerl以外にも、AjaxなどJavaScriptを使用して動きを確認するとき
Gitなどバージョン管理システムのローカルリポジトリのファイルをサーバー環境におきたいとき

など、多くの場面で使用しております。

そもそもなぜXAMPPというのか

なぜXAMPPというかというと、下記の頭文字を組み合わせたものです。

X　→　クロスプラットフォーム A　→　Apache （アパッチ） M　→　MySQL P　→　PHP P　→　Perl

それぞれご説明すると、

クロスプラットフォームとは

どのOS（オペレーティングシステム）でも動きますよという意味です。例えば、Windows、macOS、Linuxなど。

Apacheとは

Webサーバーのソフトウェアのことであり、このApacheがあることでWebシステムが動きます。

MySQLとは

リレーショナルデータベース管理システム（RDBMS：Relational Database Management System）というソフトウェアであり、このソフトウェアがなければデータベースにSQL文で命令することができません。

PHPとは

PHPとはHypertext Preprocessorの略で、Web開発のシステムを構築するためのプログラミング言語です。
具体的には掲示板サイトのような、画面とデータベースを結び付けてデータの出し入れをしたりする動きを作るのがPHPです。
似たようなプログラミング言語に、Ruby、Pythonなどがあります。

Perlとは

PerlとはPractical Extraction and Report Languagerの略で、こちらもWebアプリケーションやシステムの構築などバックエンドを担当するプログラミング言語です。テキスト処理が得意な言語ではありますが、CMSやフレームワークなどの面で他のプログラミング言語が人気を勝ち取り、Perlのシェアは伸び悩んでいます。

XAMPPを使うメリット

エンジニア目線から解説させていただきますと、下記のメリットがあります。

・本番環境に公開する前に事前にテスト環境下でご自身で構築したシステムの動きを確認できる
・WordPressのみならずEC Cubeなど他のPHPで作られたCMSをローカルで構築できる
・サーバー環境やデータベースを必要とするPHPとPerlを動かすことができる
・無料でかつ高性能
・標準で備わっているphpMyAdmin（データベース管理ツール）でデータベースを操作できる
・ローカル環境なので、安心してデータベース操作の練習ができるなど、多くのメリットがあります。
データベースも含めてWebシステムを構築する上で必要なツールが一通り備わっているので、Web開発者にとってはメリットしかありません。

XAMPPのインストールとセットアップ方法

それでは早速XAMPPをインストールしましょう。

XAMPPをパソコンへインストールする方法

１、公式サイトへ進み、ダウンロードボタンをクリックします。

公式サイトURL：https://www.apachefriends.org/jp/index.html

２、ここではMacを使用して解説いたしますので、「OS X向けXAMPP」をクリックします。（※Windowsを使用されている方は「Windows向けXAMPP」をクリックします）

３、XAMPPのインストーラーがダウンロードされるので、そのファイルをクリックします。

４、通信環境にもよりますが、ダウンロードが完了するまで少し待ちます。

５、ダウンロードが完了するとアイコンが下記のように変わり、ポップアップ画面が表示されます。 ↓（ダブルクリック後）

６、ポップアップ画面の左のアイコンを右のファイルアイコンにドロップ＆ドラッグします。

７、認証を求めるポップアップ画面が表示されるので、「認証」をクリックします。

８、ご自身のPCで設定された「ユーザ名」と「パスワード」を入力します。

９、インストールが開始されるので少し待ちます。

１０、XAMPPのアイコンが表示されるので、クリックしてアプリを開きます。

１１、アプリを開いても良いかのポップアップが表示されるので、「開く」をクリックします。

１２、画面上にXAMPPのポップアップ画面が表示されます。これで、XAMPPが使えるようになりました。これでXAMPPを利用するための準備は整いました。

使い方は次の内容からご説明いたします。

XAMPPの起動方法

ここまででXAMPPのダウンロードしてからセットアップまでできるようになりました。

ここからは、XAMPPを起動させてPHPファイルを画面に表示させるまでをやってみましょう。

XAMPPを起動させる

１、XAMPPのアイコンをクリックし、ポップアップ画面の「Start」をクリックします。

２、すると「Status:」の丸いアイコンの色が赤色から緑色に変わり、「ID Address:」の右に「192.168.64.2」のようにIDアドレスが表示されます。

これでXAMPPに備わっているサーバーが起動し、ブラウザからアクセスすることができるようになりました。

ここまで進んだら、次の内容でサーバーがちゃんと起動しているかを確かめるために、PHPファイルを作ってそれを表示させて見ます。

作成したPHPファイルをブラウザから表示させる

１、まずはブラウザで表示させるためのPHPファイルを作成しておきます。

ファイル名を「index.php」という名前でPHPファイルを作成し、下記のサンプルソースコードをコピペしてください。

<?php
print ‘Hello PHP！’;
?>

<?php

print ‘Hello PHP！’;

２、XAMPPポップアップ画面を開き、「Volumes」をクリックします。

３、「Mount」をクリックします。

４、「Explore」をクリックします。

５、lamppのファイルが開きます。
６、その中の「htdocs」というファイルを開きます。
７、「test_site」というファイルを作成します。
８、test_siteの中に作成した「index.php」を設置します。
あとはブラウザでアクセスするのみですが、アクセスできるようにするための設定が必要になります。

９、XAMPPのポップアップ画面の「Network」をクリックします。「Network」ではポートの設定ができます。

１０、「localhost:8080->80（Over SSH）」を選択し、すぐ右の「Enable」をクリックします。

「localhost:8080->80（Over SSH）」でポートの設定が完了し、赤色の丸が緑色に変更します。
これでブラウザから「localhost:8080/…〜」でXAMPPのサーバー環境にあるファイルにアクセスすることが可能になります。

１１、ブラウザを開いて「http://localhost:8080/test_site/index.php」でアクセスします。（※このとき必ずXAMPPが起動していなければ起動させてからアクセスしてください。）

すると無事真っ白の画面の左上に「Hello PHP！」と表示されていれば成功です。

これでご自身で作成したPHPファイルの内容をブラウザで表示することができました。

あとはルートディレクトリの階層（ここでは「test_site」ファイル」の直下）をベースにPHPファイルやCSSファイルなどを配置させ、Webシステムを開発していきます。

XAMPPのローカル環境にWordPressをセットアップする方法

XAMPPを利用してローカル環境にWordPressを構築する方法をご紹介します。

WordPressをダウンロードする

WordPressでXAMPPで使えるようにするためにまずは公式サイトからWordPress本体のファイルをダウンロードしましょう。

１、WordPressサイト「WordPress.org」のページを開きます。

URL：https://wordpress.org/
URL（日本語版）：https://ja.wordpress.org/
※解説では伝わりやすいように日本語版で解説いたします。

２、画面右上の「WordPressを入手」をクリックします。

３、「WordPress 5.5.3 をダウンロード」をクリックします。

４、圧縮されたWordPress本体ファイルがダウンロードされるので、ダブルクリックしてWordPress本体ファイルを解凍します。

↓（ダブルクリック後）

５、XAMPPアイコンをクリックしてXAMPPを起動します。

６、XAMPPのポップアップ画面が開くので、「General」タブの「Start」をクリックして起動します。

７、「Services」タブをクリックして、「Apache」と「MySQL」の２つを選択して右側の「Start」をクリックします。

８、「Network」タブをクリックして「localhost:8080->80(Over SSH)」を選択し、「Enable」をクリックします。
これで「localhost:8080/…〜」のURLでブラウザからアクセスできるようになります。

９、「Volumes」タブを開き、「/opt/lampp」の右側にある「Mount」をクリックして、さらに「Explore」をクリックします。

１０、「lampp」ファイルが開くので、その階層にある「htdocs」ファイルを開き、ダウンロードしたWordPress本体ファイル「wordpress」を設置します。

１１、ブラウザ（Chrome）を開き、「http://localhost:8080/wordpress/」でアクセスします。

１２、自動で「http://localhost:8080/wordpress/wp-admin/setup-config.php」にアクセスされて、「WordPressへようこそ」ページが開きます。
開いたら「さあ、始めましょう！」をクリックします。

１３、データベース接続のための情報を入力するページが開かれるので、ここでデータベースの設定が必要なことがわかります。

それではデータベースの設定をしましょう。データベースの設定で必須であるXAMPPに標準で搭載されたphpMyAdminを開きましょう。
ブラウザから「http://localhost/phpmyadmin/」でアクセスしてphpMyAdminを開きます。

phpMyAdminとは

phpMyAdminとは、MySQLサーバー（データベースサーバー）をブラウザで管理できるソフトウェアです。

phpMyAdminを使うことでSQL文を記述することなく簡単に操作するだけでデータベースやテーブルの作成などができます。

１４、画面上の「データベース」タブをクリックします。
データベースを作成するページが開きます。

１５、「データベースを作成する」の入力項目2つにそれぞれデータベース名と文字コードを選択します。

ここでは下記のように入力・選択します。

データベース名：wp_db
文字コード：utf8_general_ci

入力・選択したら「作成」をクリックしてください。

１６、画面左のデータベース一覧に「wp_db」が追加されたことが確認できます。

１７、次にユーザーアカウントを作成します。

画面上の「ユーザーアカウント」タブをクリックします。

１８、ユーザーアカウントのログイン情報を入力する項目があるので、それぞれ入力します。

ここでは下記の内容で入力します。 ※ここでの設定内容は「ホスト名」以外は任意になりますが、ここでは解説用に下記の設定内容を採用しております。

【ログイン情報】
ユーザ名：test_user
ホスト名：localhost
パスワード：test_pass
再入力：test_pass

【グローバル特権】は「すべてチェックする」にチェックを入れます。

その他の項目はデフォルトのままで大丈夫です。

完了したら「実行」をクリックしましょう。

１９、「新しいユーザを追加しました。」と表示されたので、無事ユーザアカウントが作成されたのを確認できました。

２０、先ほど表示されたデータベース接続のための情報を入力するページを開き、それぞれ必要な情報を入力します。

ここでは下記の内容で入力します。 ※ここでも「データベースのホスト名」以外は任意になりますが、解説のために下記の設定内容で進めます。

データベース名：wp_db
ユーザー名：test_user
パスワード：test_pass
データベースのホスト名：localhost
テーブル接頭辞：wp_

入力が完了したら「送信」をクリックします。

２１、「wp-config.phpファイルに書き込みできません。」というページが開くので、「インストール実行」をクリックする前に、ここで表示されたソースコードをWordPress本体ファイルの中にある「wp-config.php」にコピペしてプログラムを上書きしましょう。

２２、再びlanppファイルを開き、「htdocs」→「wordpress」→「wp-config-sample.php」で進み、wp-config-sample.phpを同じ階層に複製させてwp-config.phpを作成します。

①lanppファイルを開き「htdocs」を開く

②「wordpress」を開く

③wp-config-sample.phpがあるので、それを複製する

④wp-config-sampleのコピー.phpが作成されるので、ファイル名を「wp-config.php」に変更する

⑤新しく作成した「wp-config.php」をエディタで開く（ここではVisual Studio Codeを使用しています）

⑥開いたらプログラムの内容がデフォルト状態なので、ソースコードを全て削除し、先ほどの「wp-config.phpファイルに書き込みできません。」ページにあったソースコードをコピペし保存します。

↓デフォルト状態のソースコードを全削除
ここまで終わったら２２に進みます。

２２、先ほど開いた「wp-config.phpファイルに書き込できません。」ページに戻り、「インストール実行」をクリックします。

２３、wp-config.phpファイルがすでに存在しています…〜という内容で表示されるので、リンク文字の「今すぐインストールを実行」をクリックします。

２４、ようこそページが開くので、それぞれ任意の設定で「サイトのタイトル」や「ユーザー名」など入力していきます。入力できたら「WordPressをインストール」をクリックします。

２５、成功しました！の画面が出たら完了です。
「ログイン」をクリックします。

２６、「ユーザー名またはメールアドレス」と「パスワード」を入力したらログインします。

２７、無事WordPressが立ち上がり管理画面を表示させることができました！

まとめ

今回はXAMPPの使い方やXAMPPを使ってWordPressを立ち上げる方法について解説しました。

初心者の方にはいかにも扱いが難しそうなものだと思われるかもしれませんが、使い方を学んでしまえば全く難しいものではないということがお分かりいただけるかと思います。

簡単にいえば、サーバーを用意しなければ動かないCMSやプログラミング言語を使って開発作業ができる様に、ローカルにサーバーを用意するための無料のソフトウェアのことをいいます。

WebエンジニアやWebデザイナーの方にとっては必須のソフトウェアといっても過言ではありません。

WordPressをXAMPPを利用してローカルで立ち上げましたが、ここでの手順に慣れておくと実際の本番サーバーでの構築の時にスムーズに立ち上げることができます。

XAMPPの使い方を知り、Web開発やサイトの運営などを皆様のお仕事に活用していただくことで効率的に進められますので、ぜひご活用ください。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。