Wordpressをローカル開発環境で動かす - はじめてのWordpress

Wordpressを動かす

Wordpress は Web 運用を便利にする CMS です。今回は Wordpress の導入と開発環境の準備についてまとめました。

そもそもWordpressとは

Wordpressとは、オープンソースの CMS プラットフォームで PHP をベースに構成されています。CMS とは、大雑把に言うと Web ページを簡単にアップできるようにする仕組みのこと。そのため HTML や CSS の知識がなくとも(多少はあったほうが良いですが)自分の手でサイトを更新できるようになります。

また、Wordpress は利用者が多いこともあり、プラグイン(拡張機能)の数が豊富で、少し探せば該当するものが見つかりやすく、サイトへの導入も容易に行うことができます。
ただし、最終更新日が古いものや最新のバージョンに未対応の場合は、開発環境での挙動を確認した上で実装をするようにしないと思わぬエラーに遭遇するかもしれません。

Wordpressをインストールしよう

Wordpress のインストールには、いくつかの手順を踏む必要があります。

動作環境をチェック

公式サイトに必要条件の記載があり、最新のバージョンをインストールするには以下を満たすサーバが必要です。

  • PHP バージョン 5.2.4以上 (PHP 5.4以上推奨)
  • MySQL バージョン 5.0以上 (MySQL 5.5以上推奨)

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

いきなり本番サーバーで実装していくのは、現実的ではありません。
これから制作するものが正常に動くのかなどを確認するためにも、ローカル開発環境を自分の PC 上に作り、動作確認を行うのが効果的な進め方です。

1. 開発ディレクトリをつくる

作業を行う開発ディレクトリを作成してください。作成場所は任意で構いません。私はデスクトップ上に開発フォルダを作成して案件ごとにまとめています。

2. Wordpressをダウンロード

Wordpress の公式サイトから最新バージョンをダウンロード。
zip ファイルを解凍し、1 で作成した作業フォルダに解凍した Wordpress フォルダの中身を全て移動させます。

3. MAMPインストール

Wordpress を動かすためのサーバ環境を構築していきます。といってもすごく簡単で、MAMPをインストールするだけです。

MAMP

4. (任意)バーチャルホストの設定

開発中は通常、MAMP から割り当てられた http://localhost:8888/ で確認しながら行うのですが、このままだと複数の Wordpress を動かしたい場合には不向きです。
MAMP では案件ごとに任意のホスト名を「http://xxxxxx.dev/」のように設定することができ、設定する際は下記のよう行います。

【追記】
この設定を行う際は、MAMPの起動画面の設定からポートのタブをクリックして「webとmysqlのポートを80と3306に設定」を選択しておく必要があります。
この作業前は必ずバックアップをとってください。

4-1. httpd.confを設定する

/Applications/MAMP/conf/apache/httpd.confをテキストエディタで開きます。

ソースコードの 574 行目 付近に下記のコードがあり、それを編集します。

# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

この2行目のコメントアウトを解除し、以下のように変更します。#を消せばよいだけですね。

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

4-2. httpd-vhosts.confを設定する

/Applications/MAMP/conf/apache/extra/httpd-vhosts.confをテキストエディタで開きます。
このファイルを編集することで、バーチャルホストと対象となる作業ディレクトリの紐付けを行います。
27-34行目を見ていただくとバーチャルホストの記述方法サンプルが記載されています。

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

このサンプルを元に編集しますが、全てが必要ではなくDocumentRootServerNameだけを記載しておけば問題ありません。この2点を編集すると以下のようになります。

<VirtualHost *:80>
  DocumentRoot "/Users/user名/開発ディレクトリまでのパス"
  ServerName 任意のホスト名.dev
</VirtualHost>

4-3. hostsを編集する

最後に hosts を編集し「任意のホスト名.dev」へアクセスした時に、「localhost:8888」を返してくれるようにします。

Finder の「移動 > フォルダへ移動」を選択し、/private/etc/と入力し対象のディレクトリに移動し、hosts ファイルを開きます。

hostの設定

この作業前は必ずバックアップをとってください。

httpd-vhosts.confで設定した任意のホスト名を下記のように記述して保存します。

127.0.0.1 任意のホスト名.dev

4-4. MAMPの再起動

MAMPを再起動し、設定したホスト名にブラウザからアクセスできれば、完了です。

5. MAMPでDBを新規作成する

Wordpress のインストールには、データベース(DB)が必要です。この DB には投稿される記事やカテゴリ、タグなどのサイトに関する情報の全てが蓄積されることになります。

5-1. phpMyAdminにログインする

MAMP の初期画面から「スタートページを開く」をクリックし、phpMyAdmin にログインしてください。 初期設定では、下記のユーザー名とパスワードでログイン可能です。

  • ユーザー名: root
  • パスワード: root

phpMyAdmin

5-2. DBを新規作成する

ログインできれば、DBを新規作成します。左メニューから「NEW」を選択し、DB名と照合順序を入力して「作成」をクリックします。

DBの新規作成

DB名は 英数字 で作成するようにしてください。また、照合順序はutf8_general_ciを選択してください。

6. Wordpressのインストール

長らくお待たせしました。やっとインストールの準備が整いました。

6-1. ホストにアクセス

http://localhost:8888/もしくは、任意で設定したホスト名にアクセスすると、インストールを始める下図のような画面が表示されるので、指示に従い次に進みます。

Wordpressのインストール開始画面

6-2. DB情報の入力

DB 情報の入力を求められます。上記までの手順を終えていれば、特に問題なく設定可能です。
データベース接続画面では以下の情報が必要となります。

  • DB名: phpMyAdminで新規作成したもの
  • ユーザー名: root
  • パスワード: root
  • ホスト: MAMPの場合は通常 localhost となります
  • 接頭辞: DBに必要な情報です。3文字までの任意の英字としてください。(変更しなくても構いません)

DB情報の入力

6-3. サイトに関する必要情報の入力

後から変更できるのですが、ユーザー名やパスワードなど基礎的な情報を設定します。

必要情報の入力

6-4. インストールの完了

インストールの完了

上記のような画面が表示されれば完了です。
そのままログイン画面に移動し、先ほど設定したユーザー名とパスワードを入力すると下記のような管理画面が表示されます。

Wordpress管理画面

これで、ローカル環境でWordpressを動かせるようになりました。長丁場、お疲れ様でした。

関連記事