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

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

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

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

スポンサーリンク

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

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

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

 これが実際の表示
Cocoonで使える[ショートコード]のオプションと使い方まとめ
さくらレンタルサーバで使えるモリサワWebフォント書式見本
FontAwesome4.7のアイコンをクリックでコピーできる一覧表

自動で生成して表示してくれる系

新着記事一覧

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

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

オプション

属性説明記述方法初期値
count表示する記事数数値 (例: “10”)5
typeデザインの選択default / large_thumb / large_thumb_on
(通常リスト/大きい画像/大きい画像にタイトルを重ねる)
default
cats表示するカテゴリーを指定数値※複数の場合カンマで区切る (例: “1,2,5”)
すべてのカテゴリの場合: “all” (初期値)
all
children指定カテゴリの子カテゴリを含めるか0 / 1 (含めない/含める)0
tags表示するタグを指定数値※複数の場合カンマで区切る (例: “1,2,5”)(空欄)
order表示順asc / desc (昇順/降順)desc
sticky固定表示設定がされている記事の表示0 / 1 (非表示/表示)1
post_type表示する投稿タイプを選択post / page / カスタム投稿名
(投稿ページ/固定ページ/カスタム投稿)
※複数の場合カンマで区切る(例: “post,page”)
post
taxonomyカスタム投稿のカテゴリ(タクソノミー)を指定タクソノミー名category
使い方

人気記事一覧

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

ショートコード(基本形)
[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
cats表示するカテゴリーを指定数値※複数の場合カンマで区切る (例: “1,2,5”)
すべてのカテゴリの場合: “all” (初期値)
all
使い方

サイトマップ

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

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

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

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

目次

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

ショートコード(基本形)
[toc]
サンプル
メモ
「Cocoon設定>目次>目次の表示」の設定に関わらず表示されます。
使い方

ブログカード

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

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

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

メモ
使い方
スポンサーリンク

自分で登録・設定してから表示する系

プロフィールボックス

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

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

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

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

ナビカード(任意の記事一覧)

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

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

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

サンプル

オプション
属性説明記述方法初期値
name「メニュー」で登録したメニュー名を指定(必須)“登録したメニュー名”(空欄)
typeカードの見た目を選択1 / 2 / 指定なし (区切り線/枠あり/標準)(空欄)
使い方

テンプレート(定型文)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

広告・アフィリエイト系

広告表示

「Cocoon設定>広告>アドセンス設定>広告コード」で設定したアドセンス広告を任意の位置に表示します。「[ad]ショートコードを有効にする」にチェックを入れる必要があります。

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

アフィリエイトタグ

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

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

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

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

Amazon商品リンク

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

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

[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="試し読み"]
オプション

属性説明記述方法初期値
asinAmazon商品IDを指定(必須)*Amazon商品ID(空欄)
idasinと同等*(同上)(空欄)
kw商品検索ボタン用の検索キーワードを指定自由なテキスト(空欄)
title商品タイトル自由なテキスト(空欄)
desc商品リンクに説明文を追加自由なテキスト(リンク可)
(例: ‘<a href=”#”>Link</a>’)
(空欄)
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
catalogカタログ写真の表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
image_only画像のみ表示0 / 1 (通常表示/画像のみ表示)0
image_indexAPIが取得した画像の中から表示する画像を選択数値 (例: “3”)0
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末尾に追加するボタンのキャプションを指定
※ボタンはbtn1_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn2_tagタグをそのまま先頭にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
メモ
使い方

楽天商品リンク

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

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

[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で試聴"]
オプション

属性説明記述方法初期値
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
catalogカタログ写真の表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
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>’)
(空欄)
メモ
使い方

装飾系

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

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

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

タイムライン(年表とか)

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

ショートコード(基本形)
[timeline][ti label="XXX"]ここに内容[/ti][/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]title大見出し自由なテキスト(空欄)
[ti]labelラベル自由なテキスト(空欄)
title見出し自由なテキスト(空欄)
メモ
ブロックエディターなら簡単にタイムラインを作成出来るようになりました(Cocoon 1.7.4.1~)
Cocoon Blocksの現在の対応状況 | Cocoon
使い方
スポンサーリンク

便利系

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

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

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

(過去~)経過時間

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

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

 こんな書き方もできる

昨日の12:00から約[ago from="yesterday 12:00"]経過
昨日の12:00から約1日経過
オプション
属性説明記述方法初期値
from基点となる日時(必須)あらゆる形式の日時表記
(例: “2018-12-17”)
(例: “2018/12/17”)
(例: “20181217”)
(空欄)
メモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での経過時間が表示されます。
現在時間が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') );
}
使い方

(過去~)経過年数

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

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

(過去~)年齢

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

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

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

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

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

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

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

(おまけ)WordPress標準で使えるショートコード

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

あとがき

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

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

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

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

コメント

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