WordPress の開発環境をつくる
WordPress の開発環境をつくる方法について書いておく。
このブログで公開している WordPress プラグインもこの記事で紹介する環境で作成している。だいぶ前に Eclipse を更新したときに XAMPP 周りの設定忘れでハマり、環境構築を手順化しなければと思っていたのだがすっかり忘れていた。
たまたまこのことを思い出す機会に恵まれたので、やる気がある内にサクッと書いてしまおう。
1. Eclipse を入れる
はじめに Eclipse を入れる。Eclipse には様々な仕向けが用意されているが、以下のページで公開されている Pleiades Ultimate 版 (JRE あり) を選ぶ。
英語版のほうが軽いとか開発対象にあわせて環境を分けたほうがよいという意見もあるが、面倒なので日本語 (Pleiades) の全部入り (Ultimate) にしておく。英語が読めても母国語のほうが視認性で勝るし Web 系開発ではさまざまな言語や環境を横断的に利用することが多いので、それらが集約されていると便利だと思う。
Pleiades Ultimate の ZIP をダウンロードしたら、なるべく浅い階層で展開する。前述のプロジェクト ページでも注意されているが Eclipse のフォルダ構成は深いため Windows 環境だとパスの長さ制限によって正常に展開できない可能性がある。
私の場合は C:\App\Eclipse に展開している。Program Files に入れたいところだが Windows Vista を利用しているので UAC が面倒だ。UAC 自体には賛成しているがインストーラによる支援が受けられないものについてはこのように運用するしかないだろう。Eclipse 本体の可搬性を考えると外付け HDD に入れるのもよさそうだ。
この記事を書いた時点では C:\App\Eclipse\3.5 をインストール先にしていましたが、パスにピリオドが含まれると setup_xampp.bat を実行したときに一部のパス設定が正しく生成されない問題が起きます。よって記事中のパスを C:\App\Eclipse\3.5 から C:\App\Eclipse に変更しました。
Eclipse のインストールは以上で完了。以降の手順では C:\App\Eclipse にインストールしたものとして話を進める。
2. XAMPP を初期化する
Eclipse の Pleiades Ultimate には開発環境の他にも便利ツールがたくさん付属しているのだが XAMPP もそのひとつである。XAMPP については以下を参照のこと。
Eclipse 付属の XAMPP は C:\App\Eclipse\xampp に格納されている。このフォルダの中にある setup_xampp.bat というバッチ ファイルを実行することで XAMPP が初期化される。これを忘れると Apache などが正しく動作しないので注意すること。
3. Apache のドキュメント ルートを変更する
ドキュメント ルートとは XAMPP 上で Apache を起動した状態で http://localhost にアクセスしたときのディレクトリである。Web サイトのルートとして考えるとわかりやすい。このブログに例えると https://akabeko.me/ がドキュメントルートとなり、その中の blog というディレクトリに WordPress をインストールしていることになる。
初期状態のドキュメント ルートは XAMPP フォルダ内の htdocs というフォルダなので、今回の手順のように浅さを重視しても C:\App\Eclipse\xampp\htdocs という少し深い階層となる。ここでは頻繁にファイル操作をおこなうことになるので、なるべく扱いやすい場所にしたい。
というわけでルートの場所を任意のフォルダに設定してみる。
まずはドキュメント ルートにしたいフォルダを作成する。場所は仮に C:\App\Dev\Web としておく。次にそのフォルダ内に httpd.conf という名前のテキストファイルを作成。以下の内容を記述して保存する。
※パスの区切り文字はスラッシュになるので注意すること。
DocumentRoot "C:/App/Dev/Web"
<Directory "C:/App/Dev/Web">
Options Indexes FollowSymLinks Includes ExecCGI
Order deny,allow
Deny from All
Allow from localhost 127.0.0.1
</Directory>フォルダとファイルが準備できたら C:\App\Eclipse\xampp\apache\conf に移動。その中にある httpd.conf を開く。そしてファイル末尾に以下の設定を追加する。
Include "C:/App/Dev/Web/httpd.conf"これで XAMPP から Apache を起動したときに以下の処理がおこなわれるようになる。
- 標準の設定ファイルである
C:\App\Eclipse\xampp\apache\conf\httpd.confを読み込む Include "C:/App/Dev/Web/httpd.conf"という記述によりユーザー定義の設定ファイルを読み込みにゆく- ユーザー定義の設定で標準設定を上書きする
ドキュメント ルートの設定を変えるなら標準の設定ファイルを直に編集する方法もある。しかしなるべく標準ファイルを弄りたくないのと他の設定を上書きしたくなったとき、ユーザー定義のファイル編集で済ませられることを考えると今回の方法のほうがよいと思う。
4. MySQL 上にデータベースを用意する
はじめに XAMPP のコントロール パネルを起動する。これは C:\App\Eclipse\xampp\xampp-control.exe となる。起動すると以下のようなウィンドウが表示されるので Apache と MySQL の Start ボタンを押す。
Apache と MySQL が起動するとコントロール パネルは以下のような状態となる。
MySQL の欄にある Admin... というボタンが有効になっているはずなので押してみる。するとブラウザで MySQL の管理画面が開く。
トップ画面の上部に「新規データベースを作成する」という欄があるので、データベースに wordpress、照合順序となっているドロップダウンリストから utf8_general_ci を選択する。
複数の WordPress をテストしたい場合はデータベース名を wordpress-29 のようにバージョン名を入れるなり wordpress-plugin-test のような目的別の名前にするとよい。私の場合は面倒なのでひとつの名前にしている。スクリーンショットにある akabeko というのがそれ。
今回は wordpress という名前で作成することにする。入力欄を埋めて作成ボタンを押すと、以下のようにデータベース生成がおこなわれる。
まだ何もテーブルを定義していない空のデータベースが用意された。WordPress はここへさまざまな設定を記録してゆく。
5. MySQL のユーザーを作成する
データベースにアクセスするためのユーザーを作成する。管理画面の上段にある「特権」というタブをクリックして以下のページに移動する。
ページ中ほどにある「新しいユーザーを追加する」をクリックするとユーザー作成画面となる。
今回は wpdev という名前のユーザを作成する。パスワードは自前で用意してもよいが「パスワードを生成する」と書かれている部分のとなりにある「生成する」ボタンを押すとランダムな文字列が生成され、その横の「コピー」ボタンを押せば、パスワード入力欄に設定してくれる。
これらの入力を終えたらページ下段のグローバル特権を設定する。とりあえず「すべてチェックする」をクリックしておく。これで wpdev というユーザーはあらゆるデータベース操作をおこなえるようになった。
すべての設定が終わったのでページ右下の「実行する」ボタンを押すと以下のようにユーザが作成される。
6. WordPress を配置する
WordPress を以下のページから入手する。
現時点では WordPress 2.9.2 が最新版となる。ZIP として公開されているのでこれをダウンロードして「3. Apache のドキュメントルートを変更する」で用意したフォルダ内へ展開する。
他のシステムを試したくなったときルートに WordPress のファイルが置かれていると面倒なので、そのまま展開するのではなく blog フォルダーなどを作成して配置することを推奨する。今回はドキュメント ルートの下に wordpress というディレクトリを作成してそこに展開したものとする。これまでの手順どおりなら C:\App\Dev\Web\wordpress がWordPress のルートになる。
この中に readme.html や index.php などが格納された状態になっていることを確認しておく。
7. WordPress のインストール
まず、XAMPP 上で Apache と MySQL が起動されていることを確認する。これらの起動方法については 「4. MySQL 上にデータベースを用意する」の冒頭を参照のこと。
確認できたらブラウザのアドレスバーに http://localhost/wordpress/ と入力して、アクセスする。すると以下のようなページが表示されるので「wp-config.php ファイルを作成する」というボタンを押す。
ボタンを押すと以下のようなページが表示されるので「次に進みましょう !」ボタンを押す。
WordPress のデータベース設定ページが表示されるので事前に作成しておいたデータベースとユーザー情報を入力して「作成する」ボタンを押す。
これで準備は完了。以下のページに移動するので「インストールを実行しましょう !」ボタンを押す。
ページが移動するのでブログの題名とメールアドレスを入力する。入力を終えたら「WordPress をインストール」ボタンを押す。
ようやくインストール完了。「ログイン」ボタンを押せばお馴染みの管理画面になる。
ここまで完了したら WordPress のディレクトリを Eclipse に取り込んで編集することで WordPress 側に変更が反映されるようになる。
それにしても記事が長い。長すぎる。スクリーンショットを撮りはじめたことを少々、後悔。これほど画像点数が多くなるとはおもわなかった。