【ConoHa WING】当ブログ限定!5,000円割引あり!キャンペーンとの併用もOK!

SANGOトップページをタブ切替表示にする方法

SANGOトップページをタブ切替表示にする方法

※当記事内には、商品プロモーションを含む場合があります

SANGOトップページをタブ切替表示にする方法

今回は、SANGOで作成したサイトのトップページをタブ切替で表示する方法を説明します。

通常の記事の一覧表示だとありきたりだという方や、カテゴリー毎に分かりやすく記事を表示させたい場合にはとても便利な機能です。

タブ切替の仕様はこのようになっています。

・トップページをタブ切替形式にできる
・各タブはカテゴリー、またはタグ毎に分けて表示できる
・最大で4つまでタブの表示が可

また、設定はWordPress管理画面の外観カスタマイズの中にある「記事一覧タブ切替(トップページ)」の画面から行います。
設定方法についてはこちらで詳しく説明していきます。

トップページのタブ切替表示の設定方法

タブ切替表示の設定は、WordPress管理画面左カラムにある「外観」→「カスタマイズ」→「SANGOオリジナル機能」→「記事一覧タブ切替(トップページ)」から行います。
WordPressのカスタマイズ画面

このような設定画面になっています。
「記事一覧タブ切替」設定画面

それでは、設定を行っています。

まずは「トップページの記事一覧でタブ切り替えを有効にする」にチェックを入れて、タブ切替を有効にします。
そして「タブ1(新着記事)のタイトル」を入力します。
「記事一覧タブ切替」設定画面
1つ目のタブでは「新着記事」が表示される仕様になっています。

次に、2つ目のタブをこのように設定してみます。
「記事一覧タブ切替」設定画面
2つ目のタブにはカテゴリー、またはタグを設定して表示させます。

これでサイトのトップページを確認すると、このようなタブ切替表示になっているはずです。

タブの切り替え表示
一応、ここで念のためにタブが正常に切り替わる事を各タブに表示されている記事に誤りがない事をチェックしておいてください。

それでは、次に3つ目のタブも設定してみましょう。
「記事一覧タブ切替」設定画面

ユーザー側の表示はこのようにタブが3つになりました。
タブの切り替え表示

同様にして4つ目のタブも設定してみると、このような表示になります。
タブの切り替え表示

タブの設定は最大で4つまでになっているので、必要な数だけ設定してみてください。

それと、タブの背景色や文字色の設定も変更することができます。
「記事一覧タブ切替」設定画面
各自のサイトのイメージに合った色に変更してみましょう。

また、「タブ2〜4の表示記事数」の設定も行えます。
「記事一覧タブ切替」設定画面
1つ目のタブに関しては、WordPressの記事表示数の設定(「設定」→「表示設定」→「1ページに表示する最大投稿数」)が有効になります。

さらに「記事をランダムに表示す」にチェックを入れるとタブ2~4に表示される記事がランダム表示になります。
デフォルトは新着順になっています。

 

これで、SANGOのサイトトップページのタブ切替の設定が完了です。
簡単に設定できるので、皆さんも挑戦してみてください!

SANGOタブ切替設定のまとめ

こちらでは、SANGOで作成したサイトのトップページをタブ切替形式にする方法を紹介しました。

通常のブログとして使用するのであれば、デフォルトの記事一覧表示でもいいですね。
ですが、タブ表示に設定したい場合には、こちらの記事を参考にしてみてください。

カテゴリーやタグを利用して簡単に設定できるおすすめの機能です。

コメントを残す

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