WordPress

WSL + Homestead で WordPress のプラグイン開発環境を作る

投稿日:2017年12月26日 更新日:

1. はじめに

Windows 10 上で WSL + Homestead を使い、WordPress のプラグイン開発環境を作ってみました。

Homestead というのは、Laravel という PHP のフレームワークに関連するツールの1つです。 PHPでの開発に必要なソフトウェアがインストールされた Linux 仮想環境を簡単に導入することができます。Homestead は Laravel に限らず、PHP による開発環境として汎用的に使うことができます。この仮想環境に 新たな Webアプリケーションを追加する操作も非常に簡単ですのでお勧めです。

このページの内容は、Windows 10 に WSL (Windows Subsystem for Linux) と Homestead がインストールされていることを前提としています。

2. 環境

Windows 10 Pro
バージョンは 1709 です。
WSL
導入方法については、「WSL (Windows Subsystem for Linux) の導入と設定」を参照してください。
Homestead v7.0.1
~/Homestead にインストールされているとします。
使用される Linuxディストリビューションは、Ubuntu 16.04 です。

※ 本ページでは、Windows 上で使用するユーザーのユーザー名を foo とします。
~ と書いている部分は、WSL としては /mnt/c/Users/foo、Windows 上では C:\Users\foo を指しています。

3. 作業

1. 今回 WordPress をインストールするディレクトリを用意します

今回は、ユーザーのホームディレクトリ内の work というディレクトリ内に、wordpress という名前のディレクトリとして WordPress をインストールします。/mnt/c/Users/foo/work/wordpressindex.php が入っているイメージです。

このディレクトリはエクスプローラー上で作ってもよいですし、WSL のコマンドラインから mkdir コマンドで作成してもよいです。

2. Homestead に Webアプリケーションの設定を追加します

~/Homestead/Homestead.yml に以下を追記します。

(省略)
folders:
    (省略)
    - map: ~/work/wordpress
      to: /home/vagrant/Code/wordpress

sites:
    (省略)
    - map: wordpress.app
      to: /home/vagrant/Code/wordpress

databases:
    (省略)
    - wordpress
  • この後、Windows (WSL) 側の ~/work/wordpress に WordPress をインストールします。
    • そのパスを、仮想環境側の /home/vagrant/Code/wordpress にマッピングします。
  • Windows 側の Webブラウザから wordpress.app というホスト名で WordPressのサイトにアクセスできるようにします。
    • その Webサイトのドキュメントルートは、仮想環境側の /home/vagrant/Code/wordpress としています。
  • 仮想環境側に、wordpress という名前のデータベース(MySQL)を生成させます。

3. Windows 側の hosts ファイルに以下を追記します

192.168.10.10  wordpress.app

※ このファイルは、c:¥windows¥system32¥drivers¥etc\hosts にあります。管理者権限でメモ帳を起動してこのファイルを編集して下さい。

4. 新しい Webアプリケーション をHomestead に反映させます

$ vagrant reload --provision

仮想環境が起動します。

5. 仮想環境に ssh接続します

$ ssh vagrant@192.168.10.10

※ IPアドレスは、Homestead.yaml に記述されています。

6. WP-CLI を導入します

# wp コマンドを配置するディレクトリを用意します(どこでもよいです)
$ mkdir ~/bin

# そこに移動します
$ cd ~/bin

# コマンドとなるファイルをダウンロードします
$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

# 実行権限を与えます
$ chmod u+x wp-cli.phar

# コマンド名を分かりやすい名前に変更します
$ mv wp-cli.phar wp

7. wp コマンドの補間が効くようにします

# 補間スクリプトを置くディレクトリを用意します(どこでもよいです)
$ mkdir ~/script

# そこに移動します
$ cd ~/script

# コマンド補間スクリプトをダウンロードします
$ curl -O https://raw.githubusercontent.com/wp-cli/wp-cli/master/utils/wp-completion.bash

このファイルを自動で読み込むようにします。

$ vim ~/.bashrc

以下を追記します

if [ -f ~/script/wp-completion.bash ]; then
    . ~/script/wp-completion.bash
fi

すぐに反映したい場合は、以下を実行します。

$ . ~/script/wp-completion.bash

8. PHPUnit を導入します。

# phpunit コマンドを配置するディレクトリに移動します
$ cd ~/bin

# phpunitをダウンロードします
$ wget https://phar.phpunit.de/phpunit.phar

# 実行権限を与えます
$ chmod u+x phpunit.phar

# コマンド名を分かりやすい名前に変更します
$ mv phpunit.phar phpunit

Homestead では phpunit に alias の設定がされていますが、この設定は使わないので無効にします。

# ~/.bash_aliases の所有者を自分に変更します
$ sudo chown vagrant ~/.bash_aliases

# エイリアスの設定ファイルを編集します
$ vim ~/.bash_aliases

以下をコメントアウトします

alias phpunit='vendor/bin/phpunit'
   ↓
#alias phpunit='vendor/bin/phpunit'

これで次回ログイン時から無効になります。

