WordPressに少しリッチな「最近のコメント」ウィジェットを設置するカスタマイズ方法。プラグイン不要コピペのみ。

WordPressには、デフォルトで「最近のコメント」ウィジェットがあります。

Wordpressデフォルトの「最近のコメント」ウィジェット

ただこれだと、どうも味気ない上に、見づらいというか。

そこで、もう少し見やすく分かりやすくするために、自作で「最近のコメント」ウィジェットを以下のような見た目となるように作成してみました。

最近のコメント(リッチ)ウィジェットの表示

今回は、このカスタマイズ方法を紹介したいと思います。カスタマイズといっても、基本的にコピペのみで行えるカスタマイズになっています。

スポンサーリンク
レクタングル(大)広告

主な手順

pexels-photo-68562-large

今回行うテーマカスタマイズの主な手順は以下です。

  1. functions.phpにコードをコピペ
  2. style.cssにコードをコピペ

コードを2回コピペするだけなので、かなり手軽に行えるカスタマイズかと思います。

利用中のテーマがSimplicity 2.1.8以降の場合は、この実装が施されているのでカスタマイズ不要です。

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「最近のコメント」ウィジェットをプラグイン無しでリッチ表示

functions.phpの編集に失敗した場合は重大なエラーが出ます。PHP編集に慣れていない場合は、戻すことができなくなる場合もあるかもしれないのでバックアップしてから編集してください。

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」でも同様のカスタマイズを行ってもちゃんと動作していました。

    「Twenty Eleven」テーマで最近のコメントウィジェットの動作確認

    まとめ

    こんな感じで今回は、「リッチな最近のコメントウィジェット」を追加してみました。

    Googleは、コメントも含めてコンテンツの品質を評価しています。

    サイト管理者が作成したメインコンテンツだけでなく、UGCのように外部のユーザーが作ったコンテンツ、たとえそれがコメントであってもそのページの品質を評価する対象になる。したがって、ページ全体としてのクオリティを高めなければならない。
    コンテンツが最も重要なのは言わずもがなですが、権威あるページからの被リンクはコメントよりも価値があり、コメントもSEOにおいては価値があるということをGoogleのイリーズ氏が明言しました。良質なコンテンツで被リンクもコメントも集めましょう。

    今回のカスタマイズをしたからといって、コメントの品質が上がったりするわけではないですが、たとえ微量であっても、コメント欄の活性化につながれば良いかなと思います。

    というわけで、「従来のコメントウィジェットでは物足りない」とか「コメントの書き込み状態を分かりやすくウィジェットで見たい」なんて場合は、今回のカスタマイズを試してみても良いかもしれません。

    プラグインで「リッチな最近のコメントウィジェット」を設置するなら、以下のような方法もあります。

    最近、コメント欄に書き込みがあったかどうか、サイト上からでもわかるようにしたく思いました。そこで、サイドバーに「最近のコメン...

    『WordPressに少しリッチな「最近のコメント」ウィジェットを設置するカスタマイズ方法。プラグイン不要コピペのみ。』へのコメント

    1. 名前:よしぱん 投稿日:2016/08/25(木) 13:08:48 ID:05f467af0

      この記事のお陰でコメントウィジェットを望み通りのモノに変更できました!とっても嬉しいです、ありがとうございました!

    2. アバター画像 名前:わいひら 投稿日:2016/08/25(木) 18:02:42 ID:d2af57c93

      記事がお役に立てたのであれば幸いです。
      このコメントウィジェットが素適なサイトに利用してもらえて嬉しいです。

    3. 名前:Lognote 投稿日:2016/09/21(水) 12:15:19 ID:945c61ce4

      いつも拝見しております。
      こちらのコードも使わせていただいているのですが、
      function.phpの56行目の下に、それから63行目のはではないでしょうか。
      そうでないと表示は問題ないですがコード上でエラーが出ました。
      私の勘違いなら申し訳ございません。

    4. 名前:Lognote 投稿日:2016/09/21(水) 12:17:43 ID:945c61ce4

      コードをそのまま記述したら消えてしまいましたのでもう一度書きます、すみません……
      function.phpの56行目の下に/dd、それから63行目のdivはddではないでしょうか。

    5. アバター画像 名前:わいひら 投稿日:2016/09/21(水) 18:08:16 ID:00703a618

      コードをチェックしてみたところ、僕の見たところではddは問題ないように思います。
      けれど、余計なdivが一つあったようです。
      コードを修正して改行を入れて見やすくしておきました。
      ご指摘ありがとうございます!

    6. 名前:Lognote 投稿日:2016/09/22(木) 11:54:01 ID:ea998e73b

      なるほど、div一つで済んだのですね。
      ddから修正してしまったので私の勘違いでした。
      コードまた参考にさせていただきます!

    7. 名前:ともき 投稿日:2018/12/15(土) 19:37:38 ID:3440d1a44

      わいひらさん、初めまして。

      mixhostのファイルマネージャーからfunctions.phpを開いてコードをコピペしたところ86行目で

      PHP Parse error: syntax error, unexpected ‘}’, expecting end of file in /workspace/Main.php on line 86

      というエラーが出てしまいます。

      恥ずかしながら私はプログラミングの知識が皆無なので修正方法が分かりません。
      お手数をお掛けしますが修正方法のご教示をいただけたら幸いです。

    8. アバター画像 名前:わいひら 投稿日:2018/12/18(火) 21:58:20 ID:667c03c3a

      申し訳ないですが、それだけの情報では、何が原因かわかりません。
      指摘されている行数部分のコードを見ても、何が原因かわからない場合は、PHP編集はやめておいた方が良いかもしれません。