おすすめテーマ

【Diverの使い方講座】ウィジェットでカテゴリー記事を切り替える方法

Diverのタブウィジェットを使って、タブごとにカテゴリー別に記事を表示させる方法を説明します。

今回、タブウィジェットを配置するのは、トップページ下部です。

3つのカテゴリーをタブで切り替えられるようにし、それぞれのカテゴリー記事がランダムで表示されるようにします。

具体的には、以下のような感じになります。

  • タブ1をクリックで、カテゴリー1の記事がランダムに3つ表示される
  • タブ2をクリックで、カテゴリー2の記事がランダムに3つ表示される
  • タブ3をクリックで、カテゴリー3の記事がランダムに3つ表示される

横長のコンテンツになるので、使いやすいと思いますよ。

★前回(第5回)の記事はこちら↓
Diverでサイドバーに人気記事ランキング。おすすめの設定方法を紹介>>

★アフィリエイトのおすすめテーマです↓
アフィリエイトにおすすめのWordPressテーマ。複数サイト対応状況も調査>>

当サイトで作っている仮ブログは、最終的にこんな感じになります。
新しいタブで開きます。(クリックで拡大できます)↓
完成したブログはこちら(画像)>>

タブウィジェットエリアの設定

タブ切換のコンテンツを作るには、「【Diver】タブウィジェット」を使います。

その【Diver】タブウィジェットを使うためには、「タブウィジェットエリア」を事前に設定する必要があります。

タブウィジェットエリアは、いくつでも作ることができるのですが、

「タブウィジェットエリア−1」というが最初から用意されているので、それを利用します。

では、「タブウィジェットエリア-1」の設定をしていきましょう。

ワードプレスメニューの中の、

外観→ウィジェット

とクリックしてください。

Diverウィジェット欄

【Diver】記事一覧グリッドというウィジェットがあるので、「タブウィジェットエリア-1」にドラッグします。

このタブウィジェットエリアには、最終的に3つの【Diver】記事一覧グリッドをドラッグして配置する予定です。

では、一つ目の【Diver】記事一覧グリッドの設定をしていきましょう。

  • タイトル欄
    今回は「カテゴリー1」としました。実際は好きな名前にしてください。

  • 最大表示数
    カテゴリー別に3つの記事を表示するするので、ここは「3」とします。

  • ソート順欄
    「ランダム」にしておきます。こうすると、ページが更新される度に記事が変わります。

  • カテゴリー欄
    表示させたいカテゴリーを選択します。表示したいカテゴリーを選んでください。今回は「カテゴリー1」にしました。

  • サムネイルを表示する
    チェックを入れます。画像がある方が見た目が良いです。

  • 投稿日を表示する
    ここはチェックを入れるかどうかは、自分の好みです。今回は入れておくことにしました。

  • カテゴリーを表示する
    チェックをはずします。タブにカテゴリー別で表示するので、カテゴリーを表示する意味はありません。

  • 先頭記事を拡大する
    チェックをはずします。デフォルトで「先頭記事を拡大する」にチェックが入っていますが、はずしておかないと一番左の記事だけ文字が太字になります。

これで一つ目の【Diver】記事一覧グリッドの設定は終わりです。

残り2つの【Diver】記事一覧グリッドも、これと同様に設定をしていきます。

上の画像のように、3つの記事一覧グリッドを作成してください。

タイトル欄とカテゴリー欄以外はすべて同じで大丈夫です。

  • 2つ目の【Diver】記事一覧グリッド
    タイトル欄 「カテゴリー2」
    カテゴリー欄 「カテゴリー2」

  • 3つ目の【Diver】記事一覧グリッド
    タイトル欄 「カテゴリー3」
    カテゴリー欄 「カテゴリー3」

これでタブウィジェットエリアの設定は終わりです。

【Diver】タブウィジェットを配置

「タブウィジェットエリア−1」の設定が終わったので、【Diver】タブウィジェットを配置します。

【Diver】タブウィジェットを配置すると、タブウィジェットエリアで設定した内容が表示されます。

【Diver】タブウィジェットを、「トップページ下部」にドラッグしてください。

【Diver】タブウィジェットの内容を設定します。

  • タイトル
    ここに文字を入力すると、タイトルが表示されます。
    今回はタイトルは入れないので、空欄にしました。

  • 表示タブウィジェットエリア
    タブウィジェットエリアは、どんどん増やすことができます。
    一度も増やしていなければ、「タブウィジェットエリア−1」だけしかありません。
    設定は「1」になっていれば大丈夫です。

これでタブウィジェットの設定はすべて完了です。

これでトップページの一番下に、タブ切換の記事が表示されます。

★次回(第7回)の記事はこちら↓
Diverでサイドバーにタブ切換記事を設定。ウィジェットエリアの使い方も>>

★Diverをおすすめする理由はこちら↓
アフィリエイトに最適のテーマ「Diver」を5段階評価してみた>>

Diverの詳細はこちら>>

 

関連記事

  1. Diverで記事一覧グリッド

    【Diverの使い方講座】記事一覧グリッドを使ったおすすめ記事の作り方…

  2. テーマプレス

    TCDのWordPressテーマに乗り換える時の注意点。見出し関係がた…

  3. Affinger5

    WordPressテーマAFFINGE5(WING)を5段階評価してみ…

  4. JIN

    WordPressテーマ「JIN」を5段階評価してみた。【アフィリエイ…

  5. BRIDGE

    TCD「BRIDGE」はランキング機能が素晴らしいアフィリエイトテーマ…

  6. wing-affinger5

    AFFINGER5(WING)の、会話吹き出しやランキング機能などを紹…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

おすすめテーマ

トップページに動画再生可能な、おすすめのWordPressテーマを集めました

おすすめテーマ

美容室・サロン向けの高級感あるWordPressテーマを比較してみました

TCDテーマ「SKIN」

おすすめテーマ

企業サイトにおすすめの高品質なWordPressテーマ12選【日本語対応】

おすすめテーマ

アフィリエイトにおすすめのWordPressテーマ。複数サイト対応状況も調査

おすすめテーマ

ブログにおすすめのWordPressテーマ。クオリティーの高い有料テーマに厳選し…

ONEでCTA設置

おすすめテーマ

2019年、WordPressテーマの目的別おすすめベスト3を発表!

部門別ベスト3

おすすめテーマ

WordPressでネットショップが作れるおすすめテーマ【Welcart・Woo…

おすすめテーマ

女性向けの美しい(かわいい)WordPressテーマを集めました