WordPressで月間とデイリーの人気記事をスペースを節約しながら表示させる。

スポンサー

先日の投稿で、

「人気記事のデータが溜まってきたから月間ランキングも考えなくっちゃ。」

と、結んだこともあり、色々考え、調べ、たどり着いたのがこちら。

・【カスタマイズ】月間とデイリー、2つの人気記事ランキングを設置する ： りくまろぐ
・[Я]jQueryを使ってサイドバーの複数ウィジェットをタブ化する ： りくまろぐ

こちらには、ほんと勉強させていただいてます。
ほんと、いつもためになる記事、ありがとうございます。
そして、ありがたくいただきまーす♪

いままで、表示していたデイリーランキングに加えて月間のランキングも表示し、かつ、タブ切り替えにしてスペースを節約しようという魂胆です。

もう、ほぼ丸パクリでお恥ずかしい限りですが、CSS（スタイルシート）なども合わせて載せときます。

ご参考になれば。
詳しいコードの解説などは元記事でご確認くださいませ。
注：ねこもりやは、直接ウイジェットにPHPコードを書くために、Exec-PHP というプラグインを入れてます。

ウイジェットに書いたコード

<ul id="kijitab">
<li class="select">人気記事(月間)</li>
<li>人気記事デイリー</li>
</ul>

<div class="content_wrap">
<?php
if (is_single()) :
    global $_curcat;
    $caca = $_curcat->cat_ID;
    if (function_exists('wpp_get_mostpopular')) :
        ob_start();
        get_mostpopular('order_by=views&range=monthly&cat=' . $caca 
        . '&limit=10&stats_comments=0&post_type=post' 
        . '&stats_views=1&thumbnail_width=80&thumbnail_height=60'	
	);
        $popular = ob_get_clean();
        $popular = str_replace('<ul>', '<ul class="catRankSide clearfix">', $popular);
        $cat_now = get_the_category();
        $cat_now = $cat_now[0];
        $relCatName = $cat_now->cat_name;
?>
<h4 class="kijitabtitle"><?php echo $relCatName; ?>カテゴリー人気記事
(<?php echo date('n/j',strtotime('-30 day')); ?>
～
<?php echo date('n/j',strtotime('-1 day')); ?>)</h4>
<?php
        echo $popular; // カテゴリ毎人気記事を出力
    endif;
endif;
?>
<?php
if (!is_single()) :
    if (function_exists('wpp_get_mostpopular')) :
        ob_start();
        get_mostpopular('order_by=views&range=monthly&limit=10&stats_comments=0&post_type=post'
	 . '&stats_views=1&thumbnail_width=80&thumbnail_height=60'	
	);
        $popular = ob_get_clean();
        $popular = str_replace('<ul>', '<ul class="catRankSide clearfix">', $popular);
        $cat_now = get_the_category();
        $cat_now = $cat_now[0];
        $relCatName = $cat_now->cat_name;
?>
<h4 class="kijitabtitle">人気記事
(<?php echo date('n/j',strtotime('-30 day')); ?>
～
<?php echo date('n/j',strtotime('-1 day')); ?>)</h4>
<?php
        echo $popular; // 人気記事を出力
    endif;
endif;
?>
</div>

<div class="content_wrap  disnon">
<?php
if (is_single()) :
    global $_curcat;
    $caca = $_curcat->cat_ID;
    if (function_exists('wpp_get_mostpopular')) :
        ob_start();
        get_mostpopular('order_by=views&cat=' . $caca 
        . '&limit=10&stats_comments=0&post_type=post' 
        . '&stats_views=1&thumbnail_width=80&thumbnail_height=60'	
	);
        $popular = ob_get_clean();
        $popular = str_replace('<ul>', '<ul class="catRankSide clearfix">', $popular);
        $cat_now = get_the_category();
        $cat_now = $cat_now[0];
        $relCatName = $cat_now->cat_name;
?>
<h4 class="kijitabtitle"><?php echo $relCatName; ?>カテゴリー人気記事(デイリー)</h4>
<?php
        echo $popular; // カテゴリ毎人気記事を出力
    endif;
endif;
?>
<?php
if (!is_single()) :
    if (function_exists('wpp_get_mostpopular')) :
        ob_start();
        get_mostpopular('order_by=views&limit=10&stats_comments=0&post_type=post'
	 . '&stats_views=1&thumbnail_width=80&thumbnail_height=60'	
	);
        $popular = ob_get_clean();
        $popular = str_replace('<ul>', '<ul class="catRankSide clearfix">', $popular);
        $cat_now = get_the_category();
        $cat_now = $cat_now[0];
        $relCatName = $cat_now->cat_name;
?>
<h4 class="kijitabtitle">人気記事(デイリー)</h4>
<?php
        echo $popular; // 人気記事を出力
    endif;
endif;
?>
</div>

結果、シングルページでは、その記事が属するカテゴリーのデイリーランキングと月間ランキングを、トップページやアーカイブでは全体のデイリーランキング及び月間ランキングを表示。

スタイルシート（CSS）

/*タブ切り替え*/
ul#kijitab{
	overflow:hidden;
	}
ul#kijitab li {
    float: left;
    padding: 5px 8px;
    margin-right: 2px;
    list-style: none;
    cursor: pointer;
    background: #666;
    font-size: 16px;
    color:#fff;
}

.disnon {
    display: none;
}
/*div要素の背景などの装飾*/ 
.content_wrap {
    clear: left;
    padding: 3px;
    background:url(img/content_wrap_bg.png);
}
.content_wrap h4{
    background:url(img/h4_tori.png) no-repeat ;
    margin:5px;
    padding:5px  5px 5px 40px;
    font-size:1em;
	}
/*選択状態の見出しタブの色*/ 
ul#kijitab li.select {
    background: #fdcd1a;
}
/**/
ul.wpp-list li{
	overflow: hidden;
	display: block;
	float: none;
	position:relative;
	width:95%;
	height:80px;
	background:url(img/wrap_bg.png);
	border:1px solid rgba(127,127,127,0.1);
	padding:5px;
	margin:0 0 5px;
	clear: both;
}

サイドバーには、他に埋もれてる記事とか、10年日記ぽいものとか未来の投稿とかありますが、ちょっと目立たせました♪ div要素の背景（ピンク水玉）を生かして、li要素の背景は透過PNGを使っています。

head内に記述するjavascript

<script type="text/javascript">
jQuery(function() {
    jQuery("#kijitab li").click(function() {
        var num = jQuery("#kijitab li").index(this);
        jQuery(".content_wrap").hide();
        jQuery(".content_wrap").eq(num).fadeIn();
        jQuery("#kijitab li").removeClass('select');
        jQuery(this).addClass('select')
    });
});
</script>

「/head」タグの直前でいいと思う。 一応、ほかのjavascriptやプラグインと競合しないか確認を・・・ たとえば、LightBoxとかスクロール系とか。

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。