Ver1.5 Released !

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

SANGOのタブ機能

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

タブ切替機能のサンプル

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

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

タブの設定手順

手順1:設定画面を開く

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

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

タブを有効にする

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

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

タブのタイトルの表示例

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

タブのタイトルを決める

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

タブのタイトル例
<i class="fa fa-line-chart"></i> おすすめ
MEMO
  • タブのタイトルを空欄にすると、そのタブは無効化されます(例えば、タブ4のタイトルを空欄にすると、タブ4は無効&非表示になります)
  • 有効化するタブの数は2つ4つにしましょう。3つにすると、スマホ表示においてタブが格好悪く見えてしまいます。

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

記事一覧の取得方法

タブ2〜4それぞれで「カテゴリーID」から記事一覧を取得するか「タブID」から記事一覧を取得するか選ぶことができます。カテゴリーIDを選んだ場合には「タブ◯のID」の部分に、表示させたいカテゴリーIDを入力します(IDの調べ方)。

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

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

もっと見るのリンク

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

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

タブの色を設定する

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

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

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

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

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

手順8:公開をクリック

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

34 Comments

shinbou

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

返信する
サルワカくん

すみません、取得数とは何でしょうか。
なんにせよ、指定したタグページの2ページ目をリンク先に指定すれば良いかと思います。

返信する
マサキ

PV順に表示するタブが設定できたらうれしいのですが、実装されませんでしょうか。
もし、カスタマイズでできることでしたら、ご教授お願いいたします。

返信する
なまず

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

トップページにタブを表示させることが私の設定上無理なのでしょうか?
パソコンについてあまり詳しくありませんので質問もなにがわかってないかもわからない状態ですが、よろしくお願いします

返信する
なまず

ごめんなさい。自己解決できました。
ご迷惑をおかけして申し訳ございません。

返信する
いなおか

先日はありがとうございました。

上記のなまずさんの状態と下記の宮本さんの状態と同じで私も出来ずに苦戦しております。
たびたび申し訳ありません。
ご教授頂けたら幸いです。
お忙しいところ申し訳ありません。

返信する
宮本

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

返信する
サルワカくん

設定に問題がないとするとjQueryのエラーが怪しいですね。
プラグインを一度停止して直るか確認してみてください。
直った場合、1つずつ戻すことで原因となっているプラグインを突き止められます。

返信する
宮本

お返事ありがとうございます。
プラグインを調べてみましたところ「Scripts to Footer」というプラグインが原因でしたので
「Keep jQuery in the Header」の項目にチェックを入れたら問題なくタブが動作しました。
初心者なものでプラグインを調べる事すら気付かず、すいません。
お手数をお掛けしました。

返信する
サルワカくん

なるほど。jQueryが後から読み込まれていたため、うまく機能していなかったのですね。
ご報告ありがとうございました。

返信する
こん

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

返信する
サルワカくん

はい、Ver1.4からの機能なのでアップデートしていただく必要があります。

返信する
吉原

いつも素敵なアップデートありがとうございます。
新着記事のタブ機能を設定時に「トップページの記事一覧でタブ切り替えを有効にする」にチェックを入れ、タブのタイトルやIDを入力してもサイトに反映できず苦戦しております。

以下2点は試しましたが解決出来ておりません。

・ブラウザのキャッシュを削除
・プラグインを一度停止

他にも原因を探る手段をご教授頂けると幸いでございます。
何卒、宜しくお願い致します。

返信する
サルワカくん

お世話になります。
反映されないとは、タブがまったく表示されないということでしょうか。
外観⇒カスタマイズで設定後、保存してページを読み込み直しても表示されませんか?
また、子テーマ内にindex.phpが入っていませんか?
Ver1.4より前にindex.phpを子テーマに編集していた場合、子テーマ側のタブに対応していないPHPファイルが読み込まれてしまいます。
参考:SANGO ver1.4で新しく追加された機能とアップデートの注意点

返信する
吉原

返信ありがとうございます。
index.phpが原因でした。注意事項をしっかり読まず申し訳ありませんでした。
子テーマから外すと解決できました。お手数お掛けして申し訳ございません。
今後とも宜しくお願い致します。

返信する
kakyo

質問、失礼いたします。

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

返信する
サルワカくん

タブ切替機能は、記事一覧を切り替えるためのものです。
そのため、記事一覧ページではないトップページ用固定ページでは表示されません。

返信する
KN

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

お答えいただける内容でしたら、よろしくお願いいたします。

返信する
サルワカくん

お世話になります。以下のCSSを子テーマのstyle.cssなどに追加してみるとスマホでも2列になると思います。

@media only screen and (max-width: 480px) {
 .cardtype {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
 }
 .cardtype__article {
    width: 45.8%;
    margin: 2%;
 }
 .cardtype time {
    font-size: 11px;
 }
 .cardtype h2 {
    font-size: 13px;
    margin: 0 10px;
  }
  .cardtype__link {
    padding-bottom: 10px;
  }
  .cardtype time {
    font-size: 11px;
    margin: 6px 10px 2px;
  }
  .cat-name {
    font-size: 10px;
    top: 8px;
    left: 8px;
  }
  .newmark {
    font-size: 11px;
    height: 33px;
    width: 33px;
    line-height: 33px;
    top: 9px;
    right: 8px;
  }
}

ご確認よろしくお願いします。

返信する
KN

思ったとおりの2列表示になりました。とても嬉しいです。
迅速に対応していただき、ありがとうございました。

返信する
ふかいくろ

SANGOを使い楽しくブログをかかせていただいております。
ありがとうございます。

上記の方法を使いスマホで2列表示をしようとしていますが一番上の右の記事の部分にスペースが空いてしまいます。対応方法をお教えいただきたいです。

よろしくお願いいたします。

返信する
サルワカくん

なるほど。追加で貼り付けたCSSの

.cardtype__article {
    width: 46%;

の数字を

.cardtype__article {
    width: 45.8%;

に変えてみて頂けますか?

返信する
ふかいくろ

ばっちり右上のスペースなくなりました!
こうやってサポートいただけるととても心強いです。
助かりました。ありがとうございます。

藤代雅俊

素敵なテーマをいつもありがとうございます!質問させていただきます。

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

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

返信する
サルワカくん

恐れ入りますが、記事IDで指定することはできません。
ただ、記事に対して、タグは複数指定することができるので、
掲載したい記事に対して「tab1」などというタグを振って、
そのタグをタブに指定すると良いのではないかと思います。

返信する
marginpd

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

返信する
REV

質問お願い致します。

設定できるタブの数を、現在の最大4つから最大8つまで増やす事は可能でしょうか?

よろしくお願い致します。

返信する
元祖空閑

お忙しいところ恐縮ですが質問させてください。
ログイン状態でサイトを見るとタブ表示は正常ですが
ログアウトした状態で見ると崩れてしまっています。

一応キャッシュ削除等は行いましたがブラウザを変えたりスマホで見ても
同様の症状となってしまっています。

考えられる原因はなんだと思われますでしょうか。
よろしくお願いします。

返信する
元祖空閑

ご回答ありがとうございます!
WP Fastest Cacheを無効化したらログアウト状態でも
タブ切替が表示されました。

ただ、同テーマで運用している別サイトでもWP Fastest Cacheを
利用していますが、このようなことは起きたことがありません。

返信する
サルワカくん

WP Fastest Cacheは私も一部のSANGOサイトで使用していますが(また、多くのユーザーさんも使われていますが)、そのような問題は起きていません。
おそらく何らかの設定の問題だと思います。

返信する

コメントを残す

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