以前にローカルマシーンにXAMPPをインストールしてローカル開発環境を構築する方法を記事にしました。今回はXAMPPで構築したローカル開発環境にWordPressをインストールする方法を扱いたいと思います。
※ この記事はmacOSが対象です。またXAMPPは「loaclhost」が使えるバージョン5.6.xの環境を前提として進めます。XAMPP(バージョン5.6.x)のmacOSへのインストール方法は過去のこちらの記事で扱っています。
目次
- WordPressのダウンロード
- XAMPPのDocumentRootの変更
- WordPressのインストール
- wp-config.php の設定
- XAMPPの各サービスを起動
- phpMyAdminでDBを作成
- WordPressで必要情報を入力
- まとめ
1. WordPressのダウンロード
まずは、WordPressをダウンロードしましょう。
https://ja.wordpress.org/download/
ダウンロードしたら、ひとまずデスクトップ上に解凍しておきます。
※記事執筆時点は「wordpress-5.0.3-ja.zip」
2. XAMPPのDocumentRootの変更
XAMPPを起動して全てのサービスがストップしていることを確認してください。その後「Manage Servers」タブに切り替え「Apache Web Server」が選択された状態で「Configure」ボタンをクリックします。
次に、開いた小さいウィンドウ内の「Open Conf File」ボタンをクリックするとこのような画面になります。アラートウィンドウの「OK」をクリックしてください。
すると、メモで「httpd.conf」が開きますので「⌘ + Fキー」で検索バーを表示させ「DocumentRoot」を検索します。ちなみに「DocumentRoot」とは、サイトのhtml関連ファイルやphpファイル等を格納するディレクトリのことです。
該当箇所が見つかったら、適宜自分の好みの場所に設定しましょう。デフォルトの設定を残しておきたい場合は、行頭に「#」をつけてコメントアウトしておきます。
例えば…「/Users/(ユーザ名)/XAMPP/wordpress」などとします。設定が完了したら「⌘ + Sキー」で保存して、開いたウィンドウを閉じてください。
「httpd.conf」に設定したディレクトリには、実際にフォルダを作っておきます。
この時、一つ注意点があるのですが「httpd.conf」に設定したディレクトリのパーミッションが「755」になっている必要があるので、ターミナルで確認しておきましょう。
$ ls -alF /Users/(ユーザ名)/XAMPP/
もし755でなければ、chmodコマンドでパーミッションを変更しておきましょう。
$ chmod 755 /Users/(ユーザ名)/XAMPP/wordpress
3. WordPressのインストール
3-1. wp-config.php の設定
今度はいよいよ、WordPressのインストールです。先ほどデスクトップに解凍しておいたWordPressフォルダ内の全てのファイルを「httpd.conf」に設定したディレクトリに移動もしくは複製しておきます。
ファイルの準備ができたら、今度は、いよいよWordPressの設定をします。
「/Users/(ユーザ名)/XAMPP/wordpress/wp-config-sample.php」このファイルを複製して…
「/Users/(ユーザ名)/XAMPP/wordpress/wp-config.php」のように「-sample」を削除しておきます。
「wp-config.php」ファイルをテキストエディタで開き、下記の箇所の設定を変更します。
27〜38行目:
// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', 'my_wp01_db');
/** MySQL データベースのユーザー名 */
define('DB_USER', 'my_wp01_db');
/** MySQL データベースのパスワード */
define('DB_PASSWORD', '任意のパスワード');
/** MySQL のホスト名 */
define('DB_HOST', 'localhost');
「DB_NAME」と「DB_USER」は基本的に同じにます。また「DB_PASSWORD」に任意のパスワードを設定してください。その他はそのままにします。
最低限の設定は以上ですが、localhostにWordPressを複数インストールしたい場合は、データベーステーブルの接頭辞の設定を適宜変更しておくとよいでしょう。
72行目:
$table_prefix = 'wp01_';
※ 上記ではデフォルトの「wp_」を「wp01_」と変更しました。
上記の設定が完了したら保存して、テキストエディタを終了します。
3-2. XAMPPの各サービスを起動
ここまでできたら、XAMPPの各サービスを起動します。「Manage Servers」タブに切り替え「Start All」ボタンをクリックします。
3-3. phpMyAdminでDBを作成
ランプが全てグリーンになったら、ブラウザを起動して「phpMyAdmin」にアクセスしてデータベースを作成します。
http://localhost/phpmyadmin/
「phpMyAdmin」にアクセスできたら、今度は「User accounts」をクリックし下記のような画面してください。
上記の画面になったら「Add user account」をクリックします。
下記のように設定してください。
「User name」…「my_wp01_db」
「Host name」…「localhost」
「パスワード」…先ほど「wp-config.php」で設定したもの
「同名のデータベースを作成してすべての特権を与える。」…チェック
「ワイルドカード(ユーザ名_%)に該当するデータベースにすべての特権を与える。」…チェック
「グローバル特権」の「Check all」…チェック
最後に画面右下の「実行」をクリックします。これで、データベースが作成されました!
3-4. WordPressで必要情報を入力
ここまでできたら、今度は、WordPressの設定画面にアクセスして、インストールの仕上げをします。
http://localhost/
各項目に任意の内容を入力します。
「サイトのタイトル」…任意のものを入力
「ユーザー名」…任意のものを入力
「パスワード」…任意のものを入力
「メールアドレス」…任意のものを入力
ちなみに、これらの内容はインストール後もダッシュボードと呼ばれる管理画面から全て変更可能です。
入力が完了したら「WordPressをインストール」をクリックします。インストール後の画面から「ログイン」して以下のような画面に変わったら、インストール完了です!
ちなみにこの画面はダッシュボードと呼ばれる管理画面のトップページです。
画面左上に先ほど設定した「サイトのタイトル」が表示されていると思いますが、そこをクリックするとWordPressの表側の画面が表示されます。
これで、WordPressのインストールが完了しました!
4. まとめ
XAMPPはサーバーやインフラ周りに詳しくないデザイナーでも比較的簡単に開発環境を構築できる優れたツールです。
ローカルマシーン上でPHPを使ってプログラミングしたり、WordPressをベースにした開発をしたりできるのでよく活用しています。今回はWordPressをインストールしてみましたが、一度やってしまえば非常に簡単です。