Miki's Blog

フロントエンジニアに、俺はなる!

XAMPPでWordPressローカル開発環境を構築する

背景

WordPress初学者向け書籍を購入したものの、
レンタルサーバ(有料)で簡単インストールし、サイトを公開することが前提
になっていました。
自分はWordPressをローカルで試せる場所が欲しかったので、
XAMPPWordPressローカル開発環境をつくることにしました。

環境

XAMPPって?

Web開発に必要なソフトをまとめて扱うパッケージソフトウェアです。
ローカル環境でWebページ開発を行うことができます。

こちらはPHP開発で既にインストールし使っていました。
インストール方法などの参考 :
unsolublesugar.com

1. WordPress用データベース作成

XAMPP起動

MySQL.Database」と「Apache」を起動します。
緑色が付いていればOKです。
f:id:gomagaru:20190108195621p:plain

phpMyAdminにアクセス

ブラウザからhttp://localhost/phpmyadminにアクセスします。
f:id:gomagaru:20190108195718j:plain

「データベース」から作成

「データベース」を選択して...
f:id:gomagaru:20190108195740j:plain
作成するデータベースの情報を入力します。
f:id:gomagaru:20190108202043j:plain
今回は以下で作成します。
データベース名 : 任意 例 : wp_test_db
照合順序 : utf8-general-ci を選択

「特権」からユーザを作成

「特権」を選択して...
f:id:gomagaru:20190108202103j:plain
「New」からこのデータベースを使用出来るユーザを追加します。
f:id:gomagaru:20190108202123j:plain

ユーザの設定

f:id:gomagaru:20190108202201j:plain
以下のように設定します。
Use name : 「テキスト入力項目の値を利用する」を選択し、任意入力
例 : gomagaru
Host name : 「ローカル」を選択し、「localhost」を入力
パスワード : 「テキスト入力項目の値を利用する」を選択し、任意入力
Re-Type : パスワードを再入力

2. WordPressファイルをダウンロード

公式サイトからダウンロードし、zipファイルを解凍します。
日本語 « ダウンロード — WordPress

3. XAMPPのhtdocs配下にWordPressファイルを配置する

今回はhtdocs直下に「wordpress」を作成し、その中に配置しました。
パス : Applications/XAMPP/xamppfiles/htdocs/wordpress/wordpress/
f:id:gomagaru:20190108202259p:plain
f:id:gomagaru:20190108202314p:plain

4. データベース設定を登録し、WordPressをインストール

ブラウザからWordPressのセットアップページにアクセス

URL : http://localhost/wordpress/wordpress

「さぁ、始めましょう!」をクリック

f:id:gomagaru:20190108202351p:plain

必要項目を入力し、「送信」をクリック

f:id:gomagaru:20190108202411j:plain
データベース名、ユーザ名、パスワードともに
さきほど設定した値を入力します。

※configファイルを作成

これは全員必要ではないかもしれませんが、
「送信」ボタンクリック後、こんな画面があらわれました。
f:id:gomagaru:20190108202444p:plain
「手動で作成できなかったからwp_config.phpを作成して足してね!」...
どこに?!

迷いつつも、wordpressファイルの内容をチェック...

MacBook-Air:wordpress user$ ls
index.php		wp-config-sample.php	wp-mail.php
license.txt		wp-content		wp-settings.php
readme.html		wp-cron.php		wp-signup.php
wp-activate.php		wp-includes		wp-trackback.php
wp-admin		wp-links-opml.php	xmlrpc.php
wp-blog-header.php	wp-load.php
wp-comments-post.php	wp-login.php

.phpファイルが並んでる...
ここだ!(確信)
ということで、ファイル「wp_config.php」を作成し
任意テキストエディタで指示された内容をコピペします。
「インストール実行」をクリックで、インストールが実行されます。

サイト情報を入力し、「WordPressをインストール」をクリック

f:id:gomagaru:20190108202527j:plain
タイトル、ユーザ名、パスワード、メールアドレスを任意入力して、
WordPressをインストール」に進みます。
f:id:gomagaru:20190108202629p:plain
「成功」と表示されたらインストール完了です!

ログイン

f:id:gomagaru:20190108202657j:plain
さきほど設定したユーザ名とパスワードを入力し、「ログイン」に進みます。
すると...
f:id:gomagaru:20190108202723p:plain
ダッシュボード」が表示できました!

これで、WordPressローカル開発環境が整いました。
WordPressでサイト作成の入り口に到着できました!

まとめ

XAMPPを用いたWordPressローカル開発環境構築手順 :

  1. WordPress用のデータベースを作成
  2. WordPressファイルをダウンロード
  3. zipファイルを解凍してhtdocs以下に配置
  4. ブラウザから必要な情報を入力し、インストール