WordPressPopularPostsでカテゴリ別の人気記事ランキングを表示する方法

どうも、(@nekonotesou)です。 人気記事のランキングを、簡単に表示できるプラグイン「WordPress Popular Posts」 これを使用して、今見ている記事と、同じカテゴリの人気記事を表示するカスタマイズをしてみました。 wordpress-popular-posts-by-category-01

スポンサーリンク

 WordPress Popular Postsのダウンロード・インストール

WordPressプラグイン Word Press Popular Posts 初めにプラグインをインストールして有効化します。  

sidebar.phpの編集

sidebar.phpの表示したい箇所に、以下のコードを貼り付けます。

<?php
if (is_single() || is_category()) {?>
<h4 class="menu_underh2">「<?php the_category(', ') ?>」の人気記事</h4>
<?php
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID;
?>
<div id="popular-post"><div>
<script type="text/javascript">
$(function(){
    $('#popular-post ul li').each(function(i){
        $(this).attr('class','number' + (i+1));
    });
});
</script>
<?php
if (function_exists('wpp_get_mostpopular')) {
$args = '
limit=5&
range=monthly&
order_by=views&
thumbnail_width=100&
thumbnail_height=100&
cat="'.$now_id.'"&
stats_views=0&
stats_comments=0';
wpp_get_mostpopular($args);
}
}else{
?>
<h4 class="menu_underh2">今注目の人気記事</h4>
<div id="popular-post"><div>
<script type="text/javascript">
$(function(){
    $('#popular-post ul li').each(function(i){
        $(this).attr('class','number' + (i+1));
    });
});
</script>
<?php
if(function_exists('wpp_get_mostpopular')){
$args = '
limit=15&
range=weekly&
order_by=views&
thumbnail_width=100&
thumbnail_height=100&
cat="'.$now_id.'"&
stats_views=0&
stats_comments=0';
wpp_get_mostpopular($args);
}
}
?>

 

パラメーターの設定

人気記事をどのように表示するか、条件を設定、変更します。

  • limit=10
  • range=all
  • order_by=views
  • thumbnail_width=100
  • thumbnail_height=100
  • stats_views
  • stats_comments

 

limit

人気記事を表示する数。 10だと、最大で10記事表示します。  

range

いつの期間のデータを利用するか。

  • all(全期間)
  • daily(1日)
  • weekly(一週間)
  • monthly(一ヶ月)

 

order_by

人気記事をどの順番に並べるか。

  • views(アクセス数)
  • comments(コメント数)
  • avg(1日の平均アクセス数)

 

thumbnail_width=100 thumbnail_height=100

サムネイルの画像サイズ。 thumbnail_width=100(横100px) thumbnail_height=100(縦100px)  

stats_views

ページビューの表示・非表示。 1→表示 0→非表示  

stats_comments

コメント数の表示・非表示。 1→表示 0→非表示  

style.cssの編集

style.cssの1番下に以下のコードを追加します。

/*-- カテゴリ別人気記事 --*/
.wpp-list li {
    min-height : 100px ;
    padding : 1px 2px 1px 2px ;
    border-bottom : 1px solid #D3D3D3 ;
}
.wpp-list li a{
    text-decoration: none;
    font-size: 15px;
    color: #333;
}
.wpp-list li a:hover {
    color: #FF337A ;
}
#popular-post a {
    font-weight : normal ;
    text-decoration : none ;
}
#popular-post a:hover {
    color: #FF337A ;
}
#popular-post ul li {
    position : relative ;
    line-height: 50%;
}
#popular-post {
    counter-reset : wpp-ranking ;
}
#popular-post ul li a {
    text-decoration: none;
}
#popular-post ul li:before {/*ナンバリング表示*/
    position : absolute ;
    top : 10px ;
    left : 0px ;
    color : #fff ;
    counter-increment : wpp-ranking ;
    text-align : center ;
    z-index : 9999 ;
    float : left ;
    line-height : 30px ;
    width : 30px ;
    height : 30px ;
}
#popular-post ul li.number1:before,
#popular-post ul li.number2:before,
#popular-post ul li.number3:before,
#popular-post ul li.number4:before,
#popular-post ul li.number5:before,
#popular-post ul li.number6:before,
#popular-post ul li.number7:before,
#popular-post ul li.number8:before,
#popular-post ul li.number9:before,
#popular-post ul li.number10:before,
#popular-post ul li.number11:before,
#popular-post ul li.number12:before,
#popular-post ul li.number13:before,
#popular-post ul li.number14:before,
#popular-post ul li.number15:before {/*ナンバリングが増えるなら追加*/
    content : counter(wpp-ranking, decimal) ;
    background-color : #FF337A ;
}

 

さいごに

ままはっくのまなしばさん、ありがとうございました!とても参考になりました!    

スポンサーリンク

プロフィール

iMacと猫が好きな完全インドア派。

コメントを残す