
最近、多少なりともブログの記事にコメントをいただけるようになり、「最近のコメント」ウィジェットを使ってみることにしました。
いざ設置したところ、記事タイトルと投稿者名だけという味気ないもので、これでは誰の目にもつかないなと思いました。
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通りあります。
- ウィジェット使用
ウィジェットからショートコードを呼び出すコードをfunctions.phpに記入し、テキストウィジェットを使ってサイドバーの任意の位置に掲載する方法。 - 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');
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> : '; 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> '; $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 ' ('; 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標準ウィジェットよりもリッチな「最近のコメント」をプラグイン無しで設置したい方におすすめしたい機能です。
はじめまして。
いきなりの質問で申し訳ございません。
wordpressを始めたばかりの初心者なのですが、アフィリ課様の記事を拝見し、同じようにいじってみたのですが、
最近のコメント欄には
[myphp file=’mycomments’]
とだけ表示され、コメントなどが表示されません。
表示されない原因など推測できますでしょうか。
テーマはbizvectorを利用しております。
宜しくお願い致します。
アフィリ課福山です。
ご利用ありがとうございます。
メールにご連絡差し上げました。
こちらでもめいさんと同様の症状が出ます。解決法などありますでしょうか?
ESDさんへ
[myphp file='mycomments']
とだけ表示されるということは、2通りある内のウィジェット使用を採用されたと思われますので、functions.phpにショートコードをウィジェットから呼び出すコードが正確に書かれていないのではないでしょうか。
テーマによっては書く位置が異なる場合がありますので、functionで始まるご紹介のコードをfunctions.phpの
< ?php?>
内に記載するか、もしくは紹介コードを末尾に書くと機能するかもしれません。
なおその際は、自己責任でバックアップをおとりいただきお試しください。
よろしくお願いします。
[…] 参考:WordPress「最近のコメント」ウィジェットをプラグイン無しでリッチ表示 […]
いつもお世話になっております。
サイト全体が見栄えが良くなったので非常に感謝しています。
あと一つ希望があるのですが吹き出しマークのすぐ横に記事内の総コメント数を表示するといったことは可能でしょうか?
よろしければ対応の方お願いします!!
使わせていただきました。味気なかったウィジェットが、とても楽しくなりました。もっともほとんどコメントのこないサイトではありますが。
ありがとうございました。
2.のsidebar.phpに直接記述する方法で、無事、「最近のコメント」をウィジェットに表示することができました。ありがとうございました。自分のサイトでも紹介させていただきます。https://aviation-assets.info/column/column_web-site/