【WordPress】Popular Postsの表示をカスタマイズする方法

・その１：テンプレートタグを使う方法
・その２：フィルターフックを使う方法

方法は２種類あり、その１のほうが簡単で多くのサイトで紹介されている方法です。その２はかなり細かいカスタマイズが可能です。

その１：テンプレートタグを使う方法

ウィジェットで、PHPを実行できるプラグインを導入する

似たようなプラグインはいろいろありますが、私はこれを使ってます。

コードを貼り付ける

<?php if (function_exists('wpp_get_mostpopular')) {
 ob_start();
 wpp_get_mostpopular('limit=6&range=monthly&order_by=views&post_type=post&stats_comments=0&thumbnail_width=90&thumbnail_height=90&stats_views=0');
 $popular = ob_get_clean();
 $popular = str_replace('<ul>', '<ul class="postrank">', $popular);
 echo $popular; 
} ?>

パラメータは､Wordpressの管理画面のWordPress Popular Postsの設定画面の「Parameters」タブのところにすべて掲載されているのでそれをみればすぐにわかります。

「 $popular = str_replace('<ul>', '<ul class="postrank">', $popular);」のところで、ulタグを置き換えて、class名をつけています。

ob_start();から出力された文字列が、 $popular = ob_get_clean();で、$popular変数に代入されるので、その中身を置換して、 echo $popular; で出力するということをしています。

この方法で、class名をつけたりするような変更にもある程度は対応できます。

■参考
･2. Template tags · cabrerahector/wordpress-popular-posts Wiki · GitHub

その２：フィルターフックを使う方法

テーマファイルのfunctions.phpに追記することで、wpp_get_mostpopular()自体の動作？が変更できます。かなり細かいところまでカスタマイズできるので、今までできないとあきらめてたこともできるかと思います。

//---------------------------------------------------------
// custom_single_popular_post
//---------------------------------------------------------
function custom_single_popular_post( $content, $p, $instance ){

     $img = get_the_content_image();

     $output = '<li><a href="'.get_the_permalink($p->id) . '" title="'.esc_attr($p->title).'" target="_self"><img src="'.$img.'" title="'.esc_attr($p->title).'" alt="'.esc_attr($p->title).'" width="90" height="90" class="wpp-thumbnail wpp_cached_thumb wpp_first_image" /></a> <a href="'.get_the_permalink($p->id).'" title="'.esc_attr($p->title).'" class="wpp-post-title" target="_self">'.esc_attr($p->title).'</a></li>';

	if(is_admin()){ $output = $content; }

     return $output;
}
add_filter( 'wpp_post', 'custom_single_popular_post', 10, 3 );

※get_the_content_image()は、記事の画像のサムネイルを取得する自作関数です。「記事の一番最初の画像を取得してサムネイルにする方法」などを参考にしてください。

「if(is_admin()){ $output = $content; }」のように管理画面の場合だけ、元の値を返すようにしないと、管理画面までもこのフィルターフックの影響を受けて表示が変わってしまうので注意してください。

■参考
・3. Filters · cabrerahector/wordpress-popular-posts Wiki · GitHub
・WordPress Popular Postsの出力をフルカスタマイズするには。 | ダイダイデザイン

■その他、参考になりそうなページ
・WordPress Popular Posts をフィルターフックしてカスタマイズ | Web遊戯
・WordPress Popular Posts 3.2.1を徹底的にカスタマイズする方法 | OXY NOTES