この記事は公開から9年、最終更新日からも7年経過しています。内容が古くなっている可能性があります。

[WordPress]複数のウィジェットをタブ化するプラグイン「Tabber Tabs Widget」 #WordPress

概要

前回投稿；[WordPress]記事ランキングをウィジェット部分に順位付きで表示するで記事ランキングを導入しました。
現状、週間ランキングだけですが、これにデイリー、月間、総合ランキングを追加する際に、通常だと、サイドバーが縦長になってしまうので、これを一つのタブにまとめてくれる、「Tabber Tabs Widget」を紹介します。

前提条件

今回は、４種の人気ランキングを一つのタブにまとめる方法を記載しますが、これは、人気ランキング以外のウィジェットもまとめられます。

手順1；各種人気ランキングを作成します

前回投稿；[WordPress]記事ランキングをウィジェット部分に順位付きで表示するを参考に、デイリー、月間、総合ランキングを追加します。
※縦長過ぎますね！

手順2；Tabber Tabs Widgetのインストール、有効化を行います

WordPress › Tabber Tabs Widget « WordPress Plugins
※方法割愛します。

手順3；サイドバーにTabber Tabs Widgetを追加します。

表示スタイルは２種類から選択できます。

手順4；「Tabber Tabs Widget Area」が出来ますので、まとめたいウィジェットを追加します。

手順5；「Tabber Tabs Widget」を表示したい場所に配置します。

手順6；これで完了です。※但しタイトルがありません

手順7；タブ全体のタイトルがないので、次のようなCSSでバナーを追加(中級編)、色、フォントなど設定します。

※色、フォントのCSS記述は省略します。
※バナー表示のCSS例　※本ブログのテーマに特化しています。

.style2.tabberlive:before {
　　content:’Ranking’ !important;
　　display: block;
　　font-size: 14px;
　　font-weight: bold;
　　letter-spacing: 0;
　　color: #fff;
　　text-transform: none;
　　display: block;
　　background: url(../alltuts/images/bk_h2_right.png) 0 0 no-repeat;
　　width: 284px;
　　height: 39px;
　　position: absolute;
　　top: 6px;
　　left: -2px;
　　padding: 11px 15px 0 20px;
}

結果のスクリーンショット

※style2を適用。CSSで表示をカスタマイズしています。

結果を表示したサイト(このサイト自身)

curation by nakamurayuji

最後に

これでサイドバーもスッキリ出来ますね。
ただ、タイトルのバナーが簡単に作れないのが残念です。他にも、タブにまとめるプラグインありますので探してみるのも手かもしれません。