9月 07

WordPressのコメントをOpenID対応にしました。
導入目的はコメント書き込みの敷居をいかに下げるかです。

目次

2系→3系の変更点

mixi OpenIDをWordPressで利用する方法 でも紹介しましたが、「WP-OpenID」プラグインが2系から3系に上がり、名称も「OpenID」プラグインになり、コメントフォームに含めるOpenIDのフィールド名が変わりました。

WP-OpenIDプラグイン 2系
<input type="text" name="openid_url" id="openid_url" />

OpenIDプラグイン 3系
<input type="text" name="openid_identifier" id="openid_identifier" />

設定

設定は、敷居を下げる目的なので、
「Don’t require name and e-mail for comments left with verified OpenIDs」をチェックします。
OpenIDプロバイダーになるつもりはないので「OpenID Provider Options」のチェックは全てはずしておきます。

カスタマイズ

標準ではドーンとOpenID(URL)を入力するフォームを用意するだけの簡素なものなので、あらかじめ主要なOpenIDプロバイダーへのログインボタンを用意したものへとカスタマイズしました。

コメント欄キャプチャ

OpenID認証を利用した場合は、名前とメールアドレスの入力を省くことができる設定にしたので、既存のコメントフォームにOpenIDを入力するフォームだけ追加してもユーザビリティーが悪くなります。

対応策として、「通常のコメントフォーム」と「OpenID対応コメントフォーム」を用意して、デフォルトはOpenID対応、クリックによって通常とOpenID対応がtoggleする仕様にしました。

各(X)HTMLにclassとidを付けます。

  • OpenID対応のコメントフォーム(form)にid=”openid_commentform”を設定
  • OpenID対応のコメント欄(textarea)にid=”openid_comment”を設定
  • 各OpenIDプロバイダーの画像にclass=”openid_submit”、それぞれ個別にidを付ける
  • toggleのスイッチになるリンクにid=”comment_toggle”を設定

javascript(jQuery)を追加します。

jQuery(document).ready(function(){

    jQuery(".openid_submit").click(function(){
        if(jQuery('#openid_comment').val() == ''){
            alert('コメントを入力してください。');
            return false;
        }
        var openid_target= jQuery(this).attr('id');
        var openid_url = '';
        if(openid_target == 'mixi'){
                openid_url = 'https://mixi.jp/';
        }else if(openid_target == 'google'){
                openid_url = 'https://www.google.com/accounts/o8/id';
        }else if(openid_target == 'yahoo'){
                openid_url = 'http://yahoo.co.jp/';
        }else if(openid_target == 'livedoor'){
                openid_url = 'http://livedoor.com/';
        }else if(openid_target == 'hatena'){
                var hatena_id = window.prompt("はてなIDを入力して下さい。","");
                if(hatena_id == null) return false;
                openid_url = 'http://www.hatena.ne.jp/'+hatena_id+'/';
        }else if(openid_target == 'other'){
                var open_id = window.prompt("OpenID(URL)を入力して下さい。","");
                if(open_id == null) return false;
                openid_url = open_id;
        }

        if(openid_url == ''){
            alert('不正なOpenIDです。');
            return false;
        }

        jQuery('#openid_identifier').val(openid_url);
        return true;
    });
    jQuery(".openid_submit").mouseover(function(){
        jQuery(this).css('border-color','#e6db55 #dfcd2a #dfcd2a #e6db55');
    });
    jQuery(".openid_submit").mouseout(function(){
        jQuery(this).css('border-color','#CCCCCC #AAAAAA #AAAAAA #CCCCCC');
    });

    jQuery("#commentform").hide();
    jQuery("#comment_toggle").toggle(
            function(){
                jQuery("#openid_commentform").hide();
                jQuery("#commentform").show();
                jQuery('#comment_toggle').text("OpenID認証のコメント欄に切り換え");
            },
            function(){
                jQuery("#commentform").hide();
                jQuery("#openid_commentform").show();
                jQuery('#comment_toggle').text("通常のコメント欄に切り換え");
            }
    );
});

PHP5.3.0でハマった

このサーバーではWordPressをPHP5.3.0で動かしています。
OpenIDプラグインはPHP OpenID Libraryを内包していて、OpenIDにかかわる実装はこのライブラリに依存していますが、これが5.3.0に対応していないため、素のままでは動きません。

