MENU
このサイトは広告を含みます広告や情報について

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

【PR】当ページのリンクには広告が含まれています。

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

ジャンプできる目次

カテゴリーとは

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

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

親カテゴリーの作成方法

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

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

子カテゴリーの作成方法

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

作成方法 その1

【SWELL】子カテゴリーを別ページで表示する方法

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

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

作成方法 その2

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

【SWELL】子カテゴリーを別ページで表示する方法
ダッシュボードの画面⇧矢印箇所を変更します

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

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

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

【SWELL】子カテゴリーを別ページで表示する方法
今回は「フルワイド」と「カラム(3:7)」で作成

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

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

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

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

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

【SWELL】子カテゴリーを別ページで表示する方法
投稿リストを選択中⇧

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

親ページを作成する

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

【SWELL】子カテゴリーを別ページで表示する方法
カラムの割合は50/50にしています⇧

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

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

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

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

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

【SWELL】子カテゴリーを別ページで表示する方法

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

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

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

まとめ

以上です。

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

  • 【親カテゴリー】を作成
  • 【子カテゴリー】を作成
  • 【親カテゴリー】の固定ページを作成
  • 【子カテゴリー】の固定ページを作成
  • 親子の固定ページをリンク
  • トップページに固定ページを設定

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

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

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

スポンサーリンク

よかったらシェアしてね!
  • URLをコピーしました!
ジャンプできる目次