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

  • スポンサーリンク

  • スポンサーリンク

スクリーンショット 2014-10-30 13.28.44

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

概要

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

前提条件

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

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

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

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

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

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

表示スタイルは2種類から選択できます。
スクリーンショット 2014-10-30 12.20.15スクリーンショット 2014-10-30 12.33.36

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

スクリーンショット 2014-10-30 12.40.00

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

スクリーンショット 2014-10-30 12.44.38

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

スクリーンショット 2014-10-30 12.50.47

手順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で表示をカスタマイズしています。
スクリーンショット 2014-10-30 13.28.44

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

curation by nakamurayuji

最後に

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


  • スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA