Ver1.7.8 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:公開をクリック

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

46 COMMENTS

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を複数指定することは出来ませんか?
カテゴリーやタグで指定するのではなくはなく、記事単位で複数指定したいのですが、どうにかなりませんか?

ご回答の程よろしくお願い致します。

回答を見る
KN 2018/06/20

お世話になっております。
タブ切替機能によって表示した記事一覧を、スマートフォンでも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を貼ればそのカテゴリー内の全ての記事が読めるので問題ありませんが、タグで取得した場合はバラバラのカテゴリーから取得してきているので、もっと読むのリンク先がありません。そういった場合はどうすればよいのでしょうか?
質問が分かり難かったらすいません・・ご確認のほどよろしくお願いします

回答を見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です