目次

1. インストール準備
   1. ローカルホスト名とデータベース名を決める
   2. バーチャルホストを設定する
   3. データベースを作成する
2. WordPressをインストールする
   1. インストールファイルを入手する
   2. サイトフォルダの所有者を変更する
   3. インストール
   4. サイトフォルダの権限を変更する
3. Eclipseを使う
   1. WordPressサイトのプロジェクトを作成する
   2. Eclipseから実行＆デバッグするための環境設定を行う
   3. Eclipseの警告をカスタマイズする

 

今回は、WordPressをインストールして、Eclipseから実行＆デバッグできるようにしていきます。

 

1. インストール準備

ここではローカルMac上でWordPressを動かすための準備を行います。

 

ローカルホスト名とデータベース名を決める

編集作業に入る前に、ローカルホスト名、データベース名などを決めておきます。

ホスト名	localwordpress.net
ドキュメントルート	~/WebSites/localwordpress
データベース名	localwordpressdb
データベースユーザー名	wpadmin

 

 

バーチャルホストを設定する

Macローカル上でWebサイトを動かすための、バーチャルホスト設定を行います。詳細は、過去の記事 第5回 バーチャルホスト設定を行う を見てください。

１）httpd-vhosts.conf ファイルを開きます。

/etc/apache2/extra/httpd-vhosts.conf

 

２）ファイルを編集する

下記VirtualHostコンテナを、先ほど決めたホスト名とドキュメントルートに基づいて追記します。

httpd-vhosts.conf

<VirtualHost *:80>
    ServerName localwordpress.net
    DocumentRoot "/Users/username/WebSites/localwordpress"
    ErrorLog "/private/var/log/apache2/localwordpress.net-error_log"
    CustomLog "/private/var/log/apache2/localwordpress.net-access_log" common
    <Directory "/Users/username/WebSites/localwordpress/">
        AllowOverride Fileinfo Options
        order deny,allow
        deny from all
        allow from localhost 127.0.0.1
    </Directory>
</VirtualHost>

 

３）hostsファイルを開きます。

/etc/hosts

 

４）hostsファイルを編集します。

決めたローカルホスト名に基づいて、下記コードを追記します。

hosts

127.0.0.1 localwordpress.net

 

５）Apacheを再起動する

sudo /usr/sbin/apachectl restart

 

 

データベースを作成する

WordPress用のMySQLデータベースを作成します。インストールやエンコード設定の詳細は、過去の記事 第7回 MySQLをインストールしてPHPと接続する を見てください。

１）MySQLにログインします。

mysql5 -u root -p

 

２）データベースを作成します。

mysql> CREATE DATABASE localwordpressdb;

 

３）ユーザーを作成します。※このパスワードを、WordPressインストール時に使うのでメモしておきます。

mysql> CREATE USER wpadmin@localhost IDENTIFIED BY 'PASSWORD';

 

４）作成したユーザーに権限を付与します。

mysql> GRANT ALL PRIVILEGES ON localwordpressdb.* TO wpadmin@localhost;

 

 

2. WordPressをインストールする

WordPressのパッケージをダウンロードして、インストールを行います。

 

インストールファイルを入手する

１）下記サイトにアクセスして、ZIPファイルをダウンロード＆解凍します。

http://ja.wordpress.org

 

２）解凍したフォルダの中身を、最初に決めたドキュメントルート（サイトフォルダ）に移動します。

 

 

サイトフォルダの所有者を変更する

サイトフォルダの所有者をApacheに変更します。

sudo chown -R _www:_www ~/WebSites/localwordpress/

※補足：_wwwがApacheのユーザー名です。

 

 

インストール

１）サイトURLにアクセスします。

http://localwordpress.net

下記のようなwp-config.phpが無いというメッセージが出たら、「設定ファイルを作成する」ボタンを押します。

２）サイトURL、データベース名、ユーザー名、パスワードを入力して、送信ボタンを押します。

 

３）サイト名などを、ガイダンスに従って入力してボタンを押せば、インストール完了です。

 

 

サイトフォルダの権限を変更する

EclipseでProject作成できるようにするために、自分のアカウントにサイトフォルダ全体の編集権限を付与しておきます。

１）テーマフォルダへ移動します

 ~/WebSites/localwordpress

 

２）権限付与

右クリックメニューで「情報をみる」を選択、右下の鍵マークをクリックしてロックを解除、＋アイコンをクリックして自分のアカウントを追加して、アクセス権を「読み/書き」に変更、歯車アイコンをクリックして「内包している項目…」を選択してOKボタンを押します。

 

 

3. Eclipseを使う

ここでは、Eclipseを使って、WordPressのテーマ開発できるようにしていきます。Eclipseのインストール、PHPプラグイン＆デバッガの設定などは、過去の記事 第8回 Eclipse+PDTをインストールして、XDebugでデバッグできるようにする を見てください。

 

