THE THOR カテゴリーをタブ切り替え で表現するカスタマイズ

THE THOR カテゴリーをタブ切り替え で表現するカスタマイズ

THE THOR カテゴリーをタブ切り替え で表現するカスタマイズ

THE THOR の カスタマイズ で「トップページにカテゴリーをタブ切り替えで表示したい」「タブの中にはおすすめ記事を表示したい」というお問い合わせをいただきました。ありがとうございます。

参考になるサイトのURLも添えていただいたので確認すると内容的には「新着記事」と「任意のカテゴリーA」「任意のカテゴリーB」の3つをタブで切り替えて表示するというものでした。

 

タブ切り替えで以下を表示する。

  • 新着記事
  • カテゴリーA
  • カテゴリーB

 

タブの中に表示する「おすすめ記事」「カテゴリーの人気記事」とします。

上記のようなカスタマイズであれば THE THOR の標準機能を使用して簡単に作ることができます。

 

タブコンテンツのサンプル

新着記事人気記事本日のおすすめ
THOR カテゴリ最新記事 並び 順番

カテゴリー最新記事の順番を自由に変更することができるようになります。

ウィジェット [THE]タブコンテンツ トール

ウィジェット[THE]タブコンテンツをレスポンシブにカスタマイズ

オフラインのためランキングが表示できません

サイドメニューのCLOSEボタンをもっと使いやすくするために位置を変更しました。オススメのカスタマイズ。

THE THOR 目次の文字を揃える カスタマイズ

THE THOR の標準状態の目次をベースに 目次の文字を揃えました。

THE THOR カラムの設定

THE THOR のカラム設定を1 カラム に変更しました。

 

THE THOR カテゴリーをタブ切り替え で表現するカスタマイズ

 

今回のお問い合わせでは「トップページ」「タブ切り替えで新着記事とカテゴリー」を表示するということなので、「ウィジェット[THE]タブコンテンツ」を利用します。タブの中は「ショートコード カテゴリ指定記事一覧」です。

 

ウィジェット [THE]タブコンテンツ を設置

操作手順
外観 → カスタマイズ → ウィジェット

「トップページ上部エリア」「ウィジェット [THE]タブコンテンツ」を設置します。

「ウィジェット [THE]タブコンテンツ」には最大5個の項目が設定できます。必要に応じて使用しましょう。

 

ショートコード カテゴリ指定記事一覧

タブの中身は「ショートコード カテゴリ指定記事一覧」を使用します。記事投稿画面でショートコードをコピーして「トップページ上部エリア」に用意した「ウィジェット [THE]タブコンテンツ」「タブ本文」に貼り付けます。

「ショートコード カテゴリ指定記事一覧」には3種類あります。

  • カテゴリ指定記事一覧(新着順)
  • カテゴリ指定記事一覧(ランダム順)
  • カテゴリ指定記事一覧(ランク順)

 

ショートコードの「cat」にはカテゴリのID、「num」には表示する記事数を入れてください。カテゴリIDを「0」にすると全てのカテゴリが対象となります。

 

 

THE THOR カテゴリーをタブ切り替え で表現するカスタマイズ

 

以上で完成です。

トップページを自由にデザイン

当サイト「からあげ棒、ありったけ」は THE THOR というワードプレステーマを使用しています。   どうせブログをやるなら人とは違ったデザインのサイトを構築したい。 そんな風に思う人は多いと思います。 […]

THE THOR ザ・トール 固定ページ 固定トップ トップページ

 

あとがき

 

割と何でも揃っている THE THOR は工夫しだいで色々な表現ができます。

「Widget Shortcode」というプラグインを使用すると豊富なウィジェットをさらに自由に(この記事で表示したサンプルのように)使うことができるのでオススメ。「Widget Shortcode」を使えば「ウィジェット[THE]おすすめ記事」でさらに細かく表示したい記事を選ぶこともできます。

※Widget Shortcodeは現在のWordPressのバージョンではテストされていません。使用する場合は自己責任にてお願いします。当サイトでは2021年8月現在、問題なく使用できています。

WordPress.org 日本語

Adds [widget] shortcode which enables you to output widgets …