この記事は1年以上前に更新された内容のため、情報の一部が古い場合があります。最新の情報は公式マニュアルをご確認下さい。

WordPress

トップページにカテゴリ一別の一覧を作成する方法

WordPressでブログやサイトを作りたい時にトップページをジャンル別（カテゴリ）の一覧でまとめる方法です。

ステ子
闇雲に記事を羅列するよりも関連する記事だけの一覧にまとめることでぐっと読みやすく、見つけやすいトップページが作れるわよ

※当記事はWordPressテーマ「WING（AFFINGER5及びSTINGER PRO2）」を元に説明しています

トップページにカテゴリ一別の一覧を表示する方法

step
1トップページにコンテンツを挿入する

トップページにコンテンツを挿入する方法は2つあります

①「テーマ管理」＞②「トップページ」にて

  1. ③「トップページに固定記事を挿入」する方法
  2. ④「挿入コンテンツ」で直接コンテンツを挿入する方法

です。

メモ

WordPressの表示設定で直接固定ページを「ホームページ」にする方法もあります

step
2カテゴリ一覧を作成する

上記のどちらかの方法でコンテンツを作成していきます。

カテゴリ一覧は「カテゴリ一覧ショートコード」で簡単に作成できます。

クイックボタンで選ぶだけ

挿入されるショートコードの内容は以下のとおりです。

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore"]

意味は以下のようになり、自由に変更できます。

[st-catgroup cat="表示したいカテゴリID" page="表示したいページ数" order="降順、昇順の指定" orderby="並び方法" child="子カテゴリーの表示の有無" slide="スライドショー化の有無" slides_to_show="スライドショー表示時の列数" slide_date="日付表示の有無" slide_more="続きを読む"]


表示したいカテゴリIDについて

表示したいカテゴリIDは「投稿」＞「カテゴリー」の一覧「ID」で確認できます。

複数のカテゴリを表示したい場合は「2,5,8」と半角カンマ（,）で区切ります。反対に表示したくないカテゴリがある場合は「2,-5」とカテゴリIDにマイナスを付けることで除外できます。

スライドショーで表示する

ACTION お知らせ バージョンアップ 不具合情報

2021/1/16

【修正】AFFINGER6 / STINGER PRO3 ver20210116アップデートのお知らせ

以下の修正を行いましたver20210116を購入ユーザー限定ページにUP致しました。 ver20210116 アーカイブページがエラーになる修正 お手数をお掛け致しますがご試用ユーザー様はアップデート頂きますようお願い致します。 EX版は問題ありませんので変更の必要はございません。 購入ユーザー限定ページ

ReadMore

ACTION お知らせ バージョンアップ

2021/1/14

ACTION β版 ver20210114 機能追加及びGutenbergプラグイン2 アップデートのお知らせ

以下の機能追加及び修正を行いましたACTION ver20210114及びGutenbergプラグイン2 ver20210112を購入ユーザー限定ページにUP致しました。 テーマアップデート時はGutenbergプラグイン2もver20210112にアップデートして下さい ver20210114 マイブロックのショートコード機能を追加 マイブロック（ブロックパターン）の内容をショートコードで出力する機能を追加しました。 通常の挿入時とは異なり、ショートコードで挿入した場合は元のブロックパターンに変更がある ...

ReadMore

ACTION お知らせ バージョンアップ 不具合情報

2021/1/12

AFFINGER / EX / STINGER PRO ver20210112アップデートのお知らせ

以下の変更及び修正を行いましたACTION ver20210112を購入ユーザー限定ページにUP致しました。 ver20210112 記事一覧ショートコードが設定できないケースがある修正（EX以外）カスタマイザーのフッター文字色の変更が反映されないケースがある修正LP時に記事タイトルとカテゴリも非表示にする設定を追加（テーマ管理＞「投稿・固定記事」）LP時のデザインを変更修正（※フッターの横幅もLPに合わせるよう変更）「ワイド化有効時に左右にシャドウを付ける」を「LP時に左右にシャドウを付ける」設定に変更 ...

ReadMore

ACTION お知らせ バージョンアップ 不具合情報

2021/1/7

【修正】AFFINGER6 / STINGER PRO3 ver20210107アップデートのお知らせ

以下の修正を行いましたver20210107を購入ユーザー限定ページにUP致しました。 ver20210107 タブ及びタブ式 カテゴリ一覧が正常に作動しない修正 お手数をお掛け致しますがご試用ユーザー様はアップデート頂きますようお願い致します。 EX版は問題ありませんので変更の必要はございません。 購入ユーザー限定ページ

ReadMore

ACTION お知らせ

2021/1/5

ACTION EXver20210105βアップデートのお知らせ

以下の追加、修正を行いましたver20210105βを購入ユーザー限定ページに公開致しました。 再利用ブロック用メニューの追加埋め込みURLを外部リンクにも対応（oEmbed 及びOGPに対応している埋め込み可能なWordPressサイト限定）カテゴリ・タグ（EX）ショートコード記事一覧にも投稿日を表示YouTubeサムネイルの表示修正見出しスタイルのアイコンに色設定が反映されない修正見出しスタイルに「ペン」「注意」を追加 ※既に公開済みの通常版には反映済みです https://on-store.net/ ...

ReadMore

カテゴリ一覧ショートコードの「slide="off"」を「slide="on"」とするだけでスライドショーにすることも可能です。

ENJI
スライドショーにすることでスマートフォンの閲覧スペースを有効に使ったり、「お客様の声」など同じようなニーズの記事をまとめることで効果的な訴求もできます

step
3全体を仕上げる

サンプルサイト

記事一覧ごとに「見出し」をつけながら一覧を作成していきます。

各一覧ごとに「一覧へのリンク」を作成してあげればさらにユーザビリティも回遊率もUPするのでおすすめです。

ボタンについて

クイックボタンには様々な種類のボタンを予め用意しています。

ボタンはリンク先はもちろん、「カラー（グラデーションOK）」「アイコン」「丸み具合」「テキスト」「光る演出の有無」などが自由にカスタマイズ可能です。

好きなのを選ぶだけ

もっと見る


もっと詳しく

まとめ

まとめると

  1. トップページにコンテンツを挿入する用意
  2. 挿入コンテンツに任意のカテゴリ一覧ショートコードを挿入
  3. 必要なカテゴリの数だけ作成

以上となります。

カテゴリ一覧はそれだけ記事を読み込む処理が必要となるので表示数を増やしすぎると処理に時間がかかる場合があります。必要に応じて適度に使用しましょう。

※当記事はWordPressテーマ「WING（AFFINGER5及びSTINGER PRO2）」を元に説明しています
※キャプチャは開発中の為、実際とは一部異なる場合がございます。

-WordPress