WordPressでブログやサイトを作りたい時にトップページをジャンル別（カテゴリ）の一覧でまとめる方法です。
ステ子
闇雲に記事を羅列するよりも関連する記事だけの一覧にまとめることでぐっと読みやすく、見つけやすいトップページが作れるわよ
※当記事はWordPressテーマ「WING（AFFINGER5及びSTINGER PRO2）」を元に説明しています
トップページにカテゴリ一別の一覧を表示する方法
step
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にマイナスを付けることで除外できます。
スライドショーで表示する
お知らせ
2021/9/7
お知らせの方法とメルマガの終了のご案内
旧WING（AFFINGER5/STINGER PRO2）では主な更新情報をTwitter（@WPSTINGER）の内容をWordPress管理画面の「お知らせ」にて表示しておりましたがACTION（AFFINGER6/STINGER PRO3）よりダッシュボードにて確認できるようになりました。 これに伴い、不定期で配信しておりましたメルマガ（現在登録停止中）サービスを終了させて頂きます（Twitterアカウントの運用は未定となっております）。 ご登録頂きましたメールマガジンのアドレスはサービス終了完了と ...
ReadMore
Gutenbergプラグイン2 ver20210830修正アップデートのお知らせ
WordPress5.8の仕様変更により起こる不具合対応の為、メモ、マイボックス、バナー風ボックス、カスタムボタンブロックのカスタムフォント設定を「px/em/rem」に変更しておりましたが、再更新時にブロックリカバリーが必要となる状況が発生していたため、再度、ver20210830にて「%」指定のみに修正変更を行いました。 修正版（ver20210830）を各購入ユーザー限定ページにアップ致しましたのでアップデート頂ければ幸いです。 度々の修正となり申し訳ございません。
ReadMore
ACTION ver20210827βアップデートのお知らせ
以下の機能追加、修正等を行いましたver20210827βを購入ユーザー会員ページにUP致しました。 β版の為。リリース及びサーバー更新には未対応です。後日、順次反映されます。 ver20210827β アップデート内容 Gutenberg マイブロックに「パターンに追加しない」設定を追加 マイブロック機能に作成したブロックを投稿画面のパターンに表示しない設定を追加しました。 管理バーに記事IDを表示する 投稿・固定記事のIDをログイン時の管理バーに表示するようにしました。 ヘッダーカードにサブテキストを ...
ReadMore
ACTION ver20210810アップデートのお知らせ
以下の機能追加及び修正と調整を行いましたver20210810を購入ユーザー会員ページにUP致しました。 見出しデザイン「ショートライン」の追加 カスタマイザーの記事タイトル、h2、h3タグの見出しデザインに「ショートライン」を追加しました。 「テキストを中央寄せ」にすると真ん中よりのショートラインになります。 ボーダーカラーは「ボーダー色」が反映されます。「ボーダー色（サブ）」にも同じ色を入れると太い線となります。 違う色を入れると図のようになります。 「上下の余白」は空だとデフォルトで下に30pxの余 ...
ReadMore
ACTION ver20210728アップデートのお知らせ
20210725βの最終調整を行いましたver20210728を購入ユーザー会員ページにUP致しました。 リリース版、サーバー更新にも対応済みです。 「STINGER閲覧数ランキング」ウィジェット削除 その他CSS調整及びbugfix 「STINGER閲覧数ランキング」ウィジェット削除について ACTIONよりEX版のWordPress Popular Posts連携終了をお知らせしておりましたが一部連携ウィジェット（STINGER閲覧数ランキング）が残ったままとなっておりました。 申し訳ございませんが廃 ...
ReadMore
カテゴリ一覧ショートコードの「slide="off"」を「slide="on"」とするだけでスライドショーにすることも可能です。
ENJI
スライドショーにすることでスマートフォンの閲覧スペースを有効に使ったり、「お客様の声」など同じようなニーズの記事をまとめることで効果的な訴求もできます
step
3全体を仕上げる
サンプルサイト
記事一覧ごとに「見出し」をつけながら一覧を作成していきます。
各一覧ごとに「一覧へのリンク」を作成してあげればさらにユーザビリティも回遊率もUPするのでおすすめです。
ボタンについて
クイックボタンには様々な種類のボタンを予め用意しています。
ボタンはリンク先はもちろん、「カラー（グラデーションOK）」「アイコン」「丸み具合」「テキスト」「光る演出の有無」などが自由にカスタマイズ可能です。
好きなのを選ぶだけ
もっと見る
もっと詳しく
まとめ
まとめると
- トップページにコンテンツを挿入する用意
- 挿入コンテンツに任意のカテゴリ一覧ショートコードを挿入
- 必要なカテゴリの数だけ作成
以上となります。
カテゴリ一覧はそれだけ記事を読み込む処理が必要となるので表示数を増やしすぎると処理に時間がかかる場合があります。必要に応じて適度に使用しましょう。
※当記事はWordPressテーマ「WING（AFFINGER5及びSTINGER PRO2）」を元に説明しています
※キャプチャは開発中の為、実際とは一部異なる場合がございます。
