WordPreessでコメントに困った話

きっかけ

ここ数か月、ちょこちょこ仕事の合間をぬって、
自社の高速開発思想「WP10（だぶりゅぴぃてん）」を取り入れた
簡単な社内向けサイトをWordPressで作ってます。

【WP10とは】

今回は、「WP10」の開発手法にのっとって、
・「Advanced Custom Fields」・・・投稿に独自項目を自由に増やせるプラグイン
・「Custom Post Type UI」・・・独自投稿を増やせるプラグイン
の２つを使って短期間での開発を実現しました。

会社へ書籍購入申請で買った書籍情報を、
一覧で見れるというシンプルなサイト。

購入された書籍情報を一覧に簡易表示し、
個々の詳細情報はモーダルダイアログで表示する
いたってシンプル実装です。

今回、書籍を利用した人が
簡単なレビューコメントを登録出来る機能を
追加してみようとして
見事にハマった話をしようと思います。

WordPressには標準関数が数多く提供されており、
今回は、その中のコメント用関数を使って実装。

コメント履歴の一覧、コメントの新規登録を
モーダルダイアログで表示するイメージ。

WordPressのコメント用関数に
登録フォームを自動生成する関数が提供されていた為、
かなりサクッと終わると思ってました。

WordPressで提供されているコメント関数群

ここで思わぬ壁に遭遇

コメント機能は、個々の投稿ページや固定ページに
紐付く形でデータ登録されます。

コメント登録するには、コメントに紐付ける
投稿ページか固定ページのIDが必要になるのですが、
PHPで処理する＝サーバーサイドで実装が必要です。

ですが、モーダルダイアログ上でフォームを生成するには、
ブラウザ側で処理する必要がある。

コメント欄生成関数を使わないという選択

試行錯誤の末、コメント関数を使って
コメント登録フォームを生成するいい方法が見つからないので、
思い切って方向転換する事にしました。

WordPressのコメント欄の生成関数の利用を捨て、
Ajaxでplugin呼び出し
plugi側でコメント登録処理する事にしました。

Ajaxでpluginを使う（WordPress Codex内）

実装イメージとしては、
①コメント登録フォームはHTMLで直書き作成
②コメント登録処理自体はWordPressのpluginで実装
です。

一時はどうなるかと思いましたが、
この機能のおかげでなんとか実装出来ました。

■plugin側イメージ

//Ajaxのリクエスト送信先のパス設定
add_action('wp_head', 'myplugin_js_header' );

//Ajaxから呼び出される関数設定
function myplugin_js_header()
{
    //Ajax側で渡されたPOST値を取得
    $post_id = $_POST['post_id'];

    //あとは、PHP側で処理させたい内容を記載します。
    //処理結果をreturnで戻せば、Ajax側で結果を処理する事もできます。

    //戻り値にはJSON形式で返すと画面側でも後処理しやすいです
    $response = array('result'=> '正常終了しました');
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($response);

    //処理を終わらせておきます。
    die();
}

■Ajax側イメージ

jQuery(function($){

    //画面からAjaxでpluginを呼び出す際に、画面からコメント登録したいpost_idを渡します
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action' : 'myplugin_js_header',
            'post_id': post_id,
        },
        dataType:'json',
        success: function( response ){
            alert( response.result );
        }
    });

さいごに

あまり使われないコメント機能ですが、
今回の利用はかなり勉強になりました。

DB上では独立したテーブルに登録されるので
まだ何か別の利用方法もあるかもしれません。