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にマイナスを付けることで除外できます。

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

バージョンアップ 不具合情報

2019/9/24

【WING / EX / JET】軽微な修正アップデート ver20190924bのお知らせ(追記あり)

以下の修正を加えたver20190924を各購入ユーザー限定ページに公開致しました。 MCボタン用のクイックタグでグリーンとブルーのカラーが反対になっている修正 ※STINGER PRO2にはMCボタンが無いので関係ございません また、記事一覧の更新日非表示の反映を行いました子テーマ「JET ver20190920」も購入ユーザー限定ページにUP致しました。 サーバー更新にも対応済みです。 追記 連続となり申し訳ありません、2点修正を追加したver20190924bをUP致しました。(そのままでも特に動作 ...

ReadMore

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

2019/9/12

【Chrome77不具合】Gutenbergで投稿エディタと設定が被る問題について~ WING ver20190912アップデート対応

当テーマに限らずChromeの最新バージョン(77)にてGutenbergを使用すると上記のように設定とコンテンツが被ってしまう症状が発生しています。 Metaboxes overlap Gutenberg in Chrome 77 恐らくGutenberg側で対応がされるかと思いますが、取り急ぎ改善バージョン(ver20190912)を各購入ユーザー限定ページ(及びサーバーアップデート)にアップ致しましたので症状に悩まれている方はアップデート頂ければと思います。 また、併せて以下の問題も改善しております ...

ReadMore

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

2019/9/9

WING ver20190909修正及び正式アップデートのお知らせ

以下の修正を加えたver20190909を各購入ユーザー限定ページに公開致しました。 またサーバー更新にも反映済みです(※自動更新パスワードが変更されております) 最新版アップデートの方法はコチラ WINGver20190909 修正及び調整内容 Rinkerプラグインのスマホ閲覧時のCSS調整 「リンクのtarget="_blank"を削除する」有効時に「記事内の外部リンクを別ウィンドウで開く」の無効化。またそれに伴い設定箇所の変更901 ぱんくずにカテゴリが表示されない修正(※20190801βからの ...

ReadMore

バージョンアップ 不具合情報

2019/9/4

修正アップデートのお知らせ WINGver20190904β

以下の修正 アップデート を行ったver20190904βを購入ユーザー限定ページにアップ致しました。 電話番号及びヘッダー右ウィジェットが表示されない場合がある 見出しタグデザイン「 囲み&左ラインデザインに変更 」のデザインが崩れる ご迷惑をお掛けして申し訳ございません。 上記不具合が出る場合は最新版にアップデート頂きますようお願い致します。

ReadMore

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

2019/9/3

WING ver2010903β・Gutenbergプラグインアップデートのお知らせ

機能追加などを行いましたWING ver20190901βを購入ユーザー会員ページにUP致しました。 最新版アップデートの方法はコチラ ステ子Gutenberg追加対応のため、引き続きβ版となりますがご理解ください(基本的な対応は完了しておりますので問題なければ一定期間後に通常版となります) β版の為、販売中のものには当機能は反映されておりません。購入後、別途ダウンロードして下さい WINGver201090901(共通)アップデート内容 記事一覧及びブログカードのラベル位置左右反映 記事一覧のサムネイル ...

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.