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

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

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

ショートコードとは

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

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

 ショートコードの記述例

 

[sitemap]

オプション付きの例

[sitemap page="0"]

 

Cocoonショートコード

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

 

使い方

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

 

Cocoonショートコード

 

自動で生成されるもの

新着記事一覧

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

ショートコード

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

デフォルト表示例

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

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

 

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

 

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

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

ショートコード

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

表示例

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

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

 

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

 

サイトマップ

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

ショートコード

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

表示例

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

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

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

 

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

 

ブログカード

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

ショートコード

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

表示例

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

 

目次

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

ショートコード

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

 

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

 

オプション

 ↓コピーできます。
depth

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

初期値:空欄

記入例:depth=3(H3までの見出しを表示)

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

 

設定・作成するもの

テンプレート

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

ショートコード

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

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

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

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

 

ボックスメニュー

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

ショートコード

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

表示例

Cocoonボックスメニュー

 

 

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

 

プロフィールボックス

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

ショートコード

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

表示例

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

 

オプション

id

id指定なしで、投稿者が表示されます。

初期値:空欄(投稿者)

記入例:id=3

 

lavel

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

初期値:(空欄)

 

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

 

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

 

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

 

ナビカード

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

 

ショートコード

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

表示例

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

 

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

 

評価の★

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

 

ショートコード

 ↓コピーできます。
[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ショートコード:評価の★サンプル

 

 

時間系

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

  • タイムライン
  • 過去~経過時間(月単位)
  • 過去~経過時間(年単位)
  • 誕生日~年齢(初期値で「才」を表示)
  • 未来日付へのカウントダウン

これらについては、以下にまとめています。

 

アフィリエイト系

アフィリエイト系のショートコードは以下のようなものがあります。

  • ランキング
  • 広告表示
  • アフィリエイトタグ
  • Amazon商品リンク
  • 楽天商品リンク

これらについては、現在まとめ中です。

 

コメント

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