grayishスキン適用中

新着記事一覧を表示するショートコードの利用方法

ショートコード
この記事は約4分で読めます。

Cocoonでは、ショートコードを用いて新着記事一覧を表示することが可能です。

これは、以前Simplicityテーマのフォーラムで、「どうやって実現したら?」と結構問い合わせが多かったので、今回実装することにしました。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

ショートコードの書き方

基本的にショートコードは、以下のように書いて利用できます。

[new_list]

デフォルトショートコード利用例

このように書くことで以下のように表示されます。

Cocoon 2.7.1公開。シェア・フォローアイコンにMastodonやMisskey等を追加。背景アイコン機能を追加
テーブルで◎○△×アイコンを用いた比較表を作る方法
パターン(旧再利用ブロック)を呼び出せるpatternショートコードの使い方
Cocoon 2.7.0公開。ads.txt編集・リファラー設定機能の追加。AMP・PWA・HTML縮小化機能の廃止
リファラーの振る舞いを変更する「リファラー設定」をする方法

オプションを用いたショートコードの書き方

new_listショートコードでは、オプション(引数)を用いることである程度表示をカスタマイズすることができます。

[new_list count=3 cats=3,5 type=large_thumb_on children=1]

表示例

テーブルで◎○△×アイコンを用いた比較表を作る方法
パターン(旧再利用ブロック)を呼び出せるpatternショートコードの使い方
リファラーの振る舞いを変更する「リファラー設定」をする方法

オプションの説明

new_listショートコードでは、以下のオプションを利用できます。

count

countには、アイテムの表示数を設定します。

入力例:count=10

デフォルト値:5

type

typeには、以下のうちいずれかの値を指定します。

  • default:通常のリスト
  • border_partition(or 1):カードの上下に区切り線を入れる
  • border_square(or 2):カードに枠線を表示する
  • large_thumb:大きなサムネイル表示
  • large_thumb_on:大きなサムネイルにタイトルを重ねる

デフォルト値:default

※一部1や2のような数字で指定出来るのは、旧バージョンとの互換性を保つためです。

それぞれの表示例はこちら。

default

default

border_partition(or 1)

border_square(or 2)

large_thumb

large_thumb

large_thumb_on

large_thumb_on

 

bold

boldオプションは、記事タイトルを太字にするかどうかです。

タイトルが太字になる

入力例:bold=1(太字にする)

デフォルト値:0(太字にしない)

arrow

arrowオプションは、カードに矢印を表示するかどうかです。

矢印の表示

入力例:arrow=1(矢印を表示する)

デフォルト値:0(矢印を表示しない)

class

classオプションには、リストのラップ要素に独自のclass属性を指定したい時に記入します。

拡張クラス追加オプション

入力例:class="ex-class"

入力例:class="ex-class1 ex-class2"(複数指定する場合はスペースで区切る)

デフォルト値:(空欄)

cats

catsには、表示するカテゴリをカンマ区切りで指定します。

入力例:cats=3,16,23

デフォルト値:all(全てのカテゴリを表示)

カテゴリIDは、カテゴリ設定画面のURL(tag_ID)から取得してください。
カテゴリIDを確認する方法はURLから

children

childrenは、子カテゴリの内容を含めて表示するかを指定します。

入力例:children=1

デフォルト値:0(子カテゴリーは含めない)

horizontal

horizontalは、デフォルトで縦並びだったリストを横並びに表示します。

入力例:horizontal=1

デフォルト値:0(縦並び表示)

v2.5.1~

動作例はこちら。

新着・人気記事ショートコードの横型表示(horizontal)オプション表示例
新着・人気記事ショートコードのhorizontalオプションの表示例です。 新着・人気・関連記事ウィジェットの横型表示オプションを有効にした場合の表示例でもあります。 新着記事の横型表示例 その他のオ...

tags

tagsには、表示するタグをカンマ区切りで指定します。(v1.5.7~)

入力例:tags=2,19,213

デフォルト値:(空欄)(デフォルトではタグ抽出しない)

タグIDは、タグ設定画面のURL(tag_ID)から取得してください。

modified

