最近ワードプレスの人気のカスタマイズとして「トップページにカテゴリページの記事の一覧を表示するというのがあります。
トップページにカテゴリごとの記事を表示させるってこんな感じ！
ワードプレステーマの「JIN」、「SANGO」、「AFFINGER」でもこのカスタマイズをしているブログをいくつか見て気になっていました。
そして同じAFFINGERを利用している「パラレルワールド（Ryotaさんのブログ）」でもこのカスタマイズをしているのを見かけて、その見やすさに感動！
ということで、わたしがした「AFFINGER5（WING）でトップページにカテゴリごとの最新記事を表示するカスタマイズ」の手順を書いていきますね。
Contents
トップページにカテゴリページごとの最新記事を表示するカスタマイズとは
今回したいカスタマイズはこちらです。どん！！
トップページにカテゴリページごとの最新記事が自動で表示されます。
自動で表示されるからラクチンだね！
わたしの場合は
- 貯金・節約
- お気に入り
- ブログ
の3つのカテゴリをそれぞれ分けて表示しています。
記事を表示するカテゴリは単独のカテゴリも指定できますし、複数のカテゴリを指定（わたしのカテゴリの例で言うと「お気に入り」と「ブログ」の2つのカテゴリとか）して表示することも可能です。
複数のカテゴリを指定して表示させることもできます。
そしてAFFINGERの場合、子テーマを何を使っているかでちょっと見栄えが違ってきます。
というのも、見本にした「パラレルワールド（Ryotaさんのブログ）」では記事がカード型になるAFFINGERの有料子テーマ「JET」を利用しているのでカード型になっています。
ですが通常のAFFINGER5の子テーマでは、記事をカード型で表示することができません。
AFFINGERは有料子テーマの「JET」じゃないとカード型で表示できないんです…。
わたしもJETが欲しいのですが、子テーマが変わるといろいろ微調整をするのが面倒なので、JETは今のところは購入する予定はありません。
ただ、カード型ちっくに表示させたい。
ということで、JETを使っていないと色々バランスが悪く見えるので、スライドショーの機能を使ってカード型”風”に表示し、なんとなく形を整えました。
スライドショーで表示させるのとさせないのを比較するとこんな感じ。スライドショーの方が見やすくないですか？
スライドショーだとページが少し重くなりそうですが、バランスが良くなったのでこれでよし！笑
もちろんスライドショーでなくても表示させられますので、お好みでカスタマイズしてみましょう。
AFFINGERでトップページにカテゴリを表示させる方法
それではAFFINGERのトップページに、カテゴリごとの最新記事を表示させてみましょう。
step
1トップページをカスタマイズする場所を決める
まずは「AFFINGER管理」→「トップページ」を選択します。
トップページをカスタマイズできる場所は2か所あり、それぞれでやり方が異なります。
出展：ワードプレス（AFFINGER5）
やり方は2通り！
- 「トップページに固定記事を挿入」でカスタマイズ
- 「挿入コンテンツ」でカスタマイズ
「①トップページに固定記事を挿入」でカスタマイズしてカテゴリを表示させる場合は、まずは固定記事でカテゴリを表示させるコンテンツを作成し、その固定記事のIDを入力します。
「②挿入コンテンツ」でカスタマイズしてカテゴリを表示させる場合は、直接入力して保存するだけでOKです。
注意！
わたしは「①トップページに固定記事を挿入」でトップページのカテゴリページをカスタマイズしています。
この方法だと、場合によっては該当の固定ページがサイトマップに含まれてしまうため、必要に応じて該当の固定ページをサイトマップに表示しない設定にしておきましょう。
step
2表示させるカテゴリのカスタマイズ
トップページをカスタマイズする場所を決めたら、以下のコードを貼って、必要に応じてカスタマイズします。
[st-catgroup cat="表示したいカテゴリID" page="表示したいページ数" order="降順、昇順の指定" orderby="並び方法" child="子カテゴリーの表示の有無" slide="スライドショー化の有無" slides_to_show="スライドショー表示時の列数" slide_date="日付表示の有無" slide_more="続きを読む"]
スライドショー化の有無はONまたはOFFを入力するだけで切り替え可能です。
わたしの設定内容は以下のとおりです。
設定
- 表示したいページ数：3
- スライドショー：ON
- スライドショー表示時の列数：大画面（960px以上）3列、中画面（600px～959px）3列、小画面小画面（599px以下）2列
- 日付表示の有無：あり
- 続きを読む：表示しない
コード
[st-catgroup cat="カテゴリID" page="3" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="on" slide_more=""]
step
3見出しなどを整えて完成！
カテゴリの見出しを作成します。ボックスデザインを使ってHTMLで表示させるのもいいですし、バナー風リンクを利用してもおしゃれです。
バナー風リンクを使うとこんな感じにおしゃれに！バナー風リンクの作り方は「ブログやホームページで「バナー」のようなボタンを簡単に作る方法」（AFFINGER公式サイト）に載っています。
わたしはボックスデザイン（サルワカ様）を参考に、HTMLで見出しを表示させています。
まとめ：トップページにカテゴリごとの最新記事を配置することで見やすく！
AFFINGERで「トップページにカテゴリごとの最新記事を配置する方法」を書いてきました。
カテゴリごとの最新記事が表示されることで、そのジャンルに興味がある人に記事を読んでもらいやすくなることを期待しています。笑
いろんな魅せ方で楽しめる機能なので、ぜひ利用してみましょう！
JETがもっと欲しくなってしまった…。笑
