Cocoon ショートコードで最新記事一覧に画像を表示する

WordPressのGutenbergに用意されている最新記事一覧ブロックではリスト形式のみ対応していて、画像は一緒に表示されません。

Cocoonでは、ショートコードでそれを実現しているので、そちらを紹介します。

最新記事一覧ブロックとは

Gutenbergのブロックリストに用意してある便利なブロックの一つで、最新記事を簡単にリスト表示してくれます。

例）

• BuhoCleaner の詳細設定ガイド：全機能をマスターしよう
• 初心者でも安心！BuhoCleaner の使い方ガイド
• Mac クリーニングツール徹底比較！最適なツールはこれだ
• 無料で使えるMacクリーニングツール5選！効果的な選び方（おすすめ順）
• 無料で始めるStream Deck Mobile：基本設定からカスタマイズまで

最新記事一覧ブロックでできること

• 並び順の変更
• カテゴリーの選択
• 項目数の指定
• 日付表示有無

しかし、画像は一緒に表示されません。

Cocoonのショートコードとは

ショートコードとは、WordPressに用意されている機能の一つで、直近ではお問い合わせフォームを設置する時に、ショートコードを貼り付けるだけでページにお問い合フォームがでてきたと思いますが、あれのことです。

「こうしてね〜」と書いたテンプレートを呼び出して表示させる役割を持っています。

Cocoonのショートコード一覧

Cocoonで準備されているショートコードは、こちらのサイトにあります。

 

有志の方が作られているショートコードまとめサイトです。整理されていてわかりやすい！

最新記事一覧用のショートコード

ショートコードブロックを呼び出して、ショートコードをコピペするだけで表示されます。難点は、プレビューしないと表示を確認できないところでしょうか。

基本の表示

オプションの種類

ショートコードにオプションを入れることにより、リストの表示を変更することができます。

• アイテムの表示数(count)
  • ３件表示　count=3
• 表示形式
  • ボーダー(default)
  • カード形式
    • 区切り線　border=1
    • カード枠線　border=2
  • サムネイル表示
    • 大きなサムネイル表示　border=large_thumb
    • 大きなサムネイルにタイトルを重ねる　 border=large_thumb_on
• 記事タイトルの太字化(bold)
  • 太字にする　 bold=1
• カードの右端に矢印（＞）表示(arrow)
  • 矢印表示　arrow=1
• class指定 (class)
  • class=”xxx”
• カテゴリ指定(cats)
  • cats=1,2,3
• 小カテゴリ指定(children)
  • children=1
  • デフォルトは0（子カテゴリを含めない）
• タクソノミー(taxonomy)
  • 検索グループの指定をする
  • カテゴリーを指定する(taxonomy=category)※catsが必要
  • タグを指定する(taxonomy=post_tag)※tagsが必要
• タグ指定(tags)
  • tags=1,2,3
• 並び替え順 (modified)
  • 更新日順 modified=1
  • デフォルトは投稿日順
• 表示順序(order)
  • 昇順　order=”asc”
  • デフォルトは降順 “desc”
• 固定表示されている記事の表示・非表示(sticky)
  • 表示しない sticky=0
• 表示するページタイプ(post_type)
  • 投稿ページ　post_type=”post”
  • 固定ページ　post_type=”page”
  • 両方　post_type=”post,page”
  • デフォルト 投稿のみ表示

まとめ

いかがでしたか？

ブログにありがちな一覧表示は、サイドバーのウィジェットやページ下部に見ることがあると思います。

しかし、最初は文字列のみの表示になっていて、設定を変更しても画像が表示されないので困ります。このショートコードは、それを簡単に解消し、かつカスタマイズして好きなカテゴリを選択できたりします。

再利用ブロックに登録しておくのも良いと思いますよ。

最後まで読んでいただきありがとうございました。