【popular posts】WPP_Queryクラスを使い、ランキングをカスタマイズして表示しよう。
こんにちは、カスミです。
さて以下のようなお悩みをお持ちでしょうか？
popular postsプラグインを使って、ワードプレスサイトに記事のランキングを表示させたい！
ランキングを好きなようにカスタマイズして、任意の箇所に表示させたい！
このような悩みを解決致します。
本記事では、popular postsプラグインにある、WPP_Queryクラスを使って、任意にカスタマイズしたランキングを表示する方法について解説致します。
popular postsプラグインをインストール
popular postsプラグインをワードプレスにインストールしましょう。
管理画面に入り、プラグイン新規追加よりpopular postsと検索すれば出てきます。
インストールしたら有効化してください。
実装サンプルコード
<?php
$cat = get_the_category();
$cat = $cat[0];
// $wpp_query_idsにランキング配列を格納
if ( function_exists( 'wpp_get_mostpopular' ) ){
$wpp_option = array( // ランキングの設定
'range' => 'weekly',//集計期間。 daily, weekly, monthly, all のいずれかを指定
'post_type' => 'post',//投稿タイプを選択
'order_by' => 'views',
'term_id' => $cat->term_id, //カテゴリーページで、現状いるページのカテゴリのみ、ランキング表示する時
'limit' => 5
);
$wpp_query = new WPP_Query( $wpp_option );
$wpp_query_ids = array_map(
function( $wppost ){
return (int)$wppost->id;
}, $wpp_query->get_posts()
);
}
?>
<!-- ランキングを表示 -->
<ol class="rank_list">
<?php
$wpp_args = array(
'posts_per_page' => '5',
'post_type' => 'post',
'post__in' => $wpp_query_ids, // 先ほどのランキング配列を入れる
'orderby' => 'post__in' // 配列の順番で表示する
);
$wpp_query = new WP_Query($wpp_args);
?>
<?php if ($wpp_query->have_posts()) : ?>
<?php while ($wpp_query->have_posts()) : $wpp_query->the_post(); ?>
<?php $cat = get_the_category(); ?>
<?php $cat = $cat[0]; ?>
<!-- ランキングに入れたい内容を入れる -->
<li><a href="<?php the_permalink(); ?>">
<p class="blog_image"><img src="<?php echo catch_that_image('thumbnail'); ?>" class="ofi" alt="<?php the_title(); ?>"></p>
<div>
<p class="blog_cate"><?php echo get_cat_name($cat->term_id); ?></p>
<p class="blog_title"><?php the_title(); ?></p>
</div>
</a></li>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ol>
上記は実際にカスタマイズした、ランキングのサンプルコードになります。
こちらをランキングを表示したいテンプレートファイルにコピペで完了です。
詳細は次章より説明致します。
WPP_Queryクラスを使って、ランキング配列を作る
<?php
$cat = get_the_category();
$cat = $cat[0];
// $wpp_query_idsにランキング配列を格納
if ( function_exists( 'wpp_get_mostpopular' ) ){
$wpp_option = array( // ランキングの設定
'range' => 'weekly',//集計期間。 daily, weekly, monthly, all のいずれかを指定
'post_type' => 'post',//投稿タイプを選択
'order_by' => 'views',
'term_id' => $cat->term_id, //カテゴリーページで、現状いるページのカテゴリのみ、ランキング表示する時
'limit' => 5
);
$wpp_query = new WPP_Query( $wpp_option );
$wpp_query_ids = array_map(
function( $wppost ){
return (int)$wppost->id;
}, $wpp_query->get_posts()
);
}
?>
WPP_Queryクラスを使って、ランキング順の配列を作ります。
上記ソース内の$wpp_option内でどのようなランキングを表示するかカスタマイズできます。
以下簡易的なカスタマイズの内容です。
range
集計期間を設定できます。週間、月間のランキングなど
post_type
投稿タイプを選択します。デフォルトの投稿のランキングを表示したい場合はpostです。
term_id
カテゴリー事にランキングを表示した場合はこちらにカテゴリーのスラッグを入れます。
必要に応じて使い分けましょう。
また上記サンプルコードにはない設定もできます。
popular postsプラグインの設定画面、パラメーターより詳細を確認できます。
WP＿Queryで記事を取得
<!-- ランキングを表示 -->
<ol class="rank_list">
<?php
$wpp_args = array(
'posts_per_page' => '5',
'post_type' => 'post',
'post__in' => $wpp_query_ids, // 先ほどのランキング配列を入れる
'orderby' => 'post__in' // 配列の順番で表示する
);
$wpp_query = new WP_Query($wpp_args);
?>
<?php if ($wpp_query->have_posts()) : ?>
<?php while ($wpp_query->have_posts()) : $wpp_query->the_post(); ?>
<?php $cat = get_the_category(); ?>
<?php $cat = $cat[0]; ?>
<!-- ランキングに入れたい内容を入れる -->
<li><a href="<?php the_permalink(); ?>">
<p class="blog_image"><img src="<?php echo catch_that_image('thumbnail'); ?>" class="ofi" alt="<?php the_title(); ?>"></p>
<div>
<p class="blog_cate"><?php echo get_cat_name($cat->term_id); ?></p>
<p class="blog_title"><?php the_title(); ?></p>
</div>
</a></li>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ol>
最後にwp_Queryを使って、記事を取得します。
wp_Queryを使う事で、どのページでも任意で設定した記事一覧を表示する事が可能です。
$wpp_args配列内で、前章で作ったランキング配列の変数をpost__inに代入します。
同時にorderbyにpost__inを代入する事でランキング順に記事を配列してくれます。
最後にwhileループ内で、ランキングに表示するタイトル・サムネ・リンク先をWPテンプレートタグを用いて入れればOKです。
上記サンプルコードをコピペすれば、リンク先・タイトル・サムネ（記事内の最初の画像）は出力されます。
以上で完了です。
まとめ
popular postsプラグインのWPP_Queryクラスを使う事で、とても簡単にランキングをカスタマイズできるのでお勧めです。
※注意点として、popular postsプラグインのバージョン4.0以降でないとWPP_Queryクラスは使えないです。
WPP_Queryクラスを使わず、カスタマイズしたい方は以下記事を参考にしてください。
以上で解説を終わります。
