nikaido

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

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

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

想定する承認フローは、

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

です。

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

記事の目次

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

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

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

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

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

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

  1. まずVirtualBoxVagrantをPCにインストールします。既に入っている人は飛ばしてください。

  2. 公式ではオプションになっていますが便利なので「vagrant-hostsupdater plugin」をインストールします。
    これはVagrantで立ち上げたゲストOSの情報をhostsファイルに自動で追加/削除してくれるプラグインですが、自分でhostsファイルを書き換えても問題はありません。
$ vagrant plugin install vagrant-hostsupdater
  1. vagrant boxをダウンロードします。
$ vagrant box add miya0001/vccw
  1. Zipファイルをダウンロードし、プロジェクトフォルダに解凍します。
    ここにChefのレシピファイルが入っています。

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

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

MailCatcherの導入

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

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

  1. 立ち上げたゲスト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 ~]$
  1. インストールコマンドを入力します。
[vagrant@vccw ~]$ curl -L https://raw.githubusercontent.com/vccw-team/activate-mailcatcher/master/setup.sh | bash
  1. http://vccw.dev:1080/ にアクアスするとこのような画面が表示されます。

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

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

必要なプラグインをインストール

ゲストOSを起動後、WordPress の管理画面を開きます。もちろん既にvagrant upしていたら飛ばしてください。

$ vagrant up

http://vccw.dev/wp-admin/ or http://192.168.33.10/wp-admin/でログイン画面を表示します。

初期のユーザー名、パスワードは

Username: admin
Password: admin

です。

デフォルトの設定では英語が選択されているので、[Setting > General > site Language]を日本語に変えます。

[プラグイン > 新規追加] から「Peter’s Collaboration E-mails」「Peter’s Post Notes」「User Role Editor」「WP Multibyte Patch」をインストールし、有効化します。

MailCacherはマルチバイト文字の扱いが苦手みたいで、日本語の入ったメールを送信するとサービスが落ちてしまします。その対策として、WP Multibyte Patchをインストールしておきます。

プラグインなどの設定

まず、テスト用のユーザーを作成します。ポイントは担当者の権限を「寄稿者」にすることです。それ以上の権限グループだと公開権限までが付与されてしまい、承認フローが成り立たなくなります。

ユーザー 役割 権限グループ
担当者 記事を作成する担当者 寄稿者(公開権限なし)
上長 記事をチェックする管理者 編集者

寄稿者権限だとメディアをアップロードすることができないので、[ユーザー > User Role Editor]で寄稿者に「upload_files」の権限を付与します。

[設定 > 公開承認ワークフロー] の「グループ別承認者」の欄で、グループ名・寄稿者・承認者を登録し、承認フローを設定します。

※今回は寄稿者と承認者を紐付ける設定ですが、投稿タイプや投稿カテゴリごとに承認者を設定するなど色々できます。

承認フローのテスト

承認フローのテスト担当者でログインし、投稿記事を作成します。その際、Peter’s Post Notesの機能で「ノート追加」という枠が追加されているので、そこに上長宛のコメントを記入します。

そして「レビュー待ちとして送信」を押すとメールが送られます。

MailCatcherを見るとメールが送られているのが分かります。

次に上長でログインして、承認を差し戻ししてみます。差し戻し方法は、記事を下書き保存に戻すとできます。コメントを入力し、ステータスを下書きに変え、下書き保存してみてください。

MailCatcherを見るとメールが送られているのが分かります。

これで一連のフローが出来ました。いかがででしたしょうか?

最後に

TAMではWordPressなどCMSを使ったWebサイトの制作も行っています。

デモや提案をご希望の方は、お問い合わせページよりご連絡ください!

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら