2.0 Released !

SANGOトップページのタブ切替機能の設定方法まとめ

SANGOのタブ機能

WordPressテーマSANGOでは、Ver1.4からトップページにて「タブ切替機能」が使用できるようになりました。

タブ切替機能のサンプル

SANGOのタブ切替機能には以下の特徴があります。

特徴
  • トップページの記事一覧の上部にタブを表示できる
  • 最大4つのタブを設定可能(1つめのタブは新着記事)
  • カテゴリーIDもしくはタグIDを指定することで、そのIDに属する記事一覧が表示される
  • タブのタイトルは自由に指定可能。FontAwesomeのアイコンも使用できる

タブの設定手順

手順1:設定画面を開く

WordPressの管理画面で、外観⇒カスタマイズ⇒SANGOオリジナル機能の管理⇒「記事一覧タブ切替機能(トップページ)」を選びます。この画面でタブのさまざまな設定を行います。

手順2:タブ切替機能を有効にする

タブを有効にする

「トップページの記事一覧でタブ切り替えを有効にする」にチェックを入れると、この機能が使用できるようになります。

手順3:各タブのタイトルを決める

タブのタイトルの表示例

次にタブに表示する文字列を決めましょう。左からタブ1、タブ2、タブ3、タブ4となります。なお、タブ1には新着記事一覧が割り当てられています。

タブのタイトルを決める

例えば「タブ2のタイトル」欄に「おすすめ」と入力すると、2つめのタブのタイトルは「おすすめ」になります。FontAwesomeのアイコンをタイトルに含めることもできます。

タブのタイトル例
<i class="fa fa-line-chart"></i> おすすめ
MEMO
  • バージョンや設定により使用可能なFontAwesomeのアイコンが異なるのでご注意ください。SANGO v1.7以上をご利用の場合、FontAwesome5がデフォルトで有効になっています(参考:SANGOのFontAwesome対応)。
  • タブのタイトルを空欄にすると、そのタブは無効化されます(例えば、タブ4のタイトルを空欄にすると、タブ4は無効&非表示になります)
  • 有効化するタブの数は2つ4つにしましょう。3つにすると、スマホ表示においてタブが格好悪く見えてしまいます。

手順4:各タブの記事一覧の取得方法を設定する

記事一覧の取得方法

タブ2〜4それぞれで「カテゴリーID」から記事一覧を取得するか、「タグID」から記事一覧を取得するか選ぶことができます。

「カテゴリーIDで指定」を選んだ場合には「タブ◯のID」の部分に、表示させたいカテゴリーIDを入力します。「タグIDで指定」を選んだ場合には、「タブ◯のID」の部分に、表示させたいタグIDを入力します。

どちらのIDも数字で入力する必要があることに注意しましょう(blogdiaryのようにカテゴリー名を入力しても動きません)。
参考:IDの調べ方

タグIDの上手な活用例
訪問者に特にアピールしたい記事に「おすすめ」というタグをつけます。このタグのIDを、タブに指定することで、おすすめ記事一覧のタブを作成することができます。

手順5: 「もっと見る」のリンクを設定する

もっと見るのリンク

タブごとに記事一覧下に「もっと見る」というボタンを表示することができます。このボタンのリンク先は「タブ◯の「もっと読む」のリンク先URL」欄で指定することができます。

手順6:タブの色を設定する

タブの色を設定する

続いて、タブの色を決めます。「タブの背景色」ではタブ全体の色を、「アクティブタグの背景色」では現在選択中のタブの色を指定します。アクティブタグでは、2つの色が選べるようになっており、この2つを別色にすると、グラデーションがかかります。

手順7:記事一覧の表示数を指定する

各タブの表示記事数を指定する

最後に各タブの表示記事数を指定します。タブ2〜4の表示記事数を、こちらの欄で指定することができます(半角英数字で指定)。タブ1(新着記事一覧)の表示記事数は、管理画面の「設定」⇒「表示設定」で指定した値となります。

MEMO
表示記事数が多くなると、読み込み速度が遅くなる場合があります。

手順8:公開をクリック

公開をクリックすると、設定が保存されます。トップページを開いて、タブがきちんと機能しているか確認しましょう。

73 COMMENTS

kuribou 2020/03/15

タブ切り替え機能を固定ページでも表示したい

