WordPressに承認申請や差し戻しを行う承認フローを導入し、コメントも添えてメールで連絡する方法

先日お客様から「WordPressで承認フローの仕組みはできないか？」というお問い合わせをいただき、プラグインを使って簡単にデモをしてきました。

「Peter’s Collaboration E-mails」というプラグインと同じ作者が提供する「Peter’s Post Notes」を使って実現させますが、ディレクターさんでもさくっとデモ環境をつくれるので紹介します。

想定する承認フローは、

公開権限のない担当者がページを作成
公開権限のある上長にページの内容の確認依頼をメールで行う
確認した上長は、内容に問題がなければ公開処理を行う
もし内容に問題があれば、差し戻しを行い、問題箇所を指摘するメールを送る
担当者はページを修正し、2から行う

です。

でははりきっていきましょー。

記事の目次

VCCWでWordPressの環境をさくっと構築
- MailCatcherの導入
必要なプラグインをインストール
- 「Peter’s Collaboration E-mails」
- 「Peter’s Poat Notes」
- 「User Role Editor」
- 「WP Multibyte Patch」
プラグインなどの設定
承認フローのテスト

VCCWでWordPressの環境をさくっと構築

まず WordPress の開発環境を、VCCWで構築します。

VCCWは、Vagrant + Chef + WordPressという仕組みを使って、自分のPC内にWordPressが動作する仮想サーバを簡単にセットアップすることができるとても便利なツールです。

複数人でWordPressサイトの開発を行う時、このVCCWの設定ファイルをGitなどで管理・共有することで、同じ環境を配布できるのでプロジェクトの進行がスムーズになります。

導入手順は、公式サイトの「Getting Started」で書かれている通りでとても簡単です。

こちらにも記載しておきますので、Terminalなど黒い画面にコマンドをコピペしていってください。

まずVirtualBoxとVagrantをPCにインストールします。既に入っている人は飛ばしてください。
公式ではオプションになっていますが便利なので「vagrant-hostsupdater plugin」をインストールします。
これはVagrantで立ち上げたゲストOSの情報をhostsファイルに自動で追加/削除してくれるプラグインですが、自分でhostsファイルを書き換えても問題はありません。

$ vagrant plugin install vagrant-hostsupdater

vagrant boxをダウンロードします。

$ vagrant box add miya0001/vccw

Zipファイルをダウンロードし、プロジェクトフォルダに解凍します。
ここにChefのレシピファイルが入っています。

解凍したフォルダに移動します。（執筆時のバージョンは2.17.0ですが、解凍したフォルダ名に合わせて変更してください。）

$ cd vccw-2.17.0

Vagrantを立ち上げますが、初回はサーバを構成したり、WordPressをインストールしたりするので多少時間がかかりますので、弊社で絶賛募集中の採用ページでも見ながら気長に待ってください！

$ vagrant up

MailCatcherの導入

VCCW では、メールの送信テストができる「MailCatcher」というツールもサポートしており、今回はこれもインストールしておきます。

MailCatcherを入れておくとゲストOS内からメールを外に出さずにメール送信を確認することができるので、ダミーメールアドレスのままテストができたり、自分のメールボックスがテストメールだらけにならないですみ色々お得です。

立ち上げたゲストOSにログインします。

$ vagrant ssh
Last login: Wed Nov  4 05:26:31 2015 from 10.0.2.2
                   ___           ___           ___
      ___         /  /\         /  /\         /__/\
     /__/\       /  /:/        /  /:/        _\_ \:\
     \  \:\     /  /:/        /  /:/        /__/\ \:\
      \  \:\   /  /:/  ___   /  /:/  ___   _\_ \:\ \:\
  ___  \__\:\ /__/:/  /  /\ /__/:/  /  /\ /__/\ \:\ \:\
 /__/\ |  |:| \  \:\ /  /:/ \  \:\ /  /:/ \  \:\ \:\/:/
 \  \:\|  |:|  \  \:\  /:/   \  \:\  /:/   \  \:\ \::/
  \  \:\__|:|   \  \:\/:/     \  \:\/:/     \  \:\/:/
   \__\::::/     \  \::/       \  \::/       \  \::/
       ~~~~       \__\/         \__\/         \__\/

http://vccw.cc/

Initial code by Takayuki Miyauchi.
https://github.com/miya0001
[vagrant@vccw ~]$

インストールコマンドを入力します。

[vagrant@vccw ~]$ curl -L https://raw.githubusercontent.com/vccw-team/activate-mailcatcher/master/setup.sh | bash

http://vccw.dev:1080/ にアクアスするとこのような画面が表示されます。

※ 筆者の環境ではゲストOSの再起動後は MailCatcher が自動で立ち上がってくれませんでした。そのような時は vagrant sshで接続し、IPアドレス付きのコマンドで起動してあげてください。

[vagrant@vccw ~]$ mailcatcher --http-ip 192.168.33.10
Starting MailCatcher
==&gt; smtp://127.0.0.1:1025
==&gt; http://192.168.33.10:1080
*** MailCatcher runs as a daemon by default. Go to the web interface to quit.