Diverトップページにタブウィジェットを設置する方法まとめ

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トップページのタブウィジェットが完成!

タブウィジェット、できましたー!

ページ下部への設置にしてみたので、回遊率に繋がるかどうか微妙なところですが、

トップページのみの表示なので、しばらくはこのまま様子をみてみたいと思います。

はち
あっさりまとめてるけど、最初はどこで設定するのか迷ってたのは内緒にしてやるにゃ
このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事