Ver1.4.1をリリースしました(5/19)

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

SANGOのタブ機能

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

タブ切替機能のサンプル

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

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

タブの設定手順

手順1:設定画面を開く

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

手順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:公開をクリック

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

10 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が後から読み込まれていたため、うまく機能していなかったのですね。
ご報告ありがとうございました。

返信する

コメントを残す

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