スポンサー
「人気記事のデータが溜まってきたから月間ランキングも考えなくっちゃ。」
未来の投稿:wordpressで今後の投稿予定を表示させる。
最近、投稿を予約することが多くなった。 ブログ更新!: 勢い余ってサイトの修正を始めたら止まらなくなった話。 http://t.co/PDVXNeYQ7D とあるところで(一体どうしてたどり着いたか、もはやわかりませぬが)、・
と、結んだこともあり、色々考え、調べ、たどり着いたのがこちら。
・【カスタマイズ】月間とデイリー、2つの人気記事ランキングを設置する : りくまろぐ
・[Я]jQueryを使ってサイドバーの複数ウィジェットをタブ化する : りくまろぐ
こちらには、ほんと勉強させていただいてます。
ほんと、いつもためになる記事、ありがとうございます。
そして、ありがたくいただきまーす♪
いままで、表示していたデイリーランキングに加えて月間のランキングも表示し、かつ、タブ切り替えにしてスペースを節約しようという魂胆です。
もう、ほぼ丸パクリでお恥ずかしい限りですが、CSS(スタイルシート)なども合わせて載せときます。
ご参考になれば。
詳しいコードの解説などは元記事でご確認くださいませ。注:ねこもりやは、直接ウイジェットにPHPコードを書くために、Exec-PHP というプラグインを入れてます。
2013/10/7現在以下の様にExec.phpを使わない選択をしました。
WordPressプラグインEXEC-PHPを使わずにウイジェットにショートコードを使うことにした経緯。追記あり
>>なぜexec-PHPがモテるのか | WP-D EXEC-PHPって危険なの? わかりません(ねこもりやには)。 って、でも、Wordpressを自動インストールして、無料配布のテンプレート使ってブログ書いてる
ウイジェットに書いたコード
<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とかスクロール系とか。
スポンサー
ニュースレターを購読する