ブログ

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

WordPress Popular Postsの出力をフルカスタマイズ

こんにちは。ダイダイデザインの山本です。
先日、とあるWordPress案件で、プラグイン「WordPress Popular Posts」の出力を若干カスタマイズする必要がでました。
基本的には、下記のようにパラメータを変えることでカスタマイズできるのですが、post_htmlの部分で、{thumb}を使うと、そのページへのリンク付きのサムネイル画像が出力されます。<li></li>内を一つのaタグでくくることができません。

//表示させたい場所に記述//php file
<ul>
  if (function_exists('wpp_get_mostpopular')) {
      $arg = array (
          'range' => 'daily',//集計する期間(weekly,monthly,all)
          'order_by' => 'views',//閲覧数で集計(comments(コメント数で集計),avg(1日の平均で集計))
          'post_type' => 'post,page',//ポストタイプを指定(post,page,カスタムポスト名)
          'title_length' => '25',//表示させるタイトル文字数
          'excerpt_length' => '55',//抜粋文字数
          'stats_comments' => '1',//コメント数表示(1 or 0)
          'limit' => 10, //表示数
          'stats_views' => '0',//閲覧数表示(1 or 0)
          'thumbnail_width' => '15',//サムネイルの幅
          'thumbnail_height' => '15',//サムネイルの高さ
          'post_html' => '<li>{thumb}<h1>{title}</h1><p>{summary}</p><div>{stats}</div></li>'//表示されるhtmlの設定({thumb}はリンク付きのサムネイル画像,{title}はリンク付きのタイトル,{summary}は抜粋文)
 );
 wpp_get_mostpopular($arg);//リストが出力される。
 }?>
</ul>

ということで、プラグインのページを拝読。

「WordPress Popular Posts」には、「wpp_custom_html」、「wpp_post」というフィルターフックがあります。
「wpp_custom_html」は、出力するリスト全体をカスタマイズできます。(ループさせるとこからカスタマイズする。リスト表示させるとするなら<ul></ul>内をすべて書ける)
「wpp_post」は、出力する一つの投稿部分をカスタマイズできます。(ループは勝手にしてくれる。<li></li>内をカスタマイズする)

今回は、「wpp_post」でできるので、そちらを使いました。

 

//functions.php

function custom_single_popular_post( $content, $p, $instance ){
     $thumb_id = get_post_thumbnail_id( $post->ID );
     $img = wp_get_attachment_image_src( $thumb_id, 'full' );
     $output = '<li><a href="' . get_the_permalink($p->id) . '" title="' . esc_attr($p->title) . '"><span class="num"></span><span class="box"><span class="img"><img src="' . $img . '" title="' . esc_attr($p->title) . '" width="100" height="70"></span><span class="title"><strong>' . $p->title . '</strong></span></span></a></li>';
     return $output;
}
add_filter( 'wpp_post', 'custom_single_popular_post', 10, 3 );

//get_the_permalink($p->id)//投稿のID取得。
//$p->title//投稿のタイトル取得。
//※画像は適宜取得してください。これはアイキャッチを表示させる

フックさせる関数は、( $content, $p, $instance)という引数を受け取ります。
$contentは、その投稿のHTML。
$pは、その投稿の情報(オブジェクト)。
$instanceは、widget/shortcode/template tagからのオプション情報(配列)。

 

参照  https://github.com/cabrerahector/wordpress-popular-posts/wiki/3.-Filters