問題の解説と解決方法はこちらのブログが詳細ですので、ご覧ください。
PHP 5.3: 参照渡しの関数/メソッドを定義してた人は call_user_func_array に注意 – 肉とご飯と甘いもの @ sotarok

PHP OpenID Libraryのオフィシャルでも5.2.4までしかテストしてないよと言っているので仕方ないところです。
修正箇所が3箇所なので、パッチを作成しました。パスを変えれば、PHP OpenID Libraryのパッチとしても動くはずです。
wordpress-openid-3.2.3-cloudrop-090907.patch.tar.gz

それから、id:sotarokさんが触れられている時とドキュメントが変わってましたので、触れておきます。

下位互換性のない変更点

旧ドキュメント

引数を参照渡しする関数に値を渡した場合の振る舞いが変更されました。 以前は値渡しとして引数を受け取っていましたが、5.3.x からは warning が生成され、 全ての参照渡しのパラメーターが NULL となります。

現在のドキュメント

引数を参照渡しする関数に値を渡した場合の振る舞いが変更されました。 以前は値渡しとして引数を受け取っていましたが、今は fatal error が発生するようになりました。 参照渡しを期待している関数に定数やリテラルを渡していたコードは、 いったんその値を変数に代入してから関数に渡すよう書き換える必要があります。

25 Responses to “WordPressのコメントをOpenIDに対応した”

  1. ゴン より:

    コメントしてみたかったのでしてみます^^

  2. はじめまして.
    WordPressでOpenID使ってコメントを受け付けようと思って調べててたどり着きました.
    このコメント欄,かなり良さそうなので,できればどのファイルにどのように追記すると実現できるかまとめていただけると助かります.

  3. [...] WordPressのコメントをOpenIDに対応した [...]

  4. テストさせてください。

  5. Ninaaaa より:

    はじめまして。
    コメント欄の敷居を下げる方法を私も模索しております。
    まずは、日本語で、「コメントをどうぞ」としたいのですが。
    方法がわかりません。

  6. sekine より:

    Togawa@寧々派 さん
    コメント欄は各テーマ別ディレクトリーの中にある「comments.php」です。
    テーマによって内容が違うので、細かい部分は手作業でやらないといけないところですが、基本は同じだと思います。
    Javascriptなどはこのページのソースに直接書き込んできますので、参考にしてみて下さい。

    Ninaaaa さん
    多言語対応でないテンプレートなんですね。
    WordPressは多言語対応されているので、以下のように単語や句を__(”)で囲んであげれば、自動的に日本で出力されるようになっています。

    <?php echo 'Leave a Reply' ?>
     → Leave a Reply(そのまま出力)
    <?php echo __('Leave a Reply') ?>
     → コメントをどうぞ(環境によって翻訳されて出力)
    
  7. saku より:

    テストさせていただきます

  8. kyouzaidc より:

    OPENIDで検索してきました。良いエントリーをありがとうございます。

  9. たね より:

    素晴らしいエントリーを有り難うございます。
    テストさせていただきます。

  10. ふぇね より:

    面白いですね~

  11. カグア! より:

    有益情報ありがとうございます。いろいろとハマるポイントがあって大変そうですが、ぜひ入れてみます。

  12. はじめまして!
    私もOpenIDで探してたどり着きました。
    使わせていただきました♪

  13. あ!ごめんなさい。

    認証できるかテストするつもりだったんですが、コメント投稿してしまいました。

    WordPressのOpenIDプラグインそのものは、シンプルなUIなので、こういう改良はありがたいですね。

  14. 試してみたのですが動きませんでした。
    パッチの当て方がわかりません。
    コメント欄(テキストエリア)が消えてしまったり、記入しても「コメントを入力してください!」とエラーが出て書き込めません。

    あと、googleのアカウントの方だと思うのですが、名前のところをクリックすると何かをDLしようとして失敗するようです(謎)

  15. attrip より:

    どれどれ便利なのかテストさせていただきます。

  16. yasu より:

    テストさせていただきました。

  17. テストさせてください

  18. kazuo より:

    テストさせて下さい

  19. katsuo より:

    Tipsありがとうございます。

  20. メガ男 より:

    テスト

  21. test user より:

    すみません、テストさせていただきます。

  22. テスター より:

    Googleでログイン

コメントをどうぞ

通常のコメント欄に切り換え

アカウントを持っているサービスをクリックしてください。

preload preload preload