【SWELL】子カテゴリーを別ページで表示する〜初心者でも簡単にトップページからリンクさせる方法

こんにちは、サイト運営者のきりんです。

今回の記事では、SWELLのトップページで表示している【親カテゴリー】をクリックすることにより、別ページで【子カテゴリー】を表示する方法を紹介します。

これをするには【子カテゴリー】及び【親カテゴリー】を表示するページを個別に作っておくこと、そしてそれらをリンクさせる必要があります。

こちらの記事内では、【親カテゴリー】を「野菜」【子カテゴリー】を「緑黄色野菜」と仮定しました。

最終的にこの形を目指していく記事です。

この記事を読めば、【親カテゴリー】から別ページで【子カテゴリー】を表示させることができるようになり、見た目がすっきりするだけでなく、読者も目的の記事を探しやすくなります。

SWELLでは初心者でも簡単に作成ができました！

事前に知っている箇所は読み飛ばして進めてください♪

カテゴリーとは

カテゴリーは簡単に言うと分類です。

例えば、【野菜】というカテゴリーの中に【緑黄色野菜】があり、【緑黄色野菜】の中に【にんじん】があったとします。

SWELLの場合【野菜】が親カテゴリー、【緑黄色野菜】が子カテゴリー、【にんじん】が孫カテゴリーです。

※この記事内では孫カテゴリーは割愛します。

親カテゴリーの作成方法

まず、記事作成後、投稿画面の設定で新規カテゴリーを作成します。

記事作成ページ内に【投稿/ブロック】の表示がなかったら右上の歯車マークをクリック！

【投稿】ページの真ん中のあたりに【カテゴリー】の選択項目があります。新規カテゴリー名を入力したら【新規カテゴリーを追加】をクリック。

これが親カテゴリーとなります。

親カテゴリーの項目はそのままでOK！同様に他の記事でもカテゴリーを作成。

子カテゴリーの作成方法

ここでは【野菜】と言う親カテゴリーの中に【緑黄色野菜】という子カテゴリーがあることを仮定しているので、続いて子カテゴリーを作成していきます。

作成方法　その１

ダッシュボードの【投稿】から【カテゴリー】を選択します。入力後、親カテゴリーを選択→【新規カテゴリーを追加】をクリック。

名前と書いてある欄が【子カテゴリー】になる項目です。

作成方法　その２

親カテゴリーと同様の方法で行います。

記事作成ページより、新規カテゴリー（子ページに表示したいカテゴリー）を追加し、親カテゴリーを選択→【新規カテゴリーを追加】をクリックします。

この方法でカテゴリーを作った場合、カテゴリーのURLスラッグが漢字のままになっているので、ダッシュボードの【投稿】→【カテゴリー】でスラッグを英数字とハイフンのみに変更しておきましょう。

リンク先の子カテゴリーの内容は別ページで先に作っておく

上記イラストの右側（子カテゴリーの部分）をまず作成します。

こちらのページは「固定ページ」で作成します。

ダッシュボードの【固定ページ】から【新規追加】をクリックします。

野菜という親カテゴリーをタイトルに入力し、本文に緑黄色野菜を表示していきます。

【ブロックを追加】から【フルワイド】→見出しの欄に【緑黄色野菜】と入力しました。

フルワイドブロックだと文字だけになるので、次の段落で【カラム】ブロックを選択。

今回は左側に画像、右側に文章を入力しましたが、割合や画像だけでも作成できます！

この下に子カテゴリーの記事を呼び出したい時は【ブロックを追加】から【投稿リスト】をクリック。

こちらも同様に【歯車】マークの【pick up】から【タクソノミーの条件設定】からカテゴリーの【緑黄色野菜】を選択。

後の記事のレイアウトや投稿順序は【Settings】項目から、お好みで♪

削除したくてもうまく選択できない時は、ページ下の選択項目が合っているかを確認！

子カテゴリーが他にもあれば、同様に作成して保存しましょう。

親ページを作成する

今度はトップページの表示する親カテゴリーの（赤で囲んだ）部分です。

こちらも【固定ページ】で作成していきます。

子ページと同様の方法で、【固定ページ】から【新規追加】で作成します。

はじめの段落は、ブロックで【フルワイド】を選択。見出しは親カテゴリーの【野菜】にしました。

そして、次のブロックで【カラム】を選択します。

このままでは、【子カテゴリー】に繋がらないので、クリックすると【子カテゴリー】のページに飛べるボタンを作成していきます。

親ページに子ページのリンクを貼る

文章の最後に【swellボタン】のブロックを追加し、歯車からスタイルを【MOREボタン】を選択し、テキストを「もっと見る」などに変更します。

先ほど作成した親カテゴリーの「もっと見る」に子カテゴリーのリンクのURLを貼ります。

URLはダッシュボードの【投稿】→【カテゴリー】でカテゴリー選択した後【表示】をクリック。

トップページで親カテゴリーを含む固定ページを表示させる方法

これで、【親カテゴリー】のページと【子カテゴリー】のページが繋がったので最後に、作成した【親カテゴリー】のページをトップページに設定していきます。

ダッシュボードの【外観】→【カスタマイズ】を選択。【WordPress設定】→【ホームページ設定】で【ホームページの表示】を＜固定ページ＞にしておきます。

そして、ホームページの欄は先ほど作成した固定ページの【HOME】を選びます。

上記方法で固定ページ【HOME＝トップページ】になりました！

これで、固定ページで作成したものがトップページに表示されます。

最終的にきちんと反映されているかチェックしてみましょう♪

まとめ

以上です。

今回の記事では紹介した内容を確認してみましょう。

これらをすることにより、全てのカテゴリーを表示させることがなくなり見た目がすっきりするだけでなく、読者もカテゴリーが探しやすくなりますね。

SWELLでは初心者でも簡単に作成できましたので是非試してみてください♪

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク