ブログ

【WP-Ranking PRO】シングルページでカテゴリを判定してランキングを表示させる

wp-ranking_pro

ニュースサイトを運営していると、コンテンツを増やすために様々な要素でランキングを見せる必要が出てまいります。
今回はsingle.phpのページで、記事のカテゴリを判定した上でカテゴリごとのランキングを表示させる記述をご紹介致します。

例)http://otakei.otakuma.net/archives/2016092004.html この記事のカテゴリーは「商品」「経済」となっています。
そこで、この記事の下の方に、商品・経済だけのランキングを表示してみます。

<PHPコード>

<?php
$categories = get_the_category();
$category = $categories[0]->name;
$query = 'use_html_template=0&post_type=post&period=all&limit=5&pc_or_mobile=both&filter_type=category&filter_by='.$category.'&max_post_title=25&html_title_prefix=&html_title_suffix=&html_ranking_prefix=<ul class="wprp-list-single clearfix">&html_ranking_suffix=</ul>&html_ranking_content=<li><a href="[permalink]" title="[title_for_attr]"><img src="[thumbnail]" alt="[title_for_attr]" border="0" width="123" height="123" class="wprp-thumbnail-single wpp_cached_thumb wpp_featured"></a><span class="wprp-num-single">[rank]</span><span class="wprp-post-title-single"><a href="[permalink]" title="[title_for_attr]">[title]</a></span></li>';
global $wp_ranking_pro;
$ranking = $wp_ranking_pro->new_ranking($query);
?>
<?php
echo $ranking->output_ranking();
?>

<CSS>

.wprp-list-single{list-style-type:none;margin:0 0 10px 0;padding-top:5px;border:1px solid #ccc;border-top:none;background:#f9f9f9;}
.wprp-list-single li{line-height:120%;float:left;margin:0 0 0 5px;width:134px;height:200px;border-right:1px dotted #ccc;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.wprp-list-single li:last-child{float:left;margin:0 0 0 5px;width:134px;height:200px;border:none;padding-bottom:15px;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.wprp-thumbnail-single{display:block;border:none;margin:0 0 7px 0;}
.wprp-list-single .wpp_featured{margin:5px;opacity:1;transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;-webkit-transition:opacity .4s ease-in-out;-webkit-transform:rotate(0);-moz-transform:rotate(0);transform:rotate(0);}
.wprp-list-single .wpp_featured:hover{opacity:0.5;}
.wprp-num-single{background:#196A93;color:#FFF;font-size:60%;font-weight:bold;margin-right:5px;padding:0 4px;text-align:center;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.wprp-post-title-single a{text-decoration:none;font-size:12px;font-weight:bold;}
.wprp-post-title-single a:hover{text-decoration:underline;}

<ポイント>

filter_type=category
(カテゴリーで絞り込む)
filter_by='.$category.'
(この記事のカテゴリーを判定する)

上記記述により、それぞれの記事で属するカテゴリーを判定した上でランキング表示させることができます。

<表示イメージ>
表示イメージ

ということで、「商品」「経済」に属している記事だけのランキングが完成します。
関連したニュースのランキングを表示させることで次々に閲覧を誘発し、ページビューUPが期待できます。

■ WP-Ranking PRO
https://plugmize.jp/product/wp-ranking-pro/
■ 公式ダウンロード(無料)
https://wordpress.org/plugins/wp-ranking-pro/

関連記事

WP-Ranking PRO

記事ランキング

ページ上部へ戻る