[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 プラグインの人気記事表示をタグ付けデータで絞り込む方法

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS