WordPressテーマ「Simplicity」では、プラグイン「WordPress Popular Posts」を導入していればSimplicity専用の人気記事ウィジェットを使うことができる。集計期間を 「1日」「1週間」「1ヶ月」「全期間」の中から選ぶこともできる。しかし「リアルタイム集計」や「年間集計」を表示させたいときもある。
当サイトでは「現在」「週間」「月間」「年間」の4つのタブで人気記事を切り替えられるようにしてある。また、Simplicity専用の人気記事ウィジェットではなく、Simplicityクラシックテキストウィジェットに、Wordpress Popular Postsのショートコードを入力することで人気記事を表示させている。
この記事では、サイドバーに表示させた集計期間の異なる複数の人気記事ウィジェットを、プラグインを使わずにタブでまとめて表示させる方法を紹介しよう。
サイドバーにSimplicityテキストウィジェットを配置
▼[S]クラシックテキストウィジェットを5つ配置
上から、
- 切り替えタブ用【人気記事】
- 現在ランキング用【人気記事 現在】
- 週間ランキング用【人気記事 週間】
- 月間ランキング用【人気記事 月間】
- 年間ランキング用【人気記事 年間】
と配置。この時点ではウィジェットにはまだ何も入力はしない。
[S]クラシックテキストウィジェットにhtmlを入力
▼切り替えタブ用
<div class="sidebar-ranking-tabs"> <ul> <li class="sidebar-ranking-tablist is-active">現在</li> <li class="sidebar-ranking-tablist">週間</li> <li class="sidebar-ranking-tablist">月間</li> <li class="sidebar-ranking-tablist">年間</li> </ul> </div>
▼現在ランキング用
<aside class="widget_popular_ranking ranking_list">
[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 post_html='
<li>{thumb}{title}<span class="wpp-views">{views}ビュー</span></li>' range='custom' time_quantity=○ time_unit='hour']
</aside>ショートコード部分の time_quantity=○ の「○」に好きな数字を入力。
例：time_quantity=1 → 直近1時間の集計表示
▼週間ランキング用
<aside class="widget_popular_ranking ranking_list">
[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 post_html='
<li>{thumb}{title}<span class="wpp-views">{views}ビュー</span></li>' range='custom' time_quantity=○ time_unit='week']
</aside>○の部分に好きな数字を入力。
例：time_quantity=2 → 直近2週間の集計表示
▼月間ランキング用
<aside class="widget_popular_ranking ranking_list">
[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 post_html='
<li>{thumb}{title}<span class="wpp-views">{views}ビュー</span></li>' range='custom' time_quantity=○ time_unit='month']
</aside>○の部分に好きな数字を入力。
例：time_quantity=3 → 直近3ヶ月の集計表示
▼年間ランキング用
<aside class="widget_popular_ranking ranking_list">
[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 post_html='
<li>{thumb}{title}<span class="wpp-views">{views}ビュー</span></li>' range='custom' time_quantity=1 time_unit='year']
</aside>○の部分に好きな数字を入力。
例：time_quantity=4 → 直近4年間の集計表示
※Wordpress Popular Postsのショートコードが記事内で反映されてしまうためショートコードの先頭に半角スペースを入力してあります。
コピーペーストする際はペースト後に[ wpp]の先頭の半角スペースを削除してください。
WordPress Popular Posts ショートコードの重要なパラメーター
ショートコード内の重要な部分を説明しておきたい。これを理解しておくと今後さらにショートコードが使いやすくなるはずだ。
以下のショートコードは、現在ランキングを重要な部分を残し簡略化したもの。この場合だと「直近3時間の集計」が表示される。
[ wpp range='custom' time_quantity=3 time_unit='hour']
- range=’custom’
「last24hours」「last7days」「last30days」「all」「custom」が利用可能。
今回は「custom」を使って表示させる。 - time_quantity=○
○の部分に時間範囲を入力する。 - time_unit=’○’
○の部分に時間単位を入力する。
「minute」「hour」「day」「week」「month」が利用可能。
「time_quantity」と「time_unit」の組み合わせが重要で、ここに数字や単位をどのように入力するかで表示内容が変わる。
▼例1：直近1時間
range='custom' time_quantity=1 time_unit='hour'
▼例2：直近30分間
range='custom' time_quantity=30 time_unit='minute'
少し変わった書き方も紹介しよう。
▼例3：直近365日間 = 1年間
range='custom' time_quantity=365 time_unit='day'
▼例4：直近120分 = 2時間
range='custom' time_quantity=120 time_unit='minute'
jsファイルを作り、ソースを入力
▼Simplicity子テーマ内に、sidebar-ranking-tabs.js を作る
▼sidebar-ranking-tabs.jsファイルに入力
jQuery(function($) {
var now = "〇〇"; // 現在の人気記事のid (simplicityclassictextwidget-〇〇)
var weekly = "〇〇"; // 週間の人気記事のid (simplicityclassictextwidget-〇〇)
var monthly = "〇〇"; // 月間の人気記事のid (simplicityclassictextwidget-〇〇)
var year = "〇〇"; // 年間の人気記事のid (simplicityclassictextwidget-〇〇)
// タブがクリックされたら実行
$('.sidebar-ranking-tablist').on('click',function(){
// クリックされたliタグにis-activeクラスを追加
$(this).addClass('is-active');
// それ以外のliタグのis-activeクラスを削除
$(this).siblings().not(this).removeClass('is-active');
// クリックされたタブが何番目か取得
var index = $('.sidebar-ranking-tablist').index(this);
// タブに対応するランキングを表示
if (index===0) {
// dayがクリックされた場合
$('#simplicityclassictextwidget-' + now).css('display', 'block'); // 現在の人気記事のid
$('#simplicityclassictextwidget-' + weekly).css('display', 'none'); // 週間の人気記事のid
$('#simplicityclassictextwidget-' + monthly).css('display', 'none'); // 月間の人気記事のid
$('#simplicityclassictextwidget-' + year).css('display', 'none'); // 年間の人気記事のid
} else if (index===1) {
// weeklyがクリックされた場合
$('#simplicityclassictextwidget-' + now).css('display', 'none'); // 現在の人気記事のid
$('#simplicityclassictextwidget-' + weekly).css('display', 'block'); // 週間の人気記事のid
$('#simplicityclassictextwidget-' + monthly).css('display', 'none'); // 月間の人気記事のid
$('#simplicityclassictextwidget-' + year).css('display', 'none'); // 年間の人気記事のid
} else if (index===2) {
// monthlyがクリックされた場合
$('#simplicityclassictextwidget-' + now).css('display', 'none'); // 現在の人気記事のid
$('#simplicityclassictextwidget-' + weekly).css('display', 'none'); // 週間の人気記事のid
$('#simplicityclassictextwidget-' + monthly).css('display', 'block'); // 月間の人気記事のid
$('#simplicityclassictextwidget-' + year).css('display', 'none'); // 年間の人気記事のid
} else if (index===3) {
// Totalがクリックされた場合
$('#simplicityclassictextwidget-' + now).css('display', 'none'); // 現在の人気記事のid
$('#simplicityclassictextwidget-' + weekly).css('display', 'none'); // 週間の人気記事のid
$('#simplicityclassictextwidget-' + monthly).css('display', 'none'); // 月間の人気記事のid
$('#simplicityclassictextwidget-' + year).css('display', 'block'); // 年間の人気記事のid
}
});
});〇〇の部分はChromeのデベロッパーツールでクラシックテキストウィジェットのidを確認して入力。
スタイルシートにCSSを入力
▼テーマのstyle.cssに以下を入力
/*--------------------------------------
サイドバー人気記事タブ
--------------------------------------*/
.sidebar-ranking-tabs-tabs {
line-height: 24px;
overflow: hidden;
overflow-x: auto;
}
.sidebar-ranking-tabs ul {
padding-left: 0;
}
.sidebar-ranking-tabs li {
width: 25%;
border-bottom: 2px solid #000000;
margin-bottom: 0;
padding: 5px 0;
text-align: center;
float: left;
cursor: pointer;
font-size: 0.8em;
}
.sidebar-ranking-tabs li:hover {
background: #6f6f6f;
color: #ffffff;
border-bottom: 2px solid #6f6f6f;
}
.sidebar-ranking-tabs li.is-active {
background-color: #000000;
border-color: #000000;
color: #fff;
}
.sidebar-ranking-tabs li.is-active:hover {
border-color: #000000;
}
/* タブ用Simplicityクラシックテキストウィジェットのid */
#simplicityclassictextwidget-○○ {
margin-bottom: 0;
}
/* 週間、月間、年間のSimplicityクラシックテキストウィジェットid */
#simplicityclassictextwidget-○○, #simplicityclassictextwidget-○○, #simplicityclassictextwidget-○○ {
display: none;
}
/* タブ以外のランキングウィジェットタイトル非表示 */
#simplicityclassictextwidget-○○ h3, #simplicityclassictextwidget-○○ h3, #simplicityclassictextwidget-○○ h3, #simplicityclassictextwidget-○○ h3 {
display: none;
}〇〇の部分はChromeのデベロッパーツールでクラシックテキストウィジェットのidを確認して入力。
function.phpからjsファイルを読み込ませる
▼function.phpに以下を入力
//sidebar-ranking-tabs.jsの読み込み
function my_scripts() {
wp_enqueue_script( 'sidebar-ranking-tabs', get_bloginfo( 'stylesheet_directory') . '/sidebar-ranking-tabs.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');function.phpにコードを入力し、jsファイルを読み込ませれば配置したウィジェットがタブ表示される。
最後に
私は初め「Shortcodes Ultimate」 と「Simplicity専用人気記事ウィジェット」を使ってタブ表示に挑戦したが「現在の集計」を表示させることができなかった。その後「Wordpress Popular Posts」と「Simplicityクラシックテキストウィジェット」を利用することで理想が実現した。
また、CSSファイル、jsファイルに入力した「Simplicityクラシックテキスト」のid名を「WordPress標準テキスト」のid名に置き換えれば、Simplicity以外のテーマでも実装することができる。
例：「#simplicityclassictextwidget-○○」→「#text-○○」
ウィジェットのid名さえわかれば人気記事以外にも利用することができるかもしれない。色々なアイディアを形にしてもらいたい。
【参考】
- WordPressで人気記事を期間ごとにタブで切り替え表示する方法 – くまぺクリップ
- サイドバーの人気記事をタブで日毎、週毎、月毎の3種類表示する方法