ブログ

【AFFINGER5】トップページにカテゴリごとの最新記事を表示するカスタマイズ

更新日:

最近ワードプレスの人気のカスタマイズとして「トップページにカテゴリページの記事の一覧を表示するというのがあります。

AFFINGERでトップページにカテゴリページの記事の一覧を表示するとこんな感じ!

トップページにカテゴリごとの記事を表示させるってこんな感じ!

ワードプレステーマの「JIN」、「SANGO」、「AFFINGER」でもこのカスタマイズをしているブログをいくつか見て気になっていました。

そして同じAFFINGERを利用している「パラレルワールド(Ryotaさんのブログ)」でもこのカスタマイズをしているのを見かけて、その見やすさに感動!

ということで、わたしがした「AFFINGER5(WING)でトップページにカテゴリごとの最新記事を表示するカスタマイズ」の手順を書いていきますね。

トップページにカテゴリページごとの最新記事を表示するカスタマイズとは

今回したいカスタマイズはこちらです。どん!!

AFFINGERでトップページにカテゴリページの記事の一覧を表示するとこんな感じ!

トップページにどーんとカテゴリページごとの最新記事が自動で表示されます。

自動で表示されるからラクチンだね!

わたしの場合は

  1. 貯金・節約
  2. お気に入り
  3. ブログ

の3つのカテゴリをそれぞれ分けて表示しています。

記事を表示するカテゴリは単独のカテゴリも指定できますし、複数のカテゴリを指定(わたしのカテゴリの例で言うと「お気に入り」と「ブログ」の2つのカテゴリとか)して表示することも可能です。

複数のカテゴリを指定して表示させるカスタマイズも可能!

複数のカテゴリを指定して表示させることもできます。

そしてAFFINGERの場合、子テーマを何を使っているかでちょっと見栄えが違ってきます。

というのも、見本にした「パラレルワールド(Ryotaさんのブログ)」では記事がカード型になるAFFINGERの有料子テーマ「JET」を利用しているのでカード型になっていますが、通常のAFFINGER5の子テーマでは記事をカード型で表示することができません

JETを利用していないAFFINGERでカテゴリ表示をさせるとこんな感じに・・・。

JETじゃないとカード型で表示できない…。しかもアイキャッチ画像が正方形になってる。

わたしもJETが欲しいのですが、子テーマが変わるといろいろ微調整をするのが面倒で(まだ記事数は10記事程度なのにwむしろ変えるなら今のうちなのにw)JETは今のところは購入する予定はありません。

ということで、JETを使っていなくて文字の大きさやバランスの悪さが気になったので、スライドショーで表示させてなんとなく形を整えました

カテゴリ表示をスライドショーにするかしないかはお好みで決めましょう!

スライドショーで表示させるのとさせないのを比較するとこんな感じ。

スライドショーだとページが少し重くなりそうですが、バランスが良くなったのでこれでよし!笑

もちろんスライドショーでなくても表示させられますので、お好みでカスタマイズしてみましょう。

AFFINGERでトップページにカテゴリを表示させる方法

それではAFFINGERのトップページにカテゴリごとの最新記事を表示させてみましょう。

step
1
トップページをカスタマイズする場所を決める

まずは「AFFINGER管理」→「トップページ」を選択します。

トップページをカスタマイズできる場所は2か所あります。

AFFINGERの「挿入コンテンツ」でカスタマイズまたは「トップページに固定記事を挿入」でカスタマイズしていく

出展:ワードプレス(AFFINGER5)

  1. 「挿入コンテンツ」でカスタマイズ
  2. 「トップページに固定記事を挿入」でカスタマイズ

①挿入コンテンツ」でカスタマイズしてカテゴリを表示させる場合は、直接入力して保存するだけでOKです。

②トップページに固定記事を挿入」でカスタマイズしてカテゴリを表示させる場合は、まずは固定記事でカテゴリを表示させるコンテンツを作成し、その固定記事のIDを入力します。

Check!

わたしは「②トップページに固定記事を挿入」でトップページのカテゴリページをカスタマイズしています。

この方法だと場合によってはサイトマップに固定ページが含まれてしまうので非表示の設定にしておきましょう。

step
2
表示させるカテゴリのカスタマイズ

トップページをカスタマイズする場所を決めたら以下のコードを貼り、カテゴリをカスタマイズします。

[st-catgroup cat="表示したいカテゴリID" page="表示したいページ数" order="降順、昇順の指定" orderby="並び方法" child="子カテゴリーの表示の有無" slide="スライドショー化の有無" slides_to_show="スライドショー表示時の列数" slide_date="日付表示の有無" slide_more="続きを読む"]

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

スライドショー化の有無は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でバナー風リンクを使うとこんな感じになります!

バナー風リンクを使うとこんな感じにおしゃれに!バナー風リンクの作り方は「ブログやホームページで「バナー」のようなボタンを簡単に作る方法」(AFFINGER公式サイト)に載っています。

わたしはボックスデザイン(サルワカ様)を参考に、HTMLで見出しを表示させています。

まとめ:トップページにカテゴリごとの最新記事を配置することで見やすく!

AFFINGERで「トップページにカテゴリごとの最新記事を配置する方法」を書いてきました。

カテゴリごとの最新記事が表示されることで、そのジャンルに興味がある人に記事を読んでもらいやすくなることを期待しています。笑

いろんな魅せ方で楽しめる機能なのでぜひ利用してみましょう!

JETがもっと欲しくなってしまった…。笑

Sponsored Link

 おすすめ 

貯金

貯金へ

節約

節約へ

家計簿

家計簿へ

ブログ

ブログへ

公的制度

公的制度へ

TOP

TOPへ

-ブログ

Copyright© OLあさとさんの節約帳 , 2019 All Rights Reserved Powered by AFFINGER5.