WordPress Popular Postsのレイアウトをカスタマイズ

• CMS
• 2016.09.07

WordPressでブログ内の人気記事を表示するプラグイン、Popula Postsですが、決まった形にしかレイアウト出来なくて、不便だったので自分好みにカスタマイズしてみました！

こちらの記事を参考にさせていただきました。

WordPress Popular Postsの出力をフルカスタマイズするには。

カスタマイズ方法

Popular Postsをインストール後、有効化したらfunctions.phpに下記を追記します。

add_image_size( 'tmb', 200, 134, true ); //アイキャッチのサイズを指定

function popular_post(){
  echo wpp_get_mostpopular($args);
}

function custom_single_popular_post( $content, $p, $instance ){
  $thumb_id = get_post_thumbnail_id( $p->id ); //アイキャッチのID取得
  $img = wp_get_attachment_image_src( $thumb_id, 'tmb' ); //アイキャッチ取得
  $output = '
  <li>
    <a class="zoom" class="zoom" href="' . get_the_permalink($p->id) . '">
      <div class="media"><img src="' . $img[0] . '" alt="' . esc_attr($p->title) . '"></div>
      <div>
        <time datetime="' . $p->date . '">' . date('Y.m.d',  strtotime($p->date)) . '</time>
        <p>' . $p->title . '</p>
      </div>
    </a>
  </li>
  ';
  return $output;
}
add_filter( 'wpp_post', 'custom_single_popular_post', 10, 3 );

1行目はアイキャッチ画像のサイズを指定しています。
お好みでサイズを変更してください。

そして、10〜18行目までをお好みに変更します。
$p->idが記事のIDですので、get_the_permalink($p->id)、とすることで記事のパーマリンクを取得しています。

最後に人気記事を表示したいところへ下記を記述します。

<?php wpp_get_mostpopular( $args ); ?>；

おまけ：SNS Count Cacheのシェア数も表示する

さらにSNS Count CacheというプラグインでSNSでシェアされた数を表示したかったので、下記のように変更してみました。変更したのは10行目、17行目です。

add_image_size( 'tmb', 200, 134, true ); //アイキャッチのサイズを指定

function popular_post(){
  echo wpp_get_mostpopular($args);
}

function custom_single_popular_post( $content, $p, $instance ){
  $thumb_id = get_post_thumbnail_id( $p->id ); //アイキャッチのID取得
  $img = wp_get_attachment_image_src( $thumb_id, 'tmb' ); //アイキャッチ取得
  $scc = scc_get_share_total( array( 'post_id' => $p->id ) );
  $output = '
  <li>
    <a class="zoom" class="zoom" href="' . get_the_permalink($p->id) . '">
      <div class="media"><img src="' . $img[0] . '" alt="' . esc_attr($p->title) . '"></div>
      <div>
        <time datetime="' . $p->date . '">' . date('Y.m.d',  strtotime($p->date)) . '</time>
        <span><i class="fa fa-heart" aria-hidden="true"></i>' . $scc . '</span>
        <p>' . $p->title . '</p>
      </div>
    </a>
  </li>
  ';
  return $output;
}
add_filter( 'wpp_post', 'custom_single_popular_post', 10, 3 );

普通のループ内なら、scc_get_share_total()で取得できるのですが、ここでは10行目で記事のIDを指定しています。

以上で当ブログの一番下にある「人気の記事」のように出力されます。