このブログはWordPressの無料テーマであるcocoonを使用していますが、僕はTOPページにカテゴリー別の新着記事を表示するようにしています。
こんな感じですね。
ここではcocoonでカテゴリー別の新着記事を表示する方法を紹介しますが、エディタはGutenbergを使用しています。クラシックエディタを使用している場合は…すまぬ。
カテゴリー別の新着記事を表示する方法
新着記事を表示するためにはショートコードを記入しますが、コードは[]で囲みます。ここでそのまま記入すると新着記事が表示されてしまうので分けますが、[]の中にnew_listと記入します。
これで新着記事を表示できますが、このままではただ新着記事が表示されるだけ。カテゴリー別にするには、カテゴリーIDが必要になります。
IDを確認するには管理画面の「投稿→カテゴリー」と進みます。続いて該当するカテゴリー名にマウスを合わせると、下の画像のように画面下に小さくコードが表示されます。
そこの「category&tag_ID=○」の数値がIDになります。画像の場合は「3」ですね。
スマホの場合、カテゴリー名を長押ししてアドレスをコピーし、メモ帳などにペーストすると同じコードが表示されるので、そこでIDが確認できます。
カテゴリー別の新着記事を表示するには、new_listの後に半角スペースを空け、cats=○と記入します。例えば「new_list cats=3」という感じ。
この「」を[]に変えると、以下のように表示されます。
これでカテゴリー別の新着記事が表示できますが、これだと素っ気ないのでお好きなようにカスタマイズしましょう。
僕はシンプルに見出しと2カラムを使用して、ブログカードの表示を変えるくらいにしています。
実際のTOPページで記入しているコードです。
見出し2に「カテゴリー別新着記事」、2カラムにして左右の見出し3に「カテゴリー名」、その下の段落に新着記事のコードを記入、その下にはカテゴリーページのリンクを付けています。
2カラムにしてもスマホでは一列になりますが、パソコンだと2カラムのほうがすっきりします。
これでどのようになるか、TOPページで確認してください。実際には先にお勧め記事を紹介していますが、その下にカテゴリー別新着記事を表示しています。
なお、記事の表示タイプは「type＝○」で指定することができます。
- default：通常のリスト
- border_partition：カードの上下に区切り線を入れる
- border_square：カードに枠線を表示する
- large_thumb：大きなサムネイル表示
- large_thumb_on：大きなサムネイルにタイトルを重ねる
僕のTOPページでは赤字にしたタイプを使用。他のタイプがどう表示されるかは実際に試して確認してください。
count=○は表示する記事数を指定しますが、デフォルトが5となっているようなのでわざわざ記入する必要はなかったですね（後で気付いた）。
cocoonの公式サイトに色んなカスタマイズのコードが紹介されているので、もっと装飾したい方はそちらを参考にしてください。
コメント