Cocoonで使える[ショートコード]のオプションと使い方まとめ

Cocoonで使える[ショートコード]のオプションと使い方まとめ

Cocoonで使えるショートコード+オプション一覧と、使い方が掲載されている公式ページへのリンク集的なまとめです。

便利な機能がたくさんあって流し見でこんな機能あったのか~!なんて発見もあるかもしれません。

ジャンル分けは独断です。
すぐに使い方を忘れてしまうのでまとめました!

スポンサーリンク

【基礎知識】ショートコードの書き方

 これがショートコード
[new_list]
[ 自己完結型 ]
[caption]ここに内容[/caption]
[X] ←囲み型→ [/X]
 これがオプションを指定したショートコード
[new_list count="3" order="desc"]
[ショートコード名 属性=”値” 属性=”値”]
 投稿のエディター画面(キャプチャ画像)
エディター画面のキャプチャ画像

エディターにコードを記述

 これが実際の表示
pixivにメニューバーを追加するUserScript(Chrome)
CSSだけでスライドするタブ切り替えを考えてみた
Gutenbergでサイドバーに選択式のCSSクラス設定を追加する

自動生成系

新着記事一覧

投稿ページ・固定ページ・カスタム投稿ページを投稿日順で表示できます。

new_listショートコード(基本形)
[new_list]
new_listのサンプル

new_listのオプション

属性説明記述方法初期値
count表示する記事数数値 (例: “10”)5
typeデザインの選択
  • default: 通常リスト
  • border_partition: カードの上下に区切り線(“1″でも可)
  • border_square: カードに枠線(“2″でも可)
  • large_thumb: 大きい画像
  • large_thumb_on: 大きい画像にタイトルを重ねる
default
boldタイトルを太文字にする0 / 1 (標準/太文字)0
arrow矢印を表示する0 / 1 (非表示/表示)0
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
cats表示するカテゴリーを指定数値※複数の場合カンマで区切る (例: “1,2,5”)
すべてのカテゴリの場合: “all” (初期値)
all
children指定カテゴリの子カテゴリを含めるか0 / 1 (含めない/含める)0
tags表示するタグを指定数値※複数の場合カンマで区切る (例: “1,2,5”)(空欄)
modified更新日順で表示する0 / 1 (投稿日順/更新日順)0
order表示順asc / desc (昇順/降順)desc
sticky固定表示設定がされている記事の表示0 / 1 (非表示/表示)1
snippet説明文を表示するか0 / 1 (非表示/表示)0
post_type表示する投稿タイプを選択post / page / カスタム投稿名
(投稿ページ/固定ページ/カスタム投稿)
※複数の場合カンマで区切る(例: “post,page”)
post
taxonomyタクソノミー名を指定タクソノミー名category
new_listショートコードの使い方
new_listの類似ショートコード

PV(ページビュー)数が多い順に投稿ページを表示できます。

popular_listショートコード(基本形)
[popular_list]
popular_listのサンプル

popular_listのオプション

属性説明記述方法初期値
days集計期間の指定数値※日数 (例: “7”)
全期間の場合: “all” (初期値)
all
rankランキング順位ナンバーの表示0 / 1 (非表示/表示)0
pvPV数の表示0 / 1 (非表示/表示)0
count表示する記事数数値 (例: “10”)5
typeデザインの選択default / large_thumb / large_thumb_on
(通常リスト/大きい画像/大きい画像にタイトルを重ねる)
default
typeデザインの選択
  • default: 通常リスト
  • border_partition: カードの上下に区切り線(“1″でも可)
  • border_square: カードに枠線(“2″でも可)
  • large_thumb: 大きい画像
  • large_thumb_on: 大きい画像にタイトルを重ねる
default
boldタイトルを太文字にする0 / 1 (標準/太文字)0
arrow矢印を表示する0 / 1 (非表示/表示)0
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
cats表示するカテゴリーを指定数値※複数の場合カンマで区切る (例: “1,2,5”)
すべてのカテゴリの場合: “all” (初期値)
all
popular_listショートコードの使い方
人気記事一覧の類似ショートコード

サイトマップ

公開中の固定ページ・投稿ページ・カテゴリーページ・月別アーカイブページをすべてタイトルリスト形式で表示します。

sitemapショートコード(基本形)
[sitemap]
sitemapのサンプル
[sitemap page="0"]
[sitemap single="0" category="0"]

 サンプルは当ブログのサイトマップページで