既に有効になっているエイリアスは以下のコマンドで無効にします。

$ unalias phpunit

9. WordPress をインストールします

$ cd ~/Code/wordpress
$ wp core download --locale=ja

10. Windows 上の Webブラウザでアクセスします

Homestead.yamlhosts ファイルに記述した wordpress.app を Webブラウザのアドレスバーに入力して Enter を押します。

WordPress の設定ページが開きます。

WordPressに最初にアクセスした時のページ

以下のように、各項目を入力します。

データベースの設定
データベース名
Homestead.yaml で設定したデータベース名です。今回の場合は、wordpress となります。
ユーザー名
Homestead によって作成されたユーザー名は、homestead になります。
パスワード
Homestead によって作成されたパスワードは、secret になります。
データベースのホスト名
local と入力します。
テーブル接頭辞
wp_ のままでよいです。

この先では、サイトのタイトルやサイトのユーザー名を設定します。それらはお好きな名前にして下さい。

WordPressのトップページ

WordPress のインストールはこれで終了です。

11. プラグインの雛形を用意します

仮想環境内に ssh接続した状態で作業を進めます。

今回は、test-plugin1 という名前のプラグインを作成します。

# svnコマンドが使えるように subversion をインストールします
$ sudo apt-get install subversion

# WordPress のディレクトリに移動します
$ cd ~/Code/wordpress

# プラグインの雛形ファイルを生成します
$ wp scaffold plugin test-plugin1 --activate

以下のようなファイル・ディレクトリが生成されました。

作成された雛形ファイル

次に、テスト用のWordPress環境を作成します。

# プラグインのディレクトリに移動します
$ cd wp-content/plugins/test-plugin1

# テスト用のWordPress環境を作成します
# /tmp/ 以下に テスト用WordPressやテスト用ファイルが配置されます
# 第一引数: DB名 
# 第二引数: DBユーザー名
# 第三引数: DBパスワード
# 第四引数: DBホスト名
# 第五引数: WPバージョン
$ bash ./bin/install-wp-tests.sh wordpress homestead 'secret' localhost latest

Homestead には Subversion がデフォルトで入っていないため、あらかじめインストールしておく必要があります。これをインストールしないで install-wp-test.sh を実行してしまうと、/tmp/ 以下に中途半端にファイルが生成された状態で処理が止まってしまいます。その場合は、以下のコマンドで /tmp/ 以下のディレクトリを削除してから再度 install-wp-test.sh を実行してください。

$ rm -rf /tmp/wordpress-tests-lib

12. PHPUnit を実行します

プラグインのディレクトリにいる状態で、phpunit コマンドを実行します。

$ phpunit
phpunitを実行した様子

テストのPHPファイルは tests/test-sample.php となります。最初の状態では、必ず成功するテストが1つだけ記述されていますので、上記のような結果が表示されました。

13. コード規約チェックツールの導入

簡潔で参考になる説明を見付けました。

こちらに書いてある通りに、仮想環境内でパッケージのインストール・設定を行います。

例として、生成されたプラグインの雛形ファイルに対して規約のチェックを実行してみた結果は以下となります。

wpcsコマンド(phpcsのエイリアス)を実行したところ

14. プラグインの開発を開始する

今回の場合、test-plugin1.php を中心にプラグインを開発していきます。

また、tests ディレクトリ以下にテストのファイルを作成していきます。

参考

関連

WordPress

WordPress:本文に<p>や<br>が自動で追加されないようにする方法(wpautop を無効にする)

2018.01.30
WordPress

WordPress プラグイン開発における多言語対応(gettextを利用する場合)

2018.01.15
WordPress

WordPress に関する srcset と sizes 属性値の簡単な説明

2017.12.28
Windows

WSL (Windows Subsystem for Linux) の導入と設定

2017.07.12
Windows

wsl-terminal を更新する

2018.01.16

Homestead + Xdebug + PhpStorm でリモートデバッグ環境をつくる

2017.08.23

スポンサードリンク



📂-WordPress
-, ,

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット(広告など)を表示するコードを自分で書く

Table of Contents Plus (TOC+) という WordPressプラグインが生成した目次の直前に、ウィジェット を表示する方法について説明します。 ※ 2018年6月6日: 目次 …

WordPressで作られたサイトの利用テーマを調査する

ブラウザでサイトを見ていて、「これは WordPressを使っているのか?」「WordPressを使っているとしてら、何のテーマを使っているのか?」を調査する方法です。 ※ 100%分かるわけではあり …

WordPress

WordPress をフレームワークとして利用する

目次1. はじめに2. WordPress をフレームワークとして利用する場合に便利な機能3. ブログでない Webサイトに WordPress を使う試み3-1. したいこと3-1-1. メインのコ …

WordPress

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生する

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生した場合の対応方法について書きました。

WordPress

WordPress:本文に<p>や<br>が自動で追加されないようにする方法(wpautop を無効にする)

目次1. WordPress の wpautop 関数2. WordPress は投稿や固定ページの本文に対して wpautop 関数を実行します3. 本文に対する wpautop 関数を無効にする方 …