サイドバーにある「最近のコメント」ウィジェットをおしゃれにカスタマイズ

コメント

サイドバーの「最近のコメント」をイケてるようにする

システムエンジニア(SE)かっきーです。

最近のコメントをサイドバーに出そうとした際、ウィジェットが用意されておりますが、デザインがいまいちで、導入するのを断念したことはありませんか。

今回、コメント用のプラグインをいくつか発見しましたが、どれも最終アップデートから3年ほどがたっており、不安に感じたため、今回はwordpressの既存の「最近のコメント」ウィジェットをカスタマイズしちゃいます。

やり方(1):sidebar.phpなどの入れたい箇所へ

下記のコードを表示させたい箇所に記載します。
phpコードの為、サイドバーで使用させるためにはsidebar.php
トップ画面に入れるにはindex.phpやhome.php等に挿入してください。

投稿記事にはphpが対応していない為、phpに対応させれば投稿記事の中にも記載が可能です。
投稿記事への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>

やり方(2):functions.phpの編集

上記のやり方だと直接phpファイルに書き込まないといけないない為、初心者の方にはちょっと抵抗があるかと思います。

そこでウィジェットを利用してコメントはカスタマイズします。
まずfunctions.phpに下記のコードを記載します。
functions.phpをいじる場合は必ずバックアップを取るようにしてください。

不安な方はfunction.phpの直接編集は危険【Code Snippets】こちらをご覧ください。

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');

これで専用のウィジェットが出来ました。
そして「やり方①:sidebar.php等の入れたい箇所へ」で紹介した、コードを
「好きな名前.php」のファイル形式でそのまま保存します。

テキストウィジェットからの呼び出し

ウィジェットから「好きな名前.php」で保存した内容を呼び出します。

(1)テキストウィジェットで掲載位置を決めます。
    ⇓
(2)内容に下記のショートコードを記載します。
   [myphp file=’好きな名前’]

「好きな名前」は先ほど作ったファイル名になります。

これで好きな箇所にウィジェットを使用し表示させることが出来ます。

簡単に見栄えのいいオシャレな【最近のコメント】ができるので、皆さんも試してみてください。

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です