最近ワードプレスの人気のカスタマイズとして「トップページにカテゴリページの記事の一覧を表示するというのがあります。
トップページにカテゴリごとの記事を表示させるってこんな感じ！
ワードプレステーマの「JIN」、「SANGO」、「AFFINGER」でもこのカスタマイズをしているブログをいくつか見て気になっていました。
そして同じAFFINGERを利用している「パラレルワールド（Ryotaさんのブログ）」でもこのカスタマイズをしているのを見かけて、その見やすさに感動！
ということで、わたしがした「AFFINGER5（WING）でトップページにカテゴリごとの最新記事を表示するカスタマイズ」の手順を書いていきますね。
Contents
トップページにカテゴリページごとの最新記事を表示するカスタマイズとは
今回したいカスタマイズはこちらです。どん！！
トップページにどーんとカテゴリページごとの最新記事が自動で表示されます。
自動で表示されるからラクチンだね！
わたしの場合は
- 貯金・節約
- お気に入り
- ブログ
の3つのカテゴリをそれぞれ分けて表示しています。
記事を表示するカテゴリは単独のカテゴリも指定できますし、複数のカテゴリを指定（わたしのカテゴリの例で言うと「お気に入り」と「ブログ」の2つのカテゴリとか）して表示することも可能です。
複数のカテゴリを指定して表示させることもできます。
そしてAFFINGERの場合、子テーマを何を使っているかでちょっと見栄えが違ってきます。
というのも、見本にした「パラレルワールド（Ryotaさんのブログ）」では記事がカード型になるAFFINGERの有料子テーマ「JET」を利用しているのでカード型になっていますが、通常のAFFINGER5の子テーマでは記事をカード型で表示することができません。
JETじゃないとカード型で表示できない…。しかもアイキャッチ画像が正方形になってる。
わたしもJETが欲しいのですが、子テーマが変わるといろいろ微調整をするのが面倒で（まだ記事数は10記事程度なのにwむしろ変えるなら今のうちなのにw）JETは今のところは購入する予定はありません。
ということで、JETを使っていなくて文字の大きさやバランスの悪さが気になったので、スライドショーで表示させてなんとなく形を整えました。
スライドショーで表示させるのとさせないのを比較するとこんな感じ。
スライドショーだとページが少し重くなりそうですが、バランスが良くなったのでこれでよし！笑
もちろんスライドショーでなくても表示させられますので、お好みでカスタマイズしてみましょう。
AFFINGERでトップページにカテゴリを表示させる方法
それではAFFINGERのトップページにカテゴリごとの最新記事を表示させてみましょう。
step
1トップページをカスタマイズする場所を決める
まずは「AFFINGER管理」→「トップページ」を選択します。
トップページをカスタマイズできる場所は2か所あります。
出展：ワードプレス（AFFINGER5）
- 「挿入コンテンツ」でカスタマイズ
- 「トップページに固定記事を挿入」でカスタマイズ
「①挿入コンテンツ」でカスタマイズしてカテゴリを表示させる場合は、直接入力して保存するだけでOKです。
「②トップページに固定記事を挿入」でカスタマイズしてカテゴリを表示させる場合は、まずは固定記事でカテゴリを表示させるコンテンツを作成し、その固定記事のIDを入力します。
Check!
わたしは「②トップページに固定記事を挿入」でトップページのカテゴリページをカスタマイズしています。
この方法だと場合によってはサイトマップに固定ページが含まれてしまうので非表示の設定にしておきましょう。
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がもっと欲しくなってしまった…。笑
