WordPress

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

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

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

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

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

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

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

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

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

です。

メモ

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

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

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

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

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

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

AFFINGER5 / STINGER PRO2(通常版) ver20190809β公開のお知らせ

本日迄!EX期間限定割引 2019/08/15までEX版アップデートを2,000円OFFで販売中です。 AFFINGER5EX版ページへ AFFINGER5及びSTINGER PRO2通常版のver2 ...

【EX】target="_blank"削除設定追加 ~ WING ver20190809βアップデート

EX限定先行公開中のβ版にて以下の機能追加及び軽微な修正を行ったver20190809βを公開致しました。 EX版 購入ユーザー限定ページ 記事内のリンクからtarget="_blank"を一括で削除 ...

【不具合修正・機能追加】WING ver20190807βアップデートのお知らせ

先行配布中のEXver20190801βにてコメントが正常に投稿できない不具合がございました。 大変申し訳ございません。 こちらの修正と以下の機能追加を行いましたver20190807βを購入ユーザー ...

【超アップデートのお知らせ】NEW FACE、Gutenbergプラグイン配布、無限ループ(EX)など ~ WING ver20190801β

見た目を変える新しいデザインやGutenbergプラグイン配布、EX限定「無限スクロール」機能などを追加したver20190801βの内容を紹介します。 【追記】 現在、AFFINGER5及びSTIN ...

no image
目次プラグイン「ペーパー風デザイン」について

すごいもくじプラグインと連動したカスタマイザーの「ペーパー風デザイン」を使用するとコンテンツ幅を超えることにより、モバイル閲覧時に 横揺れが発生する 左によるケースがある とのご報告を頂きました。 申 ...

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

AFFINGER5 / STINGER PRO2(通常版) ver20190809β公開のお知らせ

本日迄!EX期間限定割引 2019/08/15までEX版アップデートを2,000円OFFで販売中です。 AFFINGER5EX版ページへ AFFINGER5及びSTINGER PRO2通常版のver2 ...

【EX】target="_blank"削除設定追加 ~ WING ver20190809βアップデート

EX限定先行公開中のβ版にて以下の機能追加及び軽微な修正を行ったver20190809βを公開致しました。 EX版 購入ユーザー限定ページ 記事内のリンクからtarget="_blank"を一括で削除 ...

【不具合修正・機能追加】WING ver20190807βアップデートのお知らせ

先行配布中のEXver20190801βにてコメントが正常に投稿できない不具合がございました。 大変申し訳ございません。 こちらの修正と以下の機能追加を行いましたver20190807βを購入ユーザー ...

【超アップデートのお知らせ】NEW FACE、Gutenbergプラグイン配布、無限ループ(EX)など ~ WING ver20190801β

見た目を変える新しいデザインやGutenbergプラグイン配布、EX限定「無限スクロール」機能などを追加したver20190801βの内容を紹介します。 【追記】 現在、AFFINGER5及びSTIN ...

no image
目次プラグイン「ペーパー風デザイン」について

すごいもくじプラグインと連動したカスタマイザーの「ペーパー風デザイン」を使用するとコンテンツ幅を超えることにより、モバイル閲覧時に 横揺れが発生する 左によるケースがある とのご報告を頂きました。 申 ...

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

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

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

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


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

2019/8/15

AFFINGER5 / STINGER PRO2(通常版) ver20190809β公開のお知らせ

本日迄!EX期間限定割引 2019/08/15までEX版アップデートを2,000円OFFで販売中です。 AFFINGER5EX版ページへ AFFINGER5及びSTINGER PRO2通常版のver20190809βを購入ユーザー限定ページにて公開しました(自動更新アップデートは未対応です)。 併せて専用Gutenbergプラグインも公開しております。 β版の為、販売中のものには当機能は反映されておりません。購入後、別途ダウンロードして下さい。 アップデート詳細は以下をご確認下さい。 【超アップデートのお ...

ReadMore


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

2019/8/9

【EX】target="_blank"削除設定追加 ~ WING ver20190809βアップデート

EX限定先行公開中のβ版にて以下の機能追加及び軽微な修正を行ったver20190809βを公開致しました。 EX版 購入ユーザー限定ページ 記事内のリンクからtarget="_blank"を一括で削除する設定 CSS調整 bugfix また先日の20190807アップデートでは以下の追加を行っております。 使用しないウィジェットを非表示にする設定 記事一覧デザインの設定追加 詳しくはコチラ 「テーマ管理」>「その他」 投稿・固定ページの記事内に記載されたコンテンツ等*が対象です(AMP対応)。 * 原則、 ...

ReadMore


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

2019/8/9

【不具合修正・機能追加】WING ver20190807βアップデートのお知らせ

先行配布中のEXver20190801βにてコメントが正常に投稿できない不具合がございました。 大変申し訳ございません。 こちらの修正と以下の機能追加を行いましたver20190807βを購入ユーザー限定ページにUP致しましたのでご変更お願い致します。 また、Gutenbergプラグインもver20190807に機能追加アップデートしております。 (※Gutenbergプラグインに関しましては今後しばらくは追加及び修正アップデートを繰り返す可能性がございます。ご了承下さい。) EX 期間限定割引中 201 ...

ReadMore


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

2019/8/16

【超アップデートのお知らせ】NEW FACE、Gutenbergプラグイン配布、無限ループ(EX)など ~ WING ver20190801β

見た目を変える新しいデザインやGutenbergプラグイン配布、EX限定「無限スクロール」機能などを追加したver20190801βの内容を紹介します。 【追記】 現在、AFFINGER5及びSTINGER PRO2通常版も20190809βを公開済みです。 ご注意事項 現時点のver20190801β版及びGutenbergプラグインはEX版 購入ユーザーのみ、限定ページにて先行公開しております。 AFFINGER5及びSTINGER PRO2通常版への公開は8月中旬予定です。 EX版販売のご案内はコチ ...

ReadMore


no image

不具合情報

2019/8/2

目次プラグイン「ペーパー風デザイン」について

すごいもくじプラグインと連動したカスタマイザーの「ペーパー風デザイン」を使用するとコンテンツ幅を超えることにより、モバイル閲覧時に 横揺れが発生する 左によるケースがある とのご報告を頂きました。 申し訳ございません。 モバイルの横揺れに関しましては以下のCSSを追加CSSなどに記載頂けば改善可能です。 @media print, screen and (max-width: 599px) { #wrapper { overflow:hidden; } } 参考:スマートフォンで横揺れする(公式マニュアル ...

ReadMore

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

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

step
3
全体を仕上げる

サンプルサイト

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

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

ボタンについて

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

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

好きなのを選ぶだけ

もっと見る

もっと詳しく

まとめ

まとめると

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

以上となります。

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

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

-WordPress

Copyright© AFFINGER(WING) , 2019 All Rights Reserved Powered by AFFINGER5.