Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの便利機能！ショートコード一覧と使い方

スポンサーリンク
Cocoon・使い方
2020.02.20
この記事は約13分で読めます。
スポンサーリンク

ショートコードとは

色々な機能や動作、装飾などを短いコードで簡潔に使えるよう登録してあるコードで、[　と　]　で囲って記述するコードです。

Cocoonの場合は、最初からたくさんのショートコードが使えます。

 ショートコードの記述例

[sitemap]

オプション付きの例

[sitemap page="0"]

 

Cocoonショートコード

Cocoonのショートコードには、サイト内の記事一覧を表示するサイトマップなどの自動生成系と、メニューなどを設定してそれを利用する事で表示する設定・作成系があります。

使い方

直接コードを記述する事も出来ますし、ビジュアルエディタのメニューから簡単に挿入する事も出来ます。

 

Cocoonショートコード

 

ショートコードとオプション一覧

自動生成系

機能ショートコード主なオプション
新着記事一覧[new_list]countcatstype
人気記事一覧[popular_list]countcatstype
サイトマップ[sitemap]
ブログカード[[URL]]
目次[toc]depth
RSS記事一覧[rss url="https://URL"]countimg

設定・作成系

機能ショートコード主なオプション
テンプレート[temp id="XX"]
ボックスメニュー[box_menu name="メニュー名"]
プロフィールボックス[author_box]idlabel
ナビカード[navi_list name="メニュー名"]
評価の★[star rate="XX"]ratemaxnumber
ランキング[rank id="XX"]

時間系

機能ショートコード主なオプション
タイムライン[timeline][ti label="XXX"]内容[/ti][/timeline]

[timeline title="大見出し"]
[ti label="ラベル１" title="見出し１"]内容１[/ti]
[ti label="ラベル２" title="見出し２"]内容２[/ti]
[/timeline]

titlelabel
過去からの経過時間[ago from="XXXX-XX-XX"]from
経過年数[yago from="XXXX-XX-XX"]fromunit
年齢[age from="XXXX-XX-XX"]fromunit
カウントダウン[countdown to="XXXX-XX-XX"]tounit
ログインユーザーに表示[login_user_only msg="XXX"]
ここに内容
[/login_user_only][login_user_only msg="被ログインユーザー用"]
ログインユーザー用
[/login_user_only]		msg
指定期間のみ表示[campaign from="" to=""]
内容
[/campaign]		fromtoclass

アフィリエイト系

機能ショートコード主なオプション
広告表示[[ad]]
アフィリエイトタグ[affi id="XX"]
Amazon商品リンク[[ amazon asin=”XXX” kw=”XXX”]]
楽天商品リンク[rakuten id="XXX" kw="XXX"]

