オカヘイワードプレステーマSWELLを使って、以下のようなタブで切り替えのできるお知らせページの作り方を解説します。
目次
タブで切り替えできるお知らせページの作成方法 手順紹介
STEP
カテゴリーを作成する
今回タブで分類したいカテゴリーを先に作成します。
上記サンプルでは、以下3つのタブにわかれています。
- すべての投稿リストを表示する【すべて】
- お知らせのカテゴリーのみを表示する【お知らせ】
- イベントのカテゴリーのみを表示する【イベント】
今回作成が必要なのは【お知らせ】と【イベント】のカテゴリーです。
管理画面＞投稿＞カテゴリーから作成しましょう。
STEP
おしらせページ（固定ページ）を作成する
管理画面＞固定ページ＞新規固定ページからお知らせページを作成します。
STEP
タブブロックを追加する
STEP
右側＞ブロック＞スタイル＞ふきだしを選択（※お好きなスタイル選択で）
STEP
ふきだし内にカテゴリーの項目名を記入
項目を削除したいときは「×」増やしたいときは＋で増やせます。
STEP
右側＞ブロック＞タブサイズ設定（PC）＞固定幅を選択
ちょっと幅が狭いので固定幅にして見た目を整えます。
STEP
すべてタブに投稿ページを設定
すべてのタブを選択した状態で【＋】投稿リストのブロックを追加します。
STEP
投稿リストの見え方を調整する
投稿リストを選択した状態で右側ブロック＞Settingの項目を調整します。
- 表示する投稿数 ⇒ 5
- レイアウトを選択 ⇒ リスト型
- MOREリンクの表示テキスト ⇒もっと見る
これですべてを選択したときの投稿リストは完成です。
続いてカテゴリーごとに絞ったリストを表示させます。
STEP
各タブ項目にページを設定する
イベントタブに先ほどと同じ手順で投稿リストブロックを追加します。
STEP８と同様にして右側ブロック＞Settingの項目を調整します。
右側ブロック＞Pickup＞タクソノミーの条件設定＞カテゴリー＞イベントを選択。
これによりカテゴリー【イベント】のみの投稿リストが表示されます。
MOREリンクの表示テキストもいれて、ボタンリンクもだしておきましょう。
STEP
各ページに対してSTEP9の作業を行う
あとは同様にして他のタブ項目も作成していきましょう。
まとめ
お疲れ様でした！タブで切り替えできるお知らせページの作成方法紹介でした。
上記手順で選択項目を細かく変更してもらい、お好みの表示にアレンジしてみてくださいね。
それではよいSWELLライフを！！
