WordPress「最近のコメント」ウィジェットをプラグイン無しでリッチ表示

最近、多少なりともブログの記事にコメントをいただけるようになり、「最近のコメント」ウィジェットを使ってみることにしました。

いざ設置したところ、記事タイトルと投稿者名だけという味気ないもので、これでは誰の目にもつかないなと思いました。
WordPress標準ウィジェットなので、さすがにタイトルリンクは記事ページではなく、コメント掲載位置にページ内リンクされてはいるものの、投稿者名前後の逐語訳的な「に」や「より」が何ともピンとこない体裁。

ページタイトルだけではクリックを喚起させる要因が何もないので、アバター画像、コメント抜粋文、投稿日付などを付け、ブログ内を回遊してもらいたいところです。

意外と少ない「最近のコメント」プラグインとPHPコード

早速希望する機能を満たしたコメントプラグインを探すことにしました。
2つほど見つかったのですが、いずれも最後のアップデートから2～3年過ぎている模様。

• WP-RecentComments
  Last Updated: 3 years ago
• Better WordPress Recent Comments
  Last Updated: 2 years ago

レビューの多いWP-RecentCommentsをインストールしてみたのですが、結果は「loading...」という文字がサイドバーに表示されるのみ。
これに対するFAQとして、公式サイトにはfooter.phpに<?php wp_footer(); ?>が未記入かJavaScriptライブラリーの変更という注意書きがあり、後者を再度試みるもloadingのままなのでアンインストールしました。

もう一方も先立つプラグインと同様に久しくアップデートされていないことから、WordPress最新版との互換性を考慮し、早々に諦めることにしました。

さて、そうなるとサイドバーに最近のコメントを表示するプログラムが必要になり、参考になるコードをググってみたのですが、これが意外と少ないことに気づきました。
少ないというか、私の希望するようなものはひとつもありませんでした。

プラグインもコードもなし。
おそらくSNSの浸透により、コメントはあまり重視されていないんですね。

とはいえ、初期の目的もあり、またウェブマスターオフィスアワーでお馴染みのGoogleのJohn Mueller（ジョン・ミューラー）氏も確か「コメントもコンテンツの一部」と見なしているという発言があったので、自作することにしました。

サイドバー掲載のリッチな「最近のコメント」

左側がWordPress標準ウィジェットです。
右側が今回ご紹介する「最近のコメント」の表示デモになります。

• アバター画像サムネイル
• 「に」「より」を消した投稿者名
• コメント抜粋文
• 投稿日付

これらを実装します。

掲載方法は2通りあります。

1. ウィジェット使用
   ウィジェットからショートコードを呼び出すコードをfunctions.phpに記入し、テキストウィジェットを使ってサイドバーの任意の位置に掲載する方法。
2. sidebar.php使用
   サイドバーを構成するsidebar.phpに直接記入し、決まった位置に掲載する方法。

functions.php

1の方だけfunctions.phpに下記コードを記入します。
これによりショートコードをウィジェットから呼び出すことができます。
ウィジェットに書いたPHPを有効にするプラグインもありますが、セキュリティ上推奨されていませんので、ショートコードを使います。

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}
 
add_shortcode('myphp', 'Include_my_php');

mycomments.phpまたはsidebar.php

1の方は下記コードをコピペしてmycomments.php(任意)といったファイル名で保存します。日本語が文字化けしないように、文字コードはUTF-8です。

2の方はsidebar.phpの掲載したい位置に下記を記入します。

<dl class="mycomment">
<?php
$args = array(
'author__not_in' => '1', // 管理者は除外
'number' => '3', // 取得するコメント数
'status' => 'approve', // 承認済みコメントのみ取得
'type' => 'comment' // 取得タイプを指定。トラックバックとピンバックは除外
);
// The Query
$comments_query = new WP_Comment_Query;
$comments = $comments_query->query( $args );
// Comment Loop
if ( $comments ) {
foreach ( $comments as $comment ) {
$url = get_permalink($comment->comment_post_ID);
echo '<dt>';
echo get_avatar( $comment, '35' );
echo '</dt>';
echo '<dd>';
echo '<span class="my_author">';
comment_author($comment->comment_ID);
echo '</span>&nbsp;:&nbsp;';
echo '<a href="'.get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID.'">'.$comment->post_title.'</a><br />';
echo '<span class="my_comments_content"><i class="fa fa-comments"></i>&nbsp;';
$my_pre_comment_content = strip_tags($comment->comment_content);
 if(mb_strlen($my_pre_comment_content,"UTF-8")>30) {
$my_comment_content = mb_substr($my_pre_comment_content,0,30) ; echo $my_comment_content. '...' ;
} else {echo $comment->comment_content;};
echo '&nbsp;(';
echo comment_date( 'n/d', $comment->comment_ID);
echo ')</span></dd>';
}
} else {
echo 'コメントなし';
}
?>
</dl>

4～7行目はコード内のコメントアウト部分を参照してください。
17行目の「35」でアバター画像のサイズを指定。
24行目の「<i>から</i>」まではFont Awesomeを使ったコメントのWebフォントです。
26-27行目の「30」は抜粋文字数。
適時変更してください。

style.css

お使いのテーマ内にあるstyle.cssに追加します。

dl.mycomment {
	width:100%;
	margin: 0 auto;
	}
dl.mycomment dt{
	text-align: left;
	clear: left;
	float: left;
	width:40px;
	white-space: nowrap;
 	padding-top: 16px;
	}
dl.mycomment dd{
	margin-left: 0;
	padding: 1px 0 5px 0;
	border-bottom: #C3CDCE 2px dotted;
 	padding-top: 16px;
	}
dl.mycomment dd:last-child{
	border-bottom: #fff 0px dotted;
	}
dl.mycomment dd span.my_author{
	font-weight: 600;
	}
dl.mycomment dd span.my_comments_content{
	font-size:14px;
	}

CSSは参考とし、テーマにあったご希望のスタイルで調整してください。
なお、私の環境下では、スマホ用のCSSを指定しなくても、レスポンシブWebデザインは崩れずにレイアウトできました。

テキストウィジェットで掲載位置を指定

1の方のみテキストウィジェットを掲載したい位置に追加し、下記ショートコードを記入してください。

タイトル

最近のコメント(任意)

内容

[myphp file='mycomments']

「mycomments」は上記のmycomments.phpと符合していますので、ファイル名を変更された方はこちらも同名にしてください。

WordPress標準ウィジェットよりもリッチな「最近のコメント」をプラグイン無しで設置したい方におすすめしたい機能です。