図書館へ行かずに本を沢山読もう!Kindle Unlimited を利用する

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

Cocoonショートコード一覧Cocoon

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

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

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

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

例)

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

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

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

Cocoonのショートコードとは

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

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

Cocoonのショートコード一覧

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

 

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

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

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

基本の表示

囲碁入門
豆乳ヨーグルトとチーズの作り方を紹介します【レシピ付】
庭に咲く雑草の花を調べてみた♪『雑草の花図鑑』が素晴らしい!
食後のデザートにゼリーを作ろう♪6年で1800回以上作ってきた簡単で無理のない作り方を公開
5月は家庭菜園も忙しい時期〜バジルの苗の植え方・増やし方

オプションの種類

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

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

まとめ

いかがでしたか?

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

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

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

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

そよパパ
そよパパ

WordPress好きなんだなーっとしみじみ感じてます。


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

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

2019/9/9より連続した更新は12月で止まりました💧

毎日更新し続けられる人、本当に尊敬しか無い。

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

コメント

タイトルとURLをコピーしました