※Amazon商品リンクのコードをコピーされる方は　[　の後に半角スペースがあるので削除してご利用下さい。

 

 

以下でそれぞれの詳細や、オプションの使い方についてまとめています。

自動で生成されるもの

新着記事一覧

投稿ページ・固定ページ・カスタム投稿ページを投稿日順に好きな数だけ表示できます。

ショートコード

　↓コピーできます。
[new_list]

デフォルト表示例

記事一覧ショートコード：デフォルト

※画像です。 新着記事一覧ショートコードの表示サンプル

 

ショートコードサンプル

[new_list count="XX" type="default" cats="XX" children="0" post_type="post" type="border_partition" arrow=1]
count=”XX“　表示件数（数値）
cats=”XX“　カテゴリーID

 

新着記事ショートコードについては以下にオプション詳細をまとめています。

Cocoonショートコード-新着記事一覧の使い方と表示サンプル
新着記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来...
sec.ayaito.net

 

人気記事一覧(記事ランキング)

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

ショートコード

　↓コピーできます。
[popular_list]

表示例

Cocoonショートコード：人気記事

人気記事ショートコードの表示サンプル

 

人気記事ショートコードについては以下にオプション詳細をまとめています。

Cocoonショートコード-人気記事一覧の使い方と表示サンプル
人気記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来...
sec.ayaito.net

 

サイトマップ

自動生成されるサイトマップ（サイト内の記事一覧）が表示できます。

ショートコード

　↓コピーできます。
[sitemap]

表示例

サイトマップショートコード

サイトマップショートコード

見出しや文字色などはサイトのデザインによります。

 

サイトマップショートコードについては以下にオプション詳細をまとめています。

Cocoonショートコード-人気記事一覧の使い方と表示サンプル
人気記事一覧ショートコード 投稿ページ・固定ページ・カスタム投稿ページを表示できます。 件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来...
sec.ayaito.net

 

ブログカード

URLのみで好きな場所にブログカードを表示出来ます。

ショートコード

URLを　[　]　で囲うだけでブログカードが表示され、
内部リンクは同じタブ、外部リンクは新しいタブで開きます。

表示例

Cocoonショートコード：ブログカード

 

目次

好きな場所に目次を表示出来ます。

ショートコード

　↓コピーできます。
[toc]

 

表示は記事上部の目次と同様です。

 

オプション

depth
目次に表示させたい見出し(h2～h6)の深さを数値で指定します。

初期値：空欄

記入例：depth=3（H3までの見出しを表示）

　↓コピーできます。
[toc depth=3]

 

RSS記事一覧

 

ショートコード

　↓コピーできます。
[rss url="http://URL"]

 

オプション

url　：RSSフォードのURL
初期値：空欄

count　：表示する記事数
初期値：5

img　：サムネイル画像
初期値：空欄

 

書き方例

　↓コピーできます。
[rss url="http://URL" count="10" img="XXXX.jpg"]

 

設定・作成するもの

テンプレート

Cocoon設定→テンプレート　から登録したテンプレートを表示します。

ショートコード

　↓コピーできます。
[temp id="XX"]

オプションは「id」のみで必須です。

登録したテンプレートは以下のようにショートコードが表示されますので、このidで利用します。

Cocoonショートコード：テンプレート

 

ボックスメニュー

WordPressのメニュー機能を利用してアイコンフォントや画像も表示できるボックス型のメニューを表示出来ます。

ショートコード

　↓コピーできます。
[box_menu name="メニュー名"]

表示例

Cocoonボックスメニュー

 

ボックスメニューの使い方については以下にオプション詳細をまとめています。

Cocoonのアイコンや画像も使えるボックスメニューの使い方
Cocoonには、便利に使えるショートコードが複数ありますが、今回はアイコンフォントや画像も使えるボックス型のメニューをカスタマイズしてみます。 ボックスメニューの使い方 ショートコード１つで記事...
sec.ayaito.net

 

プロフィールボックス

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

ショートコード

　↓コピーできます。
[author_box]

表示例

Cocoonショートコード：プロフィール

 

オプション

id：ユーザーID

初期値：空欄（投稿者）

id指定をしない場合は、投稿者が表示されます。

 

label：自由なテキストでキャプションが表示出来ます。

初期値：（空欄）

 

書き方例

　↓コピーできます。
[author_box id="3" label="キャプションテキスト"]

 

プロフィールの設定方法については公式サイトにありましたので以下をご覧ください。

プロフィール画像やプロフィール情報、SNSページを設定する方法
Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。また、自前のプロフィール画像設定機能も保持しており、手軽に設定できるようになっています。
wp-cocoon.com

 

プロフィールボックスは、このショートコードを使わなくてもウィジェットでも表示出来ます。

 

Cocoon独自ウィジェット「(C)プロフィール」を「投稿本文下」などの位置に設定しておけば、投稿記事に応じた投稿者のプロフィールが自動で表示されます。

 

ナビカード

WordPressの管理画面「外観」→「メニュー」で登録したメニューをカード形式でリスト表示が出来るショートコードです。

 

ショートコード

　↓コピーできます。
[navi_list name="メニュー名"]

表示例

Cocoonショートコード：ナビカード

 

ナビカードの使い方については以下にオプション詳細をまとめています。

Cocoonショートコード-ナビカードの使い方と表示サンプル
ナビカードショートコード WordPressの管理画面「外観」→「メニュー」で登録したメニューをカード形式でリスト表示が出来るショートコードです。 ショートコード 　↓コピーできます。 ...
sec.ayaito.net

 

評価の★

★マークで表示する評価用のショートコードです。

 

ショートコード

　↓コピーできます。
[star rate="XX"]

表示例

Cocoonショートコード：評価の★

オプション

rate

評価の数値を0～100の0.1単位で指定

初期値：5

 

max

評価の最大値を1～100の整数で指定

初期値：5

 

number

数値の表示　0：非表示　1：表示

初期値：1

 

書き方例

　↓コピーできます。
[star rate="8.5" max="10" number="0"]

Cocoonショートコード：評価の★サンプル

 

ランキング

 

ショートコード

　↓コピーできます。
[rank id="XX"]

 

id：　必須

Cocoon設定の「ランキング作成」で作成したランキングごとのIDを設定します。

ランキング作成

ランキング一覧にショートコードが表示されています。

ランキングショートコード

 

ランキング作成方法は以下をご覧ください。

Cocoonのランキング作成機能の使い方・設定方法を詳細に解説
Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示する機能があります。 以下のようなものです。 上記のサンプルで言うと、必須項目は...
sec.ayaito.net

 

時間系

時間系のショートコードは以下のようなものがあります。

タイムライン

Cocoonショートコード：タイムライン

過去～経過時間（月単位）

過去～経過時間（年単位）

誕生日～年齢（初期値で「才」を表示）

未来日付へのカウントダウン

 

これら時間系のショートコードについては、以下にまとめています。

Cocoonショートコード-タイムラインやカウントダウンの使い方
Cocoonのショートコードで、時間系のショートコードの使い方をまとめています。 時系列表示が出来るタイムラインや、過去からの経過時間、未来へのカウントダウンなどが日単位や年単位などで表示できま...
sec.ayaito.net

 

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

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

 

ショートコード

　↓コピーできます。
[login_user_only msg="XXX"]ここに内容[/login_user_only]

 

オプション

msg

ログインしていないユーザー向けのメッセージを入力 自由なテキスト(リンク可)

 

書き方例

　↓コピーできます。
[login_user_only msg="被ログインユーザー用"]
ログインユーザー用
[/login_user_only]

 

 

指定期間のみ表示する

キャンペーン中だけ表示する

 

ショートコード

　↓コピーできます。
[campaign from="" to=""]キャンペーン中に表示するコンテンツを入力してください。[/campaign]

 

オプション

from：開始日時

初期値：（空欄）

入力例：from=”2021/07/11 15:00:00″
入力例：from=”2030-01-01″
（時間情報を入力しなかった場合には、00:00:00）

 

開始日時が入力されなかった場合は、現在の時刻の1日前が開始日時として表示されます。

 

to：終了日時

初期値：（空欄）

入力例：to=”2021/08/31 23:59:59″
入力例：to=”2030-12-31″
（時間情報を入力しなかった場合には、00:00:00）

終了日時が入力されなかった場合は、現在の時刻の一日後が終了日時として表示されます。

 

class：HTMLの拡張クラス

初期値：（空欄）

 

書き方例

　↓コピーできます。
[campaign from="2020-01-01 00:00:00" to="2020-01-05 23:59:59"]
お正月イベントセール中！
[/campaign]

 

 

アフィリエイト系

広告表示

 

ショートコード

　↓コピーできます。
[ad]

 

オプション

なし

[ad]だけを１行に書きます。

 

アフィリエイトタグ

Cocoon設定→「アフィリエイトタグ」で登録したアフィリエイトタグを表示します。

アフィリエイトタグ

アフィリエイトタグ

 

ショートコード

　↓コピーできます。
[affi id="XX"]

 

Amazon商品リンク

Cocoon設定→「API」でAmazonの設定をすると、Amazon商品リンクをショートコードで表示できます。

API設定は以下にまとめています。

CocoonのAPI設定（タブ）の設定方法をすべて解説
CocoonではアフィリエイトのAPI管理が一括で行えてとても便利ですが、たくさん設定項目がありますので、それらを詳細にまとめています。 APIの設定 Cocoon設定→APIタブ ...
sec.ayaito.net

 

ショートコード

　↓コピーできます。
[[ amazon asin=”XXX” kw=”XXX”]]

※コピーされる方は　[　の後に半角スペースがあるので削除してご利用下さい。

 

楽天商品リンク

Cocoon設定→「API」で楽天の設定をすると、楽天商品リンクをショートコードで表示できます。

API設定は以下にまとめています。

CocoonのAPI設定（タブ）の設定方法をすべて解説
CocoonではアフィリエイトのAPI管理が一括で行えてとても便利ですが、たくさん設定項目がありますので、それらを詳細にまとめています。 APIの設定 Cocoon設定→APIタブ ...
sec.ayaito.net

 

ショートコード

　↓コピーできます。
[rakuten id="XXX" kw="XXX"]

 

 

スポンサーリンク

コメント

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