WordPressでブログを運営していると、たまにもらえるコメントが凄くうれしいですよね。
今回はWordPressのサイドバーに表示される、「最近のコメント」一覧をおしゃれにカスタマイズする方法にチャレンジしました。
顔と吹き出しで、コメントした人が話している雰囲気にしてみましたよ。
スポンサーリンク
「最近のコメント」をカスタマイズ
通常のコメントは味気ない
WordPressの標準で入っている「最近のコメント」は少し味気ないですよね。
表示されるのはコメントがあった記事のタイトルと、それにコメントした人の名前だけです。
これをおしゃれにカスタマイズしてみたいと思います。
こちらを参考にさせていただきました
参考にさせていただいたのは超大御所ブログ寝ログさん。
こちらのコードを参考に、自分にあった表示方法にしてみました。
そのままだと
寝ログさんのコードではコメント一覧の中で、コメントした人のアイコン画像が<dt>で、コメント部分が<dd>といった定義リストと呼ばれるタグで表示しています。
しかしWordPress標準のコメント欄は、<ul>と<li>のリストになってるんですよね。
この違いによって、少し思った通りの表示にできない部分が出てくる可能性があります。
あくまで私が使っているテーマ、そして私が指定した色、という条件のもとでの話ですが、そのままコピペしてみたところ、次のような想定外の表示になってしまいました。
- 上の「最新の投稿」には指定したカード形式の表示が適用されているけど、下の「最近のコメント」ではカード形式にならない。
- 上の「最新の投稿」と下の「最近のコメント」で余白の幅が合わない。
- 上の「最新の投稿」の文字色が白になったため背景と同化して見えなくなった。
などの事が起きてしまいました。
これはあくまで私が使っているテーマで、さらにそのテーマのCSSも少しいじってあるから起きた現象で、こうならない場合がほとんだと思います。
とは言え私は私のブログを思った通りにカスタマイズしたい！！
ということで改造します。
寝ログの管理人わいひらさんも「テーマによってスタイルは微調整する必要はあるかもしれません。」とおっしゃってますしね！
少しイジりました
ということで、次の目的のために少しイジりました。
- カード形式でコメントを一覧にする。
- 他のウィジェットと同じような表示になるようにコメントリストを<li>にする。
- 顔アイコンから吹き出しでコメントが表示されるようにする。
1番めの「カード形式」についてはすでに土台はできています。
サイドバーウィジェットの中身をマテリアルデザイン風のカード表示にする方法はこちら。
また、3つめの目標を達成するため、こちらのサイトを参考にさせていただきました。
ありがとうございます。
こうなったよ
寝ログさんのコードに手を加えて、自分好みの表示にした結果がこちら。
コメントした人のアイコンから吹き出しが出るようにしました。
コードはこんな感じ
今回寝ログわいひらさんのコードを参考に、少しいじったコードがこちら。
ご利用になる場合は必ずバックアップをとってからコピペしてくださいね。
WordPressの管理画面 ＞ 外観 ＞ テーマの編集
と進んで、function.phpを開きます。
下記のコードをコピーしてfunction.phpの最後の?>の前に貼り付け。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
//*** 最近のコメント（リッチ）ウイジェット ここから ***// 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 '<ul>'; echo '<li>'; echo get_avatar( $comment, '38' ); 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-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 '<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 '</li>'; echo '</ul>'; } } 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");')); //*** 最近のコメント（リッチ）ウイジェット ここまで ***// |
次にカスタマイザーを開いて、
追加CSSを選択。
次のコードをコピーして貼り付け。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.recent-comment-author { font-size: 0.9em; } .recent-comment-date { font-size: 0.3em; } .recent-comment-title { font-size: 0.6em; background-color: #FBF4BB; margin: 12px 0 3px; padding: 7px; } .recent-comments img { float: left; margin-right: 10px; font-size: 2em; } .recent-comments a { padding-left: 5px; } .recent-comment-content { position: relative; padding: 6px; background-color: #FFF; filter: alpha(opacity=50); -moz-opacity: 0.5; margin: 18px 0 5px; font-size: 0.8em; border-radius: 8px; border: 2px solid #CE7940; } .recent-comment-content::before{ content: ''; position: absolute; display: block; width: 0; height: 0; left: 1px; top: -15px; border-right: 15px solid transparent; border-bottom: 15px solid #CE7940; border-left: 15px solid transparent; } .recent-comment-content::after{ content: ''; position: absolute; display: block; width: 0; height: 0; left: 1px; top: -12px; border-right: 15px solid transparent; border-bottom: 15px solid #FFF; border-left: 15px solid transparent; } |
ウィジェットを挿入
これだけでは実はこのコメント欄は表示されません。
寝ログわいひらさんのコードは、標準のコメントとは別に「リッチなコメントウィジェットを追加する」ためのコードなのです。
ということで
WordPressの管理画面 ＞ 外観 ＞ ウィジェット
と進んで、「最近のコメント（リッチ）」をサイドバーの好きな場所に追加します。
これで新しいコメントウィジェットが表示されたはず。
もしWordPress標準のコメントウィジェットを設置していた場合は、忘れずにサイドバーから撤去しておいてくださいね。
コメントを大切に
コメントにもSEO的な効果があるというのが一般的な意見です。
こちらの記事は大変参考になります。
また寝ログわいひらさんもおっしゃっているように、コメント欄を飾ることで少しでもコメントがもらえるようなサイトになると、SEO面だけではなくモチベーション的にもいいことですよね。
ということで、わからないところとかあればこちらの記事にコメントよろしくお願いします。
少しでも誰かの参考になれば、まぐれヒット。
コメント
コメントはありません。