jQuery Mobile と WordPress のコメント投稿

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

 jQuery Mobile

スマートフォンサイトを jQuery Mobile を使って構築したという記事を書きましたが、その後気づいたことを…

前回書いたようにこのサイトは WordPress を使っています。
WPtap Mobile Detector というプラグインを使い、User Agent を判別してテーマを切り替える方法でスマートフォンサイトを表示しています。
最近は、WordPress で構築したサイトを多く見かけるようになりましたので、同じように WordPress + jQuery Mobile という組み合わせも多いのではないでしょうか。
そこで、ちょっと気づいた事があるのですが、jQuery Mobile だと WordPress のコメント投稿時にページが表示されない。
投稿時というより投稿後のリロード(リダイレクト)されたページが表示されない。
WordPress では、コメント投稿後に自分の書いたコメントをページ上部に表示するように、アンカー(#)付きの URL でリロードしています。
wp-comments-post.php の最後の方の

[php]
$location = empty($_POST[‘redirect_to’]) ? get_comment_link($comment_id) : $_POST[‘redirect_to’] . ‘#comment-‘ . $comment_id;
$location = apply_filters(‘comment_post_redirect’, $location, $comment);

wp_redirect($location);
[/php]

です。

リロード後、自分の投稿したコメントが確認できるので、ありがたい。
ただ、jQuery Mobile の場合は仕様で『#(ハッシュ)』を使ったアンカーが使えません。
jQuery Mobile のページ構造が、内部的なリンク構造を持った複数のページとして『#』を使うということ、Ajaxページのナビゲーション履歴にも『#』を用いている事が、『#』を使ったアンカーが使えない理由です。
だから、よくある『ページの先頭へ』というようなアンカーを用いたリンクは使えないとうわけです。

でも、このままじゃ WordPress + jQuery Mobile の組み合わせでは、コメント投稿時にページが表示されません。
これを解決する方法として一番簡単なのは、上記の wp-comments-post.php のリダイレクト先を書き換えればいい。
ただ、そうなると PC などで見ている通常のサイトもコメント投稿後のページの表示が変わってしまいますので、直接 wp-comments-post.php を書き換えるのはお薦めできないですよね。
コアなファイルを書き換えてしまうと WordPress のアップデート毎に書き換えないといけないし…

そこで、テーマの中の functions.php に関数を記述する方法で対処しました。
同様の方法として、『続きを読む』をクリックした時の URL から『#more』を消すのに使っている方も多いのではないでしょうか?
今回は、『#コメント ID』を消すのではなく、get_permalink() を使いました。

[php]
function custom_comment_post_redirect( $location ) {
$redirect_to = get_permalink();
return $redirect_to;
}
add_filter( ‘comment_post_redirect’, ‘custom_comment_post_redirect’ );
[/php]

動作していますので記述は間違っていないと思いますが、PHP があまり得意ではありませんので、上記のコードを参考にする場合は、お約束のオウンリスクでお願いしますね。(また、こういう記述の方がいいよというのがあれば教えてください。)
これで、WordPress + jQuery Mobile でもコメント投稿後にページを表示し、通常のサイトとスマートフォンサイトとのコメント投稿時のリロード処理をわけることもできました。
functions.php 様々です 🙂

しかし、これだけ Twitter や facebook などのソーシャルメディアが浸透してくると、はたしてブログの『コメント欄』が必要なのかという疑問があったりもする…

スポンサーリンク

[quads id=2]

[quads id=2]

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。