WordPressサイトのプロジェクトを作成する

１）Eclipseを起動し、File > New > Project… を開きます。

２）PHP Projectを選択して、Nextボタンを押します。

３）New PHP Projectダイアログの各項目を設定して、Finishボタンを押します。

Project Name	任意の名前 (ex: Local WordPress)
Contents	Create project at existing location
Contents – Directory	サイトフォルダ（ドキュメントルート）
PHP Version	Use default PHP settings
Project Layout	選択不可
JavaScript Support	任意

 

 

Eclipseから実行＆デバッグするための環境設定を行う

Mac OSXに搭載されているPHPとXDebugに関する設定が、既に終了しているとします。

関連記事 >> 第8回 Eclipse+PDTをインストールして、XDebugでデバッグできるようにする

 

サーバーの設定

１）Eclipse > 環境設定を開き、PHP > PHP Servers を選択します。

 

２）Newボタンを押し、各項目を入力してFinish、OKボタンを押します。

Name	任意のプロジェクト名	WordPress Local Server
Base URL	ローカルホスト名	http://localwordpress.net
Local Web Root	サイトフォルダ（ドキュメントルート）	/Users/username/WebSites/localwordpress

 

Eclipseからサイト実行する

１）Run > Run Configurations…を開きます。

２）PHP Web Applicationをダブルクリックします。

３）各項目を設定して、Applyボタンを押します。

Name	任意の実行プロファイル名	WordPress Local Conf
Server Debugger	XDebug
PHP Server	PHPサーバー名	WordPress Local Server
File	/プロジェクト名/index.php	/Local WordPress/index.php
URL – Autogenerate	OFF
URL – URL	サイト実行するURLパス	/

※補足：URLは、トップページを実行するならばスラッシュ”/”を指定します。各記事などのページを実行するならば、各記事へのパーマリンクを指定します。

４）Runボタンを押すと、実行されます。

 

Eclipseからデバッグする

１）Run > Debug Configurations… を開きます。

２）PHP Web Applicationから、先ほど作成したプロファイル（WordPress Local Conf）を選択します。

３）Breakpointにチェックを入れます。
※補足：チェックをONにしていると、最初の行でブレイクします。デバッグがちゃんと機能していることを確認できたら、適宜外してもOKです。

４）Debugボタンを押します。Confirm Perspective Switch ダイアログが表示されたら、Yesを選択します。
※補足：Perspectiveとは
Eclipseには、複数の画面表示設定＝Perspectiveが用意されています。Debugを行うときは、Debug用の画面を選択します。各Perspectiveの切り替えは、画面右上のアイコン、もしくは、Window > Open Perspective で切り替えることができます。

５）index.phpの最初の行でブレイク（→が表示される）したら、Debug成功です。

デバッグしたいファイルを開いて、ブレイクしたい行の左端をダブルクリックすると、Breakpointを設定できます。

 

Eclipseの警告をカスタマイズする

WordPressフォルダをインクルードすると、Problemsタブ（PHP-Perspectiveの場合は、画面下にある）にエラーや警告がわんさか表示されていると思います。
もしProblemsタブが見つからない場合は、メニューバーの、Windows > Show View > Problems で表示されます。

エラーの種類を確認すると、ほとんどがHTML Problemsとなっています。これらは、EclipseがWordPressのインクルードタグなどを解釈して正しいHTML構造を解釈してエラーを出していないことに起因します。

当面、テーマの編集がメインの用途ならば、HTML Problemsの警告を切ってしまうことをオススメします。エラーの出力制御は、２つの側面から行えます。

>>ここでも話題になっていました。Best Answerにある設定を以下で行います。

 

エラー出力対象を限定する

Problemsタブの右側の方にある、小さい逆三角形のアイコンを選択し、Show > Errors/Warnings on Selection を選択します。これによって、選択したファイルのみエラーを出力するように出来ます。

 

エラーの出力内容を限定する

Problemsタブの右側の方にある、小さい逆三角形のアイコンを選択し、Configure Contents…を選択します。

立ち上がったダイアログ左のリストでErrors/Warnings on Selectionを選択した状態で、右下のボックスから”HTML Problems”のチェックボックスを外します。また、Scopeで”On selected element and its childrenを選択します。

これで、デバッグしたいコードが入ったフォルダを選択して、そのフォルダに入った要素全体をエラー出力対象にすることができました。

 

---

 

次の記事：第10回 Perlをインストールして、Eclipse+EPIC+PadWalkerでデバッグできるようにする

前の記事：第8回　Eclipse+PDTをインストールして、XDebugでデバッグできるようにする

 

「MacにWeb開発環境を構築する」の記事