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

Cocoonショートコード一覧

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

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

目次

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

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

例)

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

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

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

Cocoonのショートコードとは

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

あわせて読みたい
Gutenbergにお問い合わせフォームを設置する簡単な方法 お問い合わせフォームプラグインContactForm7を設置して、プライバシーポリシーの準備をしましょう。Gutenbergで設置する場合の方法をご紹介しています。

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

Cocoonのショートコード一覧

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

Cocoon
記事作成時に利用できるショートコード集 記事の本文中に動的な処理を追加することができるショートコードの使い方など。 全体のショートコードの使い方をまとめたページがこちら(外部サイト)。
 

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

ものぐさWEBノート
Cocoonで使える[ショートコード]のオプションと使い方まとめ Cocoonで使えるショートコード+オプション一覧と、使い方が掲載されている公式ページへのリンク集的なまとめです。 便利な機能がたくさんあって流し見でこんな機能あった...

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

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

基本の表示

オプションの種類

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

  • アイテムの表示数(count)
    • 3件表示 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”
    • デフォルト 投稿のみ表示

まとめ

いかがでしたか?

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

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

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

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

そよパパ
そよパパ

Twitterで日々の生活のことTweetしています。気に入ってもらえたらフォローよろしくお願い致します♪

コンテンツがお役に立てれば幸いです。

2019/10/5 (連続更新26日目) ここ半月ほどは怒涛の忙しさ。なるほど、更新を続けるのは難しいのですね、と心が折れかけた日でした😂

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次