サイトマップ
ものぐさWEBノートのサイトマップ
sitemapのオプション
属性説明記述方法初期値
page固定ページ一覧の表示0 /1 (非表示/表示)1
single投稿ページ一覧の表示0 /1 (非表示/表示)1
categoryカテゴリーページ一覧の表示0 /1 (非表示/表示)1
archive月別アーカイブページ一覧の表示0 /1 (非表示/表示)0
sitemapショートコードの使い方

目次

投稿ページ・固定ページのページ内目次を任意の位置に表示できます。

tocショートコード(基本形)
[toc]
tocのサンプル
[toc depth="2"]
tocのオプション
属性説明記述方法初期値
depth目次に表示させたい見出し(h2~h6)の深さを指定2~6までの数値 (例:”2″)(空欄)
tocに関するメモ
「Cocoon設定>目次>目次の表示」の設定に関わらず表示されます。
tocショートコードの使い方

ブログカード

URL情報のみで任意の位置にブログカードを表示できます。

ブログカードショートコード(基本形)
[http://URL]
ブログカードのサンプル
[https://web.monogusa-note.com]

※当ブログはCSSカスタマイズを行っています。

ブログカードショートコードに関するメモ
ブログカードショートコードの使い方

RSS記事一覧

RSSフィードを元に記事一覧を表示します。

rssショートコード(基本形)
[rss url="http://URL"]
rssのサンプル

Cocoon公式サイトのRSSフィードを表示しています。

rssのオプション

属性説明記述方法初期値
urlRSSフィードのURLURL (例: “https://wp-cocoon.com/feed/”)(空欄)
count表示する記事数数値 (例: “10”)5
imgデフォルトのサムネイル画像を指定画像のURL(空欄)
targetリンクの開き方を指定_blank / _self / _parent / _top / 任意のターゲット名_blank
desc説明文を表示するか0 / 1 (非表示/表示)1
date日付を表示するか0 / 1 (非表示/表示)1
cache_minuteキャッシュの更新時間を指定(分)数値60
typeデザインの選択
  • default: 通常リスト
  • border_partition: カードの上下に区切り線(“1″でも可)
  • border_square: カードに枠線(“2″でも可)
  • large_thumb: 大きい画像
  • large_thumb_on: 大きい画像にタイトルを重ねる
default
boldタイトルを太文字にする0 / 1 (標準/太文字)0
arrow矢印を表示する0 / 1 (非表示/表示)0
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
rssショートコードの使い方
rssの類似ショートコード

自分で登録・設定する系

ボックスメニュー

(WordPress設定)外観>メニュー」で登録したメニューを表示します。メニュー用にアイコンや画像を自由に設定する事が可能です。

box_menuショートコード(基本形)
[box_menu name="XXX"]
box_menuのメニュー登録画面(キャプチャ画像)
ボックスメニュー登録画面

管理画面URL: /wp-admin/nav-menus.php

box_menuのサンプル
[box_menu name="サンプル用ボックスメニュー"]
box_menuのオプション
属性説明記述方法初期値
name「メニュー」で登録したメニュー名を指定(必須)“登録したメニュー名”(空欄)
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
box_menuショートコードの使い方

プロフィールボックス

「(WordPress管理画面)ユーザー>ユーザー一覧」の中から指定したユーザーのプロフィールを表示します。

author_boxショートコード(基本形)
[author_box]
author_boxのサンプル
[author_box label="猫好きの管理人"]
猫好きの管理人
草村

オタク。虚弱体質。猫が好き。
CSSだけでなんとかしたい。
時代に取り残されていく一方の
しがないWebデザイナー

草村をフォローする
author_boxのオプション
属性説明記述方法初期値
idユーザーID数値(例: “3”)
※指定なし: 投稿者のプロフィール
(空欄)
labelキャプションが表示出来ます。自由なテキスト(空欄)
author_boxショートコードの使い方

(WordPress設定)外観>メニュー」で登録したメニューを記事一覧として表示します。

navi_listショートコード(基本形)
[navi_list name="XXX"]
navi_listのメニュー登録画面(キャプチャ画像)
ナビカードをメニューに登録した画面のキャプチャ

管理画面URL: /wp-admin/nav-menus.php

navi_listのサンプル

navi_listのオプション
属性説明記述方法初期値
name「メニュー」で登録したメニュー名を指定(必須)“登録したメニュー名”(空欄)
typeデザインの選択
  • default: 通常リスト
  • border_partition: カードの上下に区切り線(“1″でも可)
  • border_square: カードに枠線(“2″でも可)
  • large_thumb: 大きい画像
  • large_thumb_on: 大きい画像にタイトルを重ねる
default
boldタイトルを太文字にする0 / 1 (標準/太文字)0
arrow矢印を表示する0 / 1 (非表示/表示)0
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
navi_listショートコードの使い方
navi_listの類似ショートコード

[navi]で表示する(旧ナビショートコード)

デフォルトの表示形式が異なりますが、最新のCocoonでも利用可能です。

naviショートコード(基本形)
[navi name="XXX"]
naviのサンプル
[navi name="ナビカードサンプル用メニュー"]
navi_listとの初期値の違い
naviでは「bold=”1″ arrow=”1″」(タイトル太字、矢印表示)が初期値になっています

テンプレート(定型文)

Cocoon設定メニュー/テンプレート」で登録したテンプレートを表示します。

tempショートコード(基本形)
[temp id="XX"]
テンプレートの登録画面(キャプチャ画像)
テンプレート登録画面のキャプチャ

管理画面URL: /wp-admin/admin.php?page=theme-func-text

tempのサンプル
[temp id="4"]
こちらはテンプレートのサンプルです
tempのオプション
属性説明記述方法初期値
idテンプレートID(必須)数値(空欄)
tempショートコードの使い方

ランキング(商品等の任意のアイテム)

Cocoon設定メニュー/ランキング作成」で登録したランキングを表示します。

rankショートコード(基本形)
[rank id="XX"]
ランキング作成の登録画面(キャプチャ画像)
ランキング作成画面のキャプチャ

管理画面URL: /wp-admin/admin.php?page=theme-ranking

rankのサンプル
[rank id="1"]

Splatoon 2 (スプラトゥーン2) - Switch

ゲーム初心者からガチ勢まで楽しめる対戦ゲーム!対人戦が苦手な人も今作から追加されたサーモンランは味方との協力プレイが楽しめるぞ!

【PS4】ドラゴンクエストXI 過ぎ去りし時を求めて

大ボリュームのシナリオに、ユーモアたっぷりで魅力的なキャラクターはシリーズファンも初めてプレイする方も堪能出来る事間違いなし!

ぷよぷよ(TM)テトリス(R)S - Switch

不朽の名作ぷよぷよとテトリス同時に遊べる!1人用のストーリーモード、マルチプレイやオンライン対戦もあり地味なようでお得な一本だ!

rankのオプション
属性説明記述方法初期値
idランキングID(必須)数値(空欄)
rankショートコードの使い方

広告・アフィリエイト系

広告表示

「Cocoon設定>広告>アドセンス設定>広告コード」で設定したアドセンス広告を任意の位置に表示します。「

スポンサーリンク
ショートコードを有効にする」にチェックを入れる必要があります。

adショートコード(基本形)
スポンサーリンク
adに関するメモ
一行に対し
スポンサーリンク
だけを書く必要があります。
adショートコードの使い方

アフィリエイトタグ

Cocoon設定メニュー/アフィリエイトタグ」で登録したアフィリエイトタグを表示します。

affiショートコード(基本形)
[affi id="XX"]
アフィリエイトタグ登録画面(キャプチャ画像)
アフィリエイトタグ登録画面のキャプチャ

管理画面URL: /wp-admin/admin.php?page=theme-affiliate-tag

affiのサンプル
[affi id="8"]
affiのオプション
属性説明記述方法初期値
idアフィリエイトタグID(必須)数値(空欄)
affiショートコードの使い方

Amazon商品リンク

「Cocoon設定>API」を設定すればAmazon商品リンクをショートコードで表示できます。

amazonショートコード(基本形)
[amazon asin="XXX" kw="XXX"]
amazonのサンプル

[amazon asin="4088454928" kw="群青にサイレン1" size="s" btn1_url="https://shonenjumpplus.com/episode/10834108156638855981" btn1_text="試し読み"]
[amazon asin="4088454928" kw="群青にサイレン1" btn1_url="https://shonenjumpplus.com/episode/10834108156638855981" btn1_text="試し読み"]
[amazon asin="4088454928" kw="群青にサイレン1" size="l" btn1_url="https://shonenjumpplus.com/episode/10834108156638855981" btn1_text="試し読み"]
amazonのオプション

属性説明記述方法初期値
asinAmazon商品IDを指定(必須)*Amazon商品ID(空欄)
idasinと同等*(同上)(空欄)
kw商品検索ボタン用の検索キーワードを指定自由なテキスト(空欄)
title商品タイトル自由なテキスト(空欄)
desc商品リンクに説明文を追加自由なテキスト(リンク可)
(例: ‘<a href=”#”>Link</a>’)
(空欄)
tracking_idCocoon設定>APIとは別のトラッキングIDを指定するトラッキングID
(例: “your-id-22”)
(空欄)
price価格表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
reviewレビューリンクの表示
※テキストはCocoon設定>APIから変更可能
0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
size表示サイズs / m / l (小/中/大)m
amazonAmazon商品検索ボタン表示0 / 1 (非表示/表示)1
rakuten楽天市場商品検索ボタン表示0 / 1 (非表示/表示)1
yahooYahoo!ショッピング商品検索ボタン表示0 / 1 (非表示/表示)1
dmmDMM商品検索ボタン表示0 / 1 (非表示/表示)1
text_onlyテキストリンクとして表示する0 / 1 (通常表示/テキストリンク)0
image_only画像のみ表示0 / 1 (通常表示/画像のみ表示)0
image_indexAPIが取得した画像の中から表示する画像を選択数値 (例: “3”)0
catalogカタログ写真の表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
border枠線の表示0 / 1 (非表示/表示)1
logoロゴの表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)

*どちらか一つのオプション入力必須

ボタン追加
属性説明記述方法初期値
btn1_urlボタン先頭に「詳細ページ」ボタンを追加
※btn1_tagが優先される
URL (例: “http://example.com”)(空欄)
btn1_text先頭に追加するボタンのキャプションを指定
※ボタンはbtn1_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn1_tagタグをそのまま先頭にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn2_urlボタン末尾に「詳細ページ」ボタンを追加
※btn2_tagが優先される
URL (例: “http://example.com”)(空欄)
btn2_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn2_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn2_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn3_urlボタン末尾に「詳細ページ」ボタンを追加
※btn3_tagが優先される
URL (例: “http://example.com”)(空欄)
btn3_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn3_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn3_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
amazonに関するメモ
amazonショートコードの使い方

楽天商品リンク

「Cocoon設定>API」を設定すれば楽天商品リンクをショートコードで表示できます。

rakutenショートコード(基本形)
[rakuten id="XXX" kw="XXX"]
rakutenのサンプル

[rakuten no="4547366349405" shop="book" kw="Lemon (通常盤) 米津玄師" size="s" btn2_url="https://youtu.be/SX_ViT4Ra7k" btn2_text="Youtubeで試聴"]
[rakuten no="4547366349405" shop="book" kw="Lemon (通常盤) 米津玄師" btn2_url="https://youtu.be/SX_ViT4Ra7k" btn2_text="Youtubeで試聴"]
rakutenのオプション

属性説明記述方法初期値
id楽天のアイテムコード(商品ID)を指定(必須)*
※商品番号で指定する場合のオプションは別記↓参照
楽天のアイテムコード(商品ID)(空欄)
kw商品検索ボタン用の検索キーワードを指定自由なテキスト(空欄)
title商品タイトル自由なテキスト(空欄)
desc商品リンクに説明文を追加自由なテキスト(リンク可)
(例: ‘<a href=”#”>Link</a>’)
(空欄)
price価格表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
size表示サイズs / m (小/中)
※l(大)はありません
m
amazonAmazon商品検索ボタン表示0 / 1 (非表示/表示)1
rakuten楽天市場商品検索ボタン表示0 / 1 (非表示/表示)1
yahooYahoo!ショッピング商品検索ボタン表示0 / 1 (非表示/表示)1
dmmDMM商品検索ボタン表示0 / 1 (非表示/表示)1
text_onlyテキストリンクとして表示する0 / 1 (通常表示/テキストリンク)0
image_only画像のみ表示0 / 1 (通常表示/画像のみ表示)0
border枠線の表示0 / 1 (非表示/表示)1
logoロゴの表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
商品番号で指定する場合にセット使用出来るオプション
属性説明記述方法初期値
no楽天の商品番号(アイテムコードとは別物)*JAN / ISBN / UPC / EAN(空欄)
shop楽天のショップコードを指定するショップコード(空欄)
search検索ワードを指定してキーワード検索結果の中からソート順最上位商品を表示商品を特定出来るようなキーワード(空欄)
sort同じ商品番号の商品の中から指定したソート順を指定する
ソート順で最上位の商品が表示される
※デフォルトで料率が高い順に設定されています。

+付きは昇順(+を-に変更で降順)

  • +affiliateRate (アフィリエイト料率順)
  • +reviewCount (レビュー件数順)
  • +reviewAverage (レビュー平均順)
  • +itemPrice (価格順)
  • +updateTimestamp (商品更新日時順)
  • standard (楽天標準ソート順)
-affiliateRate

*どちらか一つのオプション入力必須

ボタン追加
属性説明記述方法初期値
btn1_urlボタン先頭に「詳細ページ」ボタンを追加
※btn1_tagが優先される
URL (例: “http://example.com”)(空欄)
btn1_text先頭に追加するボタンのキャプションを指定
※ボタンはbtn1_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn1_tagタグをそのまま先頭にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn2_urlボタン末尾に「詳細ページ」ボタンを追加
※btn2_tagが優先される
URL (例: “http://example.com”)(空欄)
btn2_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn2_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn2_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn3_urlボタン末尾に「詳細ページ」ボタンを追加
※btn3_tagが優先される
URL (例: “http://example.com”)(空欄)
btn3_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn3_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn3_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
rakutenに関するメモ
rakutenショートコードの使い方

装飾系

評価スター(レーティングスター)

数値での評価を星マークで表現できます。

starショートコード(基本形)
[star]
starのサンプル
[star rate="3.5"]
3.5
starのオプション
属性説明記述方法初期値
rate評価値0~100の数値(0.1刻み)5
max評価の最大値1~100の数値(整数)5
number数値の表示0 / 1 (非表示/表示)1
starショートコードの使い方

タイムライン(時系列・年表)

年表等に便利なタイムライン形式の表示が出来ます。

timelineショートコード(基本形)
[timeline][ti label="XXX"]ここに内容[/ti][/timeline]
timelineのサンプル
[timeline title="大見出し"]
[ti label="ラベル1" title="見出し1"]ここに内容1[/ti]
[ti label="ラベル2" title="見出し2"]ここに内容2[/ti]
[/timeline]
大見出し
  • ラベル1
    見出し1
    ここに内容1
  • ラベル2
    見出し2
    ここに内容2
timeline/tiのオプション
コード属性説明記述方法初期値
[timeline]title大見出し自由なテキスト(空欄)
[ti]labelラベル自由なテキスト(空欄)
title見出し自由なテキスト(空欄)
timelineに関するメモ
ブロックエディターなら簡単にタイムラインを作成出来るようになりました(Cocoon 1.7.4.1~)
Cocoon Blocksの現在の対応状況 | Cocoon
timelineショートコードの使い方

便利系

(期間指定)キャンペーン中だけ表示する New!

指定した期間中だけ内容を表示できます。

campaignショートコード(基本形)
[campaign from="XXXX-XX-XX" to="XXXX-XX-XX"]期間中表示する内容[/campaign]
campaignのサンプル
[campaign from="2020-05-29 12:30:00" to="2112-09-03 23:59:59"]ドラえもん誕生までの間このテキストは表示されます[/campaign]
ドラえもん誕生までの間このテキストは表示されます
campaignのオプション
属性説明記述方法初期値
from開始日時あらゆる形式の日時表記
(例: “2018-12-17 12:00:00”)
(例: “2018/12/17”)
(例: “20181217”)
※無記入の場合現在時刻の1日前として処理
(空欄)
to終了日時あらゆる形式の日時表記
(例: “2018-12-17 12:00:00”)
(例: “2018/12/17”)
(例: “20181217”)
※無記入の場合現在時刻の1日後として処理
(空欄)
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
campaignに関するメモ
時間未指定の場合00:00:00として処理されます。
サーバやプラグインでページキャッシュを利用している場合キャッシュが作成された時点での内容が表示されます。
campaignショートコードの使い方

ログインユーザーのみに表示する

ショートコードに囲まれた内容はログインユーザーのみに表示されます。

login_user_onlyショートコード(基本形)
[login_user_only msg="XXX"]ここに内容[/login_user_only]
login_user_onlyのサンプル
[login_user_only msg="あなたはログインユーザーではありませんね!"]
あなたはログインユーザーです
[/login_user_only]
login_user_onlyのオプション
属性説明記述方法初期値
msgログインしていないユーザー向けのメッセージを入力自由なテキスト(リンク可)
(例: “<a href=’#’>Link</a>”)
(空欄)
login_user_onlyに関するメモ
ショートコード内(ログインユーザー向けコンテンツ)はHTMLも利用できます。
login_user_onlyショートコードの使い方

(過去~)経過時間

設定したの日付からの経過時間(○年/○ヶ月/○日/○時間)を表示できます。

agoショートコード(基本形)
[ago from="XXXX-XX-XX"]
agoのサンプル
当ブログ爆誕から[ago from="2018-12-17"]経過
当ブログ爆誕から4年経過

 こんな書き方もできる

昨日の12:00から約[ago from="yesterday 12:00"]経過
昨日の12:00から約1日経過
agoのオプション
属性説明記述方法初期値
from基点となる日時(必須)あらゆる形式の日時表記
(例: “2018-12-17”)
(例: “2018/12/17”)
(例: “20181217”)
(空欄)
agoに関するメモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での経過時間が表示されます。
現在時間がUTC時間で計算されるため日本時間と9時間のズレが発生します。(確認:Cocoon 1.6.8)

functions.phpは編集前に必ずバックアップを取って保存してください。編集後エラーが出た場合バックアップファイルを元に復元してください。

Cocoonテーマlib/shortcodes.php内296行目付近にあるago_shortcode関数を、子テーマのfunctions.phpにコピペして、次のように変更すれば「(WordPress管理画面)設定>一般>タイムゾーン」設定に合った経過時間で計算されるようになります。

function ago_shortcode( $atts ){
  return get_human_time_diff_advance( $from, date_i18n('U') );
}
agoショートコードの使い方

(過去~)経過年数

設定した日付からの経過年数を表示できます。年単位に絞った機能です。

yagoショートコード(基本形)
[yago from="XXXX-XX-XX"]
yagoのサンプル
1回目の東京オリンピックから[yago from="1964-10-10"]年経過
1回目の東京オリンピックから59年経過
yagoのオプション
属性説明記述方法初期値
from基点となる日付(必須)あらゆる形式の日時表記
(例: “1964-10-10”)
(例: “1964/10/10”)
(例: “19641010”)
(空欄)
unit単位自由なテキスト(例: “年”)(空欄)
yagoに関するメモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での経過時間が表示されます。
yagoショートコードの使い方

(過去~)年齢

設定した日付からの経過年数(○歳)を表示できます。

ageショートコード(基本形)
[age birth="XXXX-XX-XX"]
ageのサンプル
Pepperくんは[age birth="2014-06-05"]!
Pepperくんは9歳!
ageのオプション
属性説明記述方法初期値
birth基点となる日付(必須)*あらゆる形式の日時表記
(例: “2014-06-05”)
(例: “2014/06/05”)
(例: “20140605”)
(空欄)
frombirthと同等*(同上)(空欄)
unit単位自由なテキスト(例: “才”)
※非表示の場合空欄を設定(例: “”)

*どちらか一つのオプション入力必須

ageに関するメモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での経過時間が表示されます。
ageショートコードの使い方

(~未来)カウントダウン

設定した日付までの日数を表示できます。当日以降の表示は0になります。

countdownショートコード(基本形)
[countdown to="XXXX-XX-XX"]
countdownのサンプル
ドラえもん誕生まであと[countdown to="2112-09-03"]日!
ドラえもん誕生まであと32418日!
countdownのオプション
属性説明記述方法初期値
to終点となる日付(必須)あらゆる形式の日時表記
(例: “2112-09-03”)
(例: “2112/09/03”)
(例: “21120903”)
(空欄)
unit単位自由なテキスト(例: “日”)(空欄)
countdownに関するメモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での日にちが表示されます。
countdownショートコードの使い方

WordPress標準で使えるショートコード

長くなったのでページを分割しました。詳細は2ページ目をご覧ください。
ショートコード一覧
  1. gallery: ギャラリー表示
  2. caption: 画像にキャプションを付ける
  3. audio: オーディオ埋め込み
  4. video: 動画の埋め込み
  5. playlist: プレイリストを表示
  6. embed: 埋め込み

あとがき

以上、(多分)すべてのショートコード一覧でした。
オプションの説明や注意点は独自の解釈で掲載している部分もあるので間違いがあったら申し訳ない。

詳しい使い方はCocoon公式サイトをご確認くださいね!

まとめるの大変だった…多機能すぎるぜCocoon!

この記事に掲載されている内容について
  • 掲載されているショートコードは現在Cocoonバージョン2.1.8までのものです(随時更新予定)
  • 当サイトはCSSカスタマイズしているためサンプルのデザインがデフォルトと異なる場合があります
  • コピペで使用する場合、HTMLタグも一緒にコピーされてしまい使えない場合があります。ctrl+shift+vでペーストするか、コピーした文字を一旦メモ帳などに貼り付けてから改めてコピーすればプレーンテキストとしてコピペ出来るかと思います。