サイドバーの人気記事をタブで日毎、週毎、月毎の3種類表示する方法

しっかりしたメディアサイトのサイドバーなどでたまに見かける、日毎、週毎、月毎の人気記事表示。

MYLOHAS（マイロハス） | 最強のヘルスコンシャスになる！より

今回は、Wordpressのプラグインを使って、これを簡単に実装する方法を紹介します。

用意するもの

用意するのは、

という、2つのWordpressプラグインです。

他にも色々やり方はあると思いますが、今回はこの2つを使います。
WordPress Popular PostsとShortcodes Ultimateは以前このブログでも紹介しましたし、別の使い方もあります。

WordPress Popular Postsのランキング順位に色を付ける方法（Simplicity2）

WordPress Popular Postsは人気記事を表示するプラグインです。 便利なので使っている方も多いのではないでしょうか。 Simplicity2の「人気記事」ウィジェットを使うと、WordPress Popul...

simplicity-hacks.tokyo

Shortcodes Ultimateの使い方。Wordpress初心者におすすめの、何でもできるプラグイン

簡単な操作できれいな記事装飾パーツを使うことができるプラグインShortcodes Ultimateでできることと、使い方を説明します。

simplicity-hacks.tokyo

1つのプラグインでいくつもの役割を担えると、プラグインの数が減るので良いと思います。
（そもそもShortcodes Ultimateはかなり多くの機能が含まれているプラグインですが。）

この2つのプラグインをインストールしておいて下さい。

実装方法

WordPress Popular PostsとShortcodes Ultimateのショートコードを組み合わせて、サイドバーのウィジェットに設置します。

サイドバーウィジェットにショートコードを入力する

プラグインをインストールしたら、Wordpress管理画面左側のメニューから、[外観]ー[ウィジェット]と進みます。

利用できるウィジェットの中から、Shortcodes Ultimateを選択します。

サイドバーウィジェットを選択して、[ウィジェットを追加]をクリックします。

入力するショートコードはこれ↓です。

[ su_tabs active="1"]
[ su_tab title="Day"]
<aside class="widget_popular_ranking ranking_list">
[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 post_html='
<ul><li>{thumb} {title}</li></ul>']
</aside>
[ /su_tab]
[ su_tab title="Week"]
<aside class="widget_popular_ranking ranking_list">
[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 post_html='
<ul><li>{thumb} {title}</li></ul>' range="weekly"]
</aside>[/su_tab]
[ su_tab title="Month"]
<aside class="widget_popular_ranking ranking_list">
[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 post_html='
<ul><li>{thumb} {title}</li></ul>' range="monthly"]
</aside>
[ /su_tab]
[ /su_tabs]

↓完成サンプル

ちなみに、Shortcodes Ultimateではなく、テキストウィジェットに入力しても同じです。

Shortcodes Ultimateのタブ

[ su_tabs active="1"]
[ su_tab title="Day"]タブコンテンツ1[/su_tab]
[ su_tab title="Week"]タブコンテンツ2[/su_tab]
[ su_tab title="Month"]タブコンテンツ3[/su_tab]
[ /su_tabs]

これがShortcodes Ultimateのタブのショートコードです。

・active=”1″：デフォルトで開くタブを設定します。ここでは1なので一つ目（Day）が指定されています。

・title=””：タブのタイトルです。日毎、週毎、月毎なのでDay、Week、Monthとしましたが、今日、今週、今月などでも良いと思います。

・タブコンテンツ：この部分にWordPress Popular Postsのショートコードを挿入します。HTMLタグの記述も可能なので、<aside>を使っています。<div>なども使えます。

WordPress Popular Posts

[ wpp post_type="post" thumbnail_width=75 thumbnail_height=75 limit=10 
post_html=' <ul><li>{thumb} {title}</li></ul>' range="monthly"]

・[ wpp ]：WordPress Popular Postsの基本のショートコードです。

・post_type=”post”：表示する投稿タイプです。”post”は記事です。指定しないと、固定ページも含まれます。

・thumbnail_width、thumbnail_height：記事のサムネイル（アイキャッチ画像）のサイズです。

・limit=10：表示する記事数です。

・post_html=”：WordPress Popular Postsで表示する記事ひとつずつのHTML構造です（省略も可能）。
今回は、<ul><li>{thumb} {title}</li></ul>としています。{thumb} 、{title}はWordPress Popular Postsのパラメーターです。表示順を変えたり、他のパラメーターを追加することも可能です。{thumb}を消すと、サムネイルなし（記事タイトルのみ）になります。

・range=”monthly”：集計範囲を指定します。

さいごに

サイドバーではなく、スクロール追従領域に表示しても良いと思います。