WordPressには、デフォルトで「最近のコメント」ウィジェットがあります。
ただこれだと、どうも味気ない上に、見づらいというか。
そこで、もう少し見やすく分かりやすくするために、自作で「最近のコメント」ウィジェットを以下のような見た目となるように作成してみました。
今回は、このカスタマイズ方法を紹介したいと思います。カスタマイズといっても、基本的にコピペのみで行えるカスタマイズになっています。
目次
主な手順
今回行うテーマカスタマイズの主な手順は以下です。
- functions.phpにコードをコピペ
- style.cssにコードをコピペ
コードを2回コピペするだけなので、かなり手軽に行えるカスタマイズかと思います。
functions.phpにコードをコピペ
まずは、functions.phpに以下のコードを追記する形でコピペしてください。
/////////////////////////////////////////////////// //最近のコメントウィジェット /////////////////////////////////////////////////// class RecentCommentsWidgetItem extends WP_Widget { function __construct() { parent::__construct( 'recent_comments', '最近のコメント(リッチ)',//ウィジェット名 array('description' => '最近投稿されたコメントを表示するウィジェットです。') ); } function widget($args, $instance) { extract( $args ); //タイトル名を取得 $title = apply_filters( 'widget_recent_comment_title', $instance['title'] ); //コメント表示数 $count = apply_filters( 'widget_recent_comment_count', $instance['count'] ); //コメント文字数 $str_count = apply_filters( 'widget_recent_comment_str_count', $instance['str_count'] ); //管理者除外するか $author_not_in = apply_filters( 'widget_recent_comment_author_not_in', $instance['author_not_in'] ); ?> <?php //classにwidgetと一意となるクラス名を追加する ?> <?php echo $args['before_widget']; ?> <?php echo $args['before_title']; if ($title) { echo $title;//タイトルが設定されている場合は使用する } else { echo '最近のコメント'; } echo $args['after_title']; ?> <dl class="recent-comments"> <?php $comments_args = array( 'author__not_in' => $author_not_in ? 1 : 0, // 管理者は除外 'number' => $count, // 取得するコメント数 'status' => 'approve', // 承認済みコメントのみ取得 'type' => 'comment' // 取得タイプを指定。トラックバックとピンバックは除外 ); //クエリの取得 $comments_query = new WP_Comment_Query; $comments = $comments_query->query( $comments_args ); //コメントループ if ( $comments ) { foreach ( $comments as $comment ) { $url = get_permalink($comment->comment_post_ID); echo '<dt>'; echo get_avatar( $comment, '38' ); echo '</dt>'; echo '<dd>'; echo '<div class="recent-comment-author">'; comment_author($comment->comment_ID); echo '</div>'; echo '<div class="recent-comment-date">'; echo comment_date( 'Y/n/d', $comment->comment_ID); echo '</div>'; echo '<div class="recent-comment-title">'; echo '<a href="'.get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID.'">'.$comment->post_title.'</a>'; echo '</div>'; echo '<div class="recent-comment-content">'; $my_pre_comment_content = strip_tags($comment->comment_content); if(mb_strlen($my_pre_comment_content,"UTF-8") > $str_count) { $my_comment_content = mb_substr($my_pre_comment_content, 0, $str_count) ; echo $my_comment_content. '...' ; } else { echo $comment->comment_content; }; echo '</div>'; echo '</dd>'; } } else { echo 'コメントなし'; } ?> </dl> <?php echo $args['after_widget']; ?> <?php } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['count'] = $new_instance['count']; $instance['str_count'] = $new_instance['str_count']; $instance['author_not_in'] = $new_instance['author_not_in']; return $instance; } function form($instance) { if(empty($instance)){//notice回避 $instance = array( 'title' => null, 'count' => 5, 'str_count' => 100, 'author_not_in' => false, ); } $title = esc_attr($instance['title']); $count = esc_attr($instance['count']); $str_count = esc_attr($instance['str_count']); $author_not_in = esc_attr($instance['author_not_in']); ?> <?php //タイトル入力フォーム ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"> タイトル </label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /> </p> <?php //表示するコメント数 ?> <p> <label for="<?php echo $this->get_field_id('count'); ?>"> 表示するコメント数 </label> <input class="widefat" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="number" min="3" max="30" value="<?php echo $count; ?>" /> </p> <?php //コメント文字数 ?> <p> <label for="<?php echo $this->get_field_id('str_count'); ?>"> コメント文字数 </label> <input class="widefat" id="<?php echo $this->get_field_id('str_count'); ?>" name="<?php echo $this->get_field_name('str_count'); ?>" type="number" min="30" value="<?php echo $str_count; ?>" /> </p> <?php //管理者の除外 ?> <p> <label for="<?php echo $this->get_field_id('author_not_in'); ?>"> 管理者の除外 </label><br /> <input class="widefat" id="<?php echo $this->get_field_id('author_not_in'); ?>" name="<?php echo $this->get_field_name('author_not_in'); ?>" type="checkbox" value="on"<?php echo ($author_not_in ? ' checked="checked"' : ''); ?> />管理者のコメントを表示しない </p> <?php } } add_action('widgets_init', create_function('', 'return register_widget("RecentCommentsWidgetItem");'));
今回は、Wordpress管理画面の「ウィジェット」から、取り外しができて、簡単な設定も行えるようにしてみました。
最近のコメントを表示するPHPコードは、以下を参考にさせていただきました。
参考 WordPress「最近のコメント」ウィジェットをプラグイン無しでリッチ表示
style.cssにコードをコピペ
あとはテーマのstyle.cssなどに以下のスタイルシートを貼り付けます。
/************************************ ** 最近のコメントウィジェットのスタイル ************************************/ dl.recent-comments { width:100%; margin: 20px auto; } dl.recent-comments dt{ text-align: left; clear: left; float: left; width: 46px; white-space: nowrap; margin-top: 3px; } dl.recent-comments dd{ margin-left: 0; margin-bottom: 20px; } dl.recent-comments dd .recent-comment-author{ font-weight: bold; } dl.recent-comments dd .recent-comment-content{ font-size:14px; }
これでカスタマイズは完了です。
テーマによってスタイルは微調整する必要はあるかもしれません。
ウィジェットを設置する
あとは、Wordpressの管理画面の「外観 → ウィジェット」をひらきます。
「ウィジェット」画面で、「最近のコメント(リッチ)」ウィジェットをドラッグ&ドロップでウィジェットエリアに配置します。
ウィジェットエリアにウィジェットを設置すると以下のように、ちょっとした設定も行うことができます。
- タイトル:ウィジェットのタイトルの設定
- 表示するコメント数:ウィジェットに最近のコメントを何個まで表示するかを設定
- コメント文字数:コメントの文字数を何文字まで表示するかを設定
- 管理者の除外:管理者コメントを表示するかの設定
設定を変更したら「保存」ボタンを押してください。
あとは、ブラウザから設定したウィジェットエリアを見てみると以下のように表示されているかと思います。
WordPressオフィシャルテーマでもある「Twenty Eleven」でも同様のカスタマイズを行ってもちゃんと動作していました。
まとめ
こんな感じで今回は、「リッチな最近のコメントウィジェット」を追加してみました。
Googleは、コメントも含めてコンテンツの品質を評価しています。
今回のカスタマイズをしたからといって、コメントの品質が上がったりするわけではないですが、たとえ微量であっても、コメント欄の活性化につながれば良いかなと思います。
というわけで、「従来のコメントウィジェットでは物足りない」とか「コメントの書き込み状態を分かりやすくウィジェットで見たい」なんて場合は、今回のカスタマイズを試してみても良いかもしれません。
プラグインで「リッチな最近のコメントウィジェット」を設置するなら、以下のような方法もあります。
この記事のお陰でコメントウィジェットを望み通りのモノに変更できました!とっても嬉しいです、ありがとうございました!