お世話になっております。 質問なのですが、こちらの記事で紹介されているタブ切り替え機能を固定ページでも表示させる方法はございますでしょうか? 不可能な場合、カテゴリーページにおける記事一覧と同様の表示を固定ページで実現させる方法がありましたら教えていただきたいです(ショートコードの記事カードでも良いのですが、その場合表示する記事数が限られてしまい困っています。カテゴリーページのように、1ページの記…

回答を見る
ふしあな 2019/10/07

タブ切替でカテゴリーページに移動させたい

こんにちは。 いつもお世話になっております。ありがとうございます。 タブ切替で記事一覧を表示させていますが、 タブを押すと「カテゴリーページ」が表示されるようにはできますか? 私のサイトですと「お金」タブを押すと、 「お金のカテゴリーページ」が表示されるようになると嬉しいです。 よろしくお願い致します。

回答を見る
ひげめがね 2019/08/23

タブの表示とFontAwesomeについて

質問失礼いたします。 タブの設定をしたのですが、それぞれのタブが右詰になってしまいます。 均等に本来配置されていると思うのですがどのようにしたらよりでしょうか? またFontAwesomeも反映されないので合わせて伺えればと思います。

回答を見る
豆まき 2019/07/13

トップページのタブ切り替え機能が機能しない

いつもお世話になっております。バージョン1.8.5をダウンロードし、トップページのタブ切替機能を入れてみました(カテゴリーIDで指定)。 1つ目の新着記事は機能したのですが、2~4つ目が機能しません。公開前のプレビュー画面では機能するのですが、公開すると機能しないのです。 お忙しいところ恐れ入りますが、何か原因が分かりましたら、教えていただきたく。どうぞよろしくお願いいたします。

回答を見る
ao 2019/07/09

記事一覧タブ切り替えの2つ目と3つ目が機能しなくなってしまいました

トップページのタブ切り替え機能を使用していますが、2つ目と3つ目のタブを押しても記事が表示されなくなってしまいました。※新着記事と4つ目のタブは機能しています。 以前は問題なく機能していましたが、突然機能しなくなってしまいました。 カテゴリーのID指定等も確認しましたが間違いないようです。 すみませんがよろしくお願いします。

回答を見る
ゆいこ 2019/07/06

タブ切り替え機能の記事一覧の取得方法をランダムにしたい

お世話になっております。質問失礼いたします。 タブ切り替え機能についてなのですが、記事一覧の取得方法をランダムにすることは可能でしょうか。 やりたいことは、「タブ2の記事一覧の取得方法」で設定したタグIDの記事を、「タブ2~4の表示記事数」で設定した数だけランダムで表示する、といったことです。ページを更新するたび、表示される記事が変わるようにしたいと思っております。 お忙しいところ大変恐れ入ります…

回答を見る
南優作 2019/06/21

タブ2〜4でもページ送りをしたい

きれいなsango作っていただいてありがとうございます。 「最新記事ように10件分だけを表示して、11件目以降は次のページに表示する」 などのページ送りをタブ2からタブ4もしたいのですがどうしたらいいのでしょうか? 教えてください。

回答を見る
coo 2019/06/15

タブを2,3(

タブ1を新着記事ではなく、カテゴリー又はタグで指定したいのですが可能でしょうか?

回答を見る
capura 2019/04/26

タブが動作しない

お世話になっております。タブの動作について相談させてください。 現在タブを用意してみたのですが、タブを押しても動作しないことがあり、相談させていただきました。 再現する場合としない場合があります。また、プラグインは全て停止している状態です。 キャッシュも削除しています。 1.トップページからどこかの記事を選択 2.ヘッダーのタイトルからトップページへ戻る 3.タブを選択したが、タブが切り替わらない…

回答を見る
たけ 2019/03/30

「タブ切り替え機能」のタグIDの設定

「タブ切り替え機能」で、タグIDを使って(いろんなカテゴリから)、記事を複数表示したいのですが、どのようにすればいいでしょうか? 一応、「11,12」とか、タグID番号を , で区切ってみたりしましたが出来ませんでした。 「タグID」から記事一覧を取得するか選ぶことができます。←この意味が解りません 素人すぎて申し訳ありませんが、どうか教えてください。

回答を見る
CYAZMA 2019/03/07

記事一覧タブ切替のカテゴリについて。

2度目の質問になります。前回はありがとうございました。 記事一覧タブ切り替えについてなんですが、 記事の投稿時にカテゴリを2つ以上選択するとうまく表示されません。 1つ目の『最新記事』には何も入力せずに非表示になっていて、 二つ目と三つ目のタブを表示しています。 一瞬表示された後はもう一度タブをクリックしても表示されない状態です。 解決方法がありましたらよろしくお願いします。

回答を見る
泉本真希 2019/02/07

コメント失礼します モバイルの記事表示についてなのですがレスポンシブではなく、横に2カラム表示させるのには、ファイルのどこのファイルのコードでできますでしょうか? 標準ではその設定がついていなそうだったので。

回答を見る
YI 2018/12/03

記事一覧のカード一つ一つにその記事を書いたユーザー名とアイコンを表示させたい

SANGOのおかげで楽しいWordPressライフが送れています。いつもありがとうございます。お忙しいところ大変恐縮ですが質問させてください。 記事一覧のカード一つ一つにその記事を書いたユーザー名とアイコンを表示させたいのですが、それは可能でしょうか?

回答を見る
タブ 2018/12/03

トップページ用固定ページでタブが表示されない

タブがどうしても1カラムのトップページに表示できません。新着記事一覧固定ページ になぜか表示されてしまいます。助言お願いします。 URLは非公開でお願いします。

回答を見る
はまや 2018/10/07

タブ方式にしたいと思ってますが、seo的にグーグルは問題ないと言ってるようですが実際は、隠れたタブからのリンク?はきちんとクローリングされてないとか評価されないとか噂になってますね。 今後の動向に注目したいです。 タブは必須だと思うのでグーグル側が早く対処してくれる事を祈るばかりです。

回答を見る
HM 2018/09/30

タブ1を新着記事ではなく、カテゴリー又はタグで指定したいのですが可能でしょうか?

回答を見る
元祖空閑 2018/08/02

お忙しいところ恐縮ですが質問させてください。 ログイン状態でサイトを見るとタブ表示は正常ですが ログアウトした状態で見ると崩れてしまっています。 一応キャッシュ削除等は行いましたがブラウザを変えたりスマホで見ても 同様の症状となってしまっています。 考えられる原因はなんだと思われますでしょうか。 よろしくお願いします。

回答を見る
REV 2018/07/17

質問お願い致します。 設定できるタブの数を、現在の最大4つから最大8つまで増やす事は可能でしょうか? よろしくお願い致します。

回答を見る
marginpd 2018/07/09

お世話になっております。先日購入させていただいた者ですが、初めて質問させていただきます。 トップページの切り替えタブ機能でタブを3つ設定したのですが、ブラウザの幅を縮めると3つ目のタブが一行下に下がって表示されてしまいます。(スマホでは常にこの状態) 解決策をご教授お願い致します。 ちかにみ、ほかの機能に関しても質問がいくつかあるのですが、どこで質問すればいいのでしょうか?

回答を見る
藤代雅俊 2018/06/21

タブに表示する記事を投稿IDで指定したい

素敵なテーマをいつもありがとうございます!質問させていただきます。 カテゴリーIDやタグIDではなく、記事IDを複数指定することは出来ませんか? カテゴリーやタグで指定するのではなくはなく、記事単位で複数指定したいのですが、どうにかなりませんか? ご回答の程よろしくお願い致します。

回答を見る
KN 2018/06/20

タブ切替の記事一覧をスマホでも2列表示にしたい

お世話になっております。 タブ切替機能によって表示した記事一覧を、スマートフォンでも2カラムで表示させることはできますでしょうか。 お答えいただける内容でしたら、よろしくお願いいたします。

回答を見る
kakyo 2018/05/31

質問、失礼いたします。 タブ切替機能の設定をしましたが、TOPページに表示されません。 TOPページはページトップページ用サイドバー有にしております。

回答を見る
吉原 2018/05/27

いつも素敵なアップデートありがとうございます。 新着記事のタブ機能を設定時に「トップページの記事一覧でタブ切り替えを有効にする」にチェックを入れ、タブのタイトルやIDを入力してもサイトに反映できず苦戦しております。 以下2点は試しましたが解決出来ておりません。 ・ブラウザのキャッシュを削除 ・プラグインを一度停止 他にも原因を探る手段をご教授頂けると幸いでございます。 何卒、宜しくお願い致します。

回答を見る
こん 2018/05/27

外観⇒カスタマイズ⇒の中に「記事一覧タブ切替機能(トップページ)」というのが見当たりません。1.41にバージョンアップできていないからでしょうか?宜しくお願いします。

回答を見る
宮本 2018/05/13

アップデートお疲れ様です。 新着記事のタブ機能の方、早速使わせて頂きたいと思い設定しました。 タブは表示されていますが、タブ2以降がクリック出来ない(リンクがない)状態です。 IDの数字等、設定項目に間違いはないのですが何が原因かわかると幸いです。

回答を見る
なまず 2018/05/12

お邪魔します。質問させてください。 「トップページにタブ切り替え」についてなのですが、 最新の投稿で表示させるとタブは出るのですが、次へを押すとnot foundと出てしまいます。 そのため、別の方法でトップページと記事用の固定ページを作成してみましたが 今度は、記事用の方にタブが表示されます。(こちらの設定では、次へを押してもnotfoundになりませんでした) トップページにタブを表示させるこ…

回答を見る
shinbou 2018/05/07

いつも素敵なアップデートありがとうございます。 今回のアップデートで実装されたトップページのタブ切り替え機能に関してですが、記事一覧の取得方法をタグにした場合の質問です。 重くならないように表示記事数を10にして取得数を30記事にすると、10記事しか反映しませんよね? カテゴリーIDで取得した場合であればもっと読むのリンクURLにカテゴリーのURLを貼ればそのカテゴリー内の全ての記事が読めるので問…

回答を見る

サルワカくん にコメントする コメントをキャンセル

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。