コメントの投稿毎に付いている「返信」ボタンをカスタマイズする
配布用のWordPressテーマを作っていた際に、コメントの投稿毎(=投稿されたコメント毎)に付いている「返信」ボタンをカスタマイズする必要があったので覚書き。
ワンオフサイトではコメントそのものがほぼ使わない機能なので、今回はかなりニッチでピンポイントな内容。
使わない人は使わないし、使う人は使う。そんな話。
で、このコメントの「返信」ボタンというもの、通常はコメント一覧を呼び出すwp_list_comments()の中に表示される。
具体的に言えば、以下のような感じで出力されてくるやつ。
<div class="reply"> <a rel="nofollow" class="comment-reply-link" href="http://example.com?replytocom=1#respond" onclick="return addComment.moveForm( "div-comment-1", "1", "respond", "1" )" aria-label="コメントの投稿者 に返信">返信</a> </div> <!--※↑長ったらしいので適当なところで改行してます。-->
普通だったらCSSだけで適当にスタイル付けたりすればいいんだけど、必要に駆られて、div.replyだとかaタグ等にクラスを付与したり、これのDOMの構造を弄くらなければならなくなった。
コメントテンプレートそのものを自作する場合は、comment_reply_link()で第一引数の$argsを指定すればおおよその部分は変更できるものの、これだとコメントのループそのものを自前で用意する必要がある。
オリジナルサイトとかを作る分にはそれでもいいんだろうけど、はっきり言って配布用のテーマを作る際に余計なテンプレートは作るのはイヤだ。
…というわけで、とりあえずいつも通りソースコードを読む。
wp-includes/comment-template.phpの中をざらっと眺めていたら、こういった記述を発見した。
function get_comment_reply_link( $args = array(), $comment = null, $post = null ) { $defaults = array( ~~~略~~~ return apply_filters( 'comment_reply_link', $args['before'] . $link . $args['after'], $args, $comment, $post ); }
うん。フィルターフックあるやん。
上記の、フィルター引数の’comment_reply_link’, $args[‘before’] . $link . $args[‘after’]となっているところが、「返信」ボタンのHTMLを表している。
functions.phpに以下の用な感じで追記すればこの内容を弄くれる。
function theme_comment_reply_link( $html ) { $html = preg_replace( '~<div class="reply">~', '<div class="reply custom-reply"><div class="reply-inner">', $html ); $html = preg_replace( '~</div>~', '</div></div>', $html ); $html = preg_replace( '~<a(.+?)class=\'(.+?)\'(.+?)~', '<p><a\1class=\'\2 custom-reply-link\'\3', $html ); $html = preg_replace( '~</a>"~', '</a></p>', $html ); return $html; } add_filter( 'comment_reply_link', 'theme_comment_reply_link' );
置換はかなり適当だけど、だいたいこんな感じ。
自分の好みの形に合わせて、適宜変更すればいいと思う。