WordPressテーマ「Diver」の公式ページを見ると、トップページにタブで切り替えができるコンテンツがありますよね。
サイドバーにも同じようにタブで表示切替ができるコンテンツが埋め込まれています。
タブウィジェットというんですが、設定方法がちょーーっとわかりにくいんですよね。
（私はタブウィジェットなのかウィジェットタブなのかわからなくなるのに困ってる）
というわけで！
今回はDiverのトップページにタブウィジェットを設置する方法です。
※バージョン4.6.5現在では、動きがカクカクっとするので、トップページ下部に設置しなおしています。
Diverカスタマイザーでタブウィジェットエリアを作成する
Diver公式ページ（デモサイト）のトップページのこの部分↓
インデックスみたいになってるの。
これがタブウィジェットエリアっていうのね。
では早速設定。
まずは、ダッシュボードの外観から「ウィジェット」へ進みます。
右側下にある「タブウィジェットエリア」に左側のウィジェットを入れ込むイメージです。
当ブログでは「記事一覧グリッド」を選択。
プルダウンキーでどのエリアにウィジェットをもっていくかを選択。
下にスクロールして、タブウィジェットエリア1を選びます。（既にサイドバーなどでタブウィジェットエリア1を使用中なら2を選択）
すると、右側のタブウィジェットエリアに記事一覧グリッドが一つ追加されるので、詳細を設定していきます。
- タイトル…カテゴリー名
- 最大表示数…6件
- ソート…投稿順（ランダムに変更するかも？）
- カテゴリーで分けてタグは未入力（全カテゴリーにしてタグで分けるのもアリよね）
- サムネイルに✔
- 先頭記事を拡大するのチェックを外す（←サイドバーで使えます）
- もっと見るテキスト…read more
- もっと見るリンク先…カテゴリーページURL
ご参考までに…。
で、この作業を必要なタブ分繰り返します。（当ブログはタブ4つ）
※当初4つのタブを設定しましたが、スマホ表示がごちゃっとなったので2つに絞りました。
タブウィジェットエリアの配置を設定する
タブを作り終えたら、そのタブウィジェットをどこに配置するのか設定していきます。
左側の「タブウィジェット」のプルダウンキーから配置場所を選択。
トップページ上部を選択すると、右側の「トップページ上部」にタブウィジェットが差し込まれます。
表示タブウィジェットエリアの数字は作成した
タブウィジェットエリアと同じ数字を選択。（今回は1）
タブウィジェットのタイトルはお好みで。
当初、pickup categoryと入れてみましたが、メインタイトルとデザインが違ってしまう（背景がつく）のでタイトルなしに変更。
さらに、タブのライン色をサイトカラーと統一したかったので、style.cssに以下を追記しました。
※さらにさらに、配置をトップページ下部に変更しました。
/*タブウィジェットライン*/
.widget ul.d_tab_nav li.d_tab_active a {
background-color: #fff;
box-shadow: none;
color: #555;
border-top: 3px solid #81D8D0;
}ここはまたカスタマイズできたら、ご報告しますね。
Diverトップページのタブウィジェットが完成！
タブウィジェット、できましたー！
ページ下部への設置にしてみたので、回遊率に繋がるかどうか微妙なところですが、
トップページのみの表示なので、しばらくはこのまま様子をみてみたいと思います。
