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 が発生するようになりました。 参照渡しを期待している関数に定数やリテラルを渡していたコードは、 いったんその値を変数に代入してから関数に渡すよう書き換える必要があります。

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

  1. てすと より:

    ゴーグルでてすと

  2. no name より:

    コメントテストさせてください

  3. takablo より:

    どうなるんだぁ?

  4. すごいですねー。

  5. test より:

    testtest

  6. まつつね より:

    コメントテストです

コメントを残す

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

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

preload preload preload