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

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


MYLOHAS(マイロハス) | 最強のヘルスコンシャスになる!より

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

スポンサーリンク

用意するもの

用意するのは、

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

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

WordPress Popular Postsのランキング順位に色を付ける方法(Simplicity2)
WordPress Popular Postsは人気記事を表示するプラグインです。 便利なので使っている方も多いのではないでしょうか。 Simplicity2の「人気記事」ウィジェットを使うと、WordPress Popul...
Shortcodes Ultimateの使い方。Wordpress初心者におすすめの、何でもできるプラグイン
簡単な操作できれいな記事装飾パーツを使うことができるプラグインShortcodes Ultimateでできることと、使い方を説明します。

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]
<aside class=”widget_popular_ranking ranking_list”>というのは、僕が使っているWordpressテーマSimplicityのスタイルなので、他のテーマを使っている人は消して下さい。

↓完成サンプル

DayWeekMonth

ちなみに、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”:集計範囲を指定します。

さいごに

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

Comments

  1. […] 僕が参考にさせてもらったサイト様のリンク貼っておきますね。。 […]

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

タイトルとURLをコピーしました