[WordPress] WordPress Popular Posts プラグインでの表示を自由にカスタマイズしたい時に便利なフックとその使い方
WordPress Popular Posts プラグインを使用すると閲覧数などから人気記事をランキングで表示することができます。表示内容を設定するパラメータも予め複数用意されているので、ある程度自由な表示が可能です。
しかし、全体のマークアップをまるっと変えてしまいたい時や、用意されていない項目を表示したい場合には限界があります。このプラグインでは、そんな時のためにフィルターフックが3つ用意されています。大変便利ですね。そのフックの使い方メモです。
参考記事
WordPress Popular Posts プラグインの GitHub にフックの使い方が掲載されています。
3. Filters · cabrerahector/wordpress-popular-posts Wiki
こちらの記事では、フックの紹介とプラグインの基本的な使用方法などが参考になりました。
WordPress Popular Posts 3.2.1を徹底的にカスタマイズする方法 | OXY NOTES
人気記事の表示方法
管理画面のウィジェットで「WordPress Popular Posts」をサイドバーへ追加するか、ショートコード、又はテンプレートファイルにて wpp_get_mostpopular() 関数を記入することで、人気記事を表示できます。
テンプレートファイルで呼び出す場合は、以下のように記入します。使用できるパラメータは管理画面の、設定 > WordPress Popular Posts の「Parameters」のタブで確認できます。
if ( function_exists( 'wpp_get_mostpopular' ) ) {
$args = array(
'range' => 'weekly', // 週単位で集計
'post_type' => 'post,page', // ポストタイプを指定
'limit' => 7, // 表示件数を指定
);
wpp_get_mostpopular( $args );
}
ショートコードなら以下のような形です。
[wpp range=weekly order_by=views]
詳しい表示方法は以下のページをご参照下さい。
フックとその使い方
wpp_no_data フック
add_filter( 'wpp_no_data', '関数名', 10, 1 );
wpp_no_data フックでは、データが無い時に表示するHTMLをカスタマイズできます。
wpp_no_data フックの使用例
functions.php などへ以下のように記入すると、表示するデータがない時の表示が変更可能です。
function my_custom_no_posts_found(){
$output = '<p>表示できるデータがありません。</p>';
return $output;
}
add_filter( 'wpp_no_data', 'my_custom_no_posts_found', 10, 1 );
このように表示が変更できました。
wpp_custom_html フック
add_filter( 'wpp_custom_html', '関数名', 10, 2 );
wpp_custom_html フックでは、表示する全体のコードをカスタマイズできます。
マークアップをまるっと変えてしまいたい時や、独自のクラスを付与したい時、用意されていない項目を表示したい時に便利なフックです。
第一引数で記事の以下のようなデータが取得できます。記事IDやユーザーIDも参照できるので、そこからさまざまなデータを取得することが可能です。第二引数では表示記事の設定が取得できます。
array(7) {
[0]=>
object(stdClass)#2084 (5) {
// 記事ID
["id"]=>
string(4) "1177"
// 記事タイトル
["title"]=>
string(18) "記事タイトル"
// 投稿時間
["date"]=>
string(19) "2015-11-8 20:00:00"
// ユーザーID
["uid"]=>
string(1) "2"
// ページビュー数
["pageviews"]=>
string(1) "3"
}
:
:
wpp_custom_html フックの使用例
記事ID・ユーザーIDなどからデフォルトでは用意されていない、タクソノミー情報やユーザー情報なども表示できるようになります。
function my_custom_popular_posts_html_list( $mostpopular, $instance ){
$output = '<section class="popular_posts">';
foreach( $mostpopular as $popular ) {
$output .= '<article>' .PHP_EOL;
// 記事タイトルとそのリンクを表示
$output .= '<h1 class="entry-title"><a href="' . get_the_permalink( $popular->id ) . '">'. esc_html( $popular->title ) .'</a></h1>';
// タクソノミーを表示
$output .= '<p>'. get_the_term_list( $popular->id, 'タクソノミー名' ) .'</p>';
// タグを表示
$output .= '<p>'. get_the_term_list( $popular->id, 'post_tag' ) .'</p>';
// サムネイルを表示
$output .= '<p>'. get_the_post_thumbnail( $popular->id, 'thumbnail' ) .'</p>';
// 投稿者名を表示
$output .= '<p>'. get_the_author_meta( 'display_name', $popular->uid ) .'</p>';
$output .= '</article>' .PHP_EOL;
}
$output .= '</section>';
return $output;
}
add_filter( 'wpp_custom_html', 'my_custom_popular_posts_html_list', 10, 2 );
wpp_post フック
add_filter( 'wpp_post', '関数名', 10, 3 );
wpp_post フックでは、記事ごとに表示される li タグ内の表示をカスタマイズできます。記事部分のみマークアップを変更したい時や、独自クラスを付けたい時、独自の項目を用意したい時に便利なフックです。
第一引数では設定されている post_html が取得できます。第二引数で記事IDなどのデータが取得できます（ 前項でご紹介した wpp_custom_html フックの第一引数と同じ内容です ）。第三引数では表示記事の設定が取得できます。
wpp_post フックの使用例
function my_custom_single_popular_post( $post_html, $p, $instance ){
// 記事タイトルとそのリンクのみを表示
$output = '<li><a href="' . get_the_permalink($p->id) . '" class="my-custom-title-class">' . esc_html( $p->title ) . '</a></li>' ;
return $output;
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );
ウィジェットなどで表示を追加しても、こちらのフックで設定した内容が優先されます。
この3つのフックを使用するとかなり自由な表示ができるようになります。
関連記事
[WordPress] WordPress Popular Posts プラグインの人気記事表示をタグ付けデータで絞り込む方法
1 Comments & Tracbacks