modifiedオプションは、更新日順にカードを並び替えます。(v1.7.6.9~)

入力例:modified=1(更新日順)

デフォルト値:0(投稿日順)

order

orderオプションは、表示順を切り替えます。(v1.5.9~)

最初から読んで欲しいコンテンツ出力に向いています。

入力例:order="asc"(昇順)

デフォルト値:desc(降順)

大文字小文字どちらで入力しても大丈夫です。

offset

offsetオプションは、ずらす(または読み飛ばす)投稿の数を設定します。(v2.3.9~)

入力例:offset=2(2つ読み飛ばす:3番目の記事から表示する)

デフォルト値:0

sticky

stickyオプションは、「固定表示」設定がされている記事の表示を切り替えます。(v1.5.7~)

入力例:sticky=0(表示しない)

デフォルト値:1(表示)

snippet

snippetオプションは、説明文を表示するかどうかを切り替えます。(v2.1.5~)

入力例:snippet=1(表示)

デフォルト値:0(表示しない)

post_type

post_typeは、表示する投稿タイプを選択します。(v0.7.2~)

入力例:post_type=“post,page”
[投稿と固定ページを表示]

入力例:post_type=“page”
[固定ページのみ表示]

入力例:post_type=“post,page,カスタム投稿名1,カスタム投稿名2”
[投稿・固定ページとカスタム投稿表示]

デフォルト値:post(投稿のみ表示)

taxonomy

taxonomyは、検索グループを指定します。(ver1.0.5~)

例えば、よく利用するものだと、以下のようなものがあります。

  • カテゴリー:category
  • タグ:post_tag

入力例:taxonomy="post_tag"(タグでグループ化する)

taxonomyにpost_tagを設定した場合はtagsオプションも設定してください。

デフォルト値:category(通常のカテゴリー表示)

taxonomyにcategoryを設定した場合はcatsオプションも設定してください。

author

authorは特定のユーザーが書き込んだ記事のみを表示させることができます。

特定のユーザーのみが書き込んだ記事を抽出するには、ユーザー管理画面の個別ページのURLからuser_idの値を取得してください。

管理画面からユーザーIDを取得する

入力例:author=1827

デフォルト値:(空欄)

ex_posts

ex_postsには、除外する投稿・固定ページIDをカンマ区切りで入力します。

入力例:ex_posts="3,16,23"

デフォルト値:(空欄)

v2.6.9.3~

ex_cats

ex_catsには、除外するカテゴリーIDをカンマ区切りで入力します。

入力例:ex_cats="2,14,18"

デフォルト値:(空欄)

v2.6.9.3~

応用編

レイアウト表示と、人気記事ショートコードを組み合わせて、利用することも可能です。

記事内を2カラム・3カラム・4カラムに分ける方法
投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。
人気記事一覧を表示するショートコードの利用方法
人気記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

例えば、以下のようにビジュアルエディターで入力したとします。

すると以下のように表示されます。

わいひら
わいひら

これらのショートコードが多少なりとも、サイト回遊率の向上につながれば幸いです。

ブロックエディター対応

ブロックエディター上でブロックとしても利用できます。

コメント テーマの質問はフォーラムへ

  1. iamyoneda より:

    誤植では?

    「新着記事一覧を表示するショートコードの利用方法」 の説明ページにて

    「引数の説明」 の 「count」 で

    「countには、アイテムの表示数を設定します。」  の下のところで

    「入力例:cats=3,15,23」
    --------------------

    「入力例:count=5」
    ---------------
    などではないでしょうか。

    • わいひら わいひら より:

      ご報告ありがとうございます!
      どうやら、同様の書式をコピペしたのはよかったものの、内容を修正するのを忘れていたようです。
      早速修正させていただきました。

  2. 大坂 より:

    "tagsには、表示するタグをカンマ区切りで指定します。(v1.5.7~)

    入力例:cats=2,19,213"

    「cats」?→ 「tags」

    • わいひら わいひら より:

      ご連絡ありがとうございます!
      カテゴリー部分のコピペをしたら、該当部分を修正するの忘れていました^^;
      上にあるコメントと全く同じミスをしてしまいました(笑)
      修正させていただきました。

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