Cocoonのランキング作成機能の使い方・設定方法を詳細に解説

Cocoonではアフィリエイトにも使える商品ランキングなどを登録して好きな場所で表示する機能があります。

以下のようなものです。

上記のサンプルで言うと、必須項目は商品名の部分だけですので、これを使って他の用途にも使えそうです。

たとえば以下のような画像と説明文だけのリストなど。

特徴

• アフィリエイトバナーやテキストリンクを貼るだけでランキング形式のリストが作成可能
• バナーや商品名などはショートコード入力も可能なので「アフィリエイトタグ機能」を使って一元管理可能
• 順位はいくつまででも登録可能
• 登録できるリストの数も無限

とりあえず、機能通りの基本的な商品ランキングの作成から。

商品ランキング作成

Cocoon設定→ランキング作成

１つ目の商品項目を作成

• 商品名などのタイトル部分
• 画像バナー
• 説明文
• ページURL（公式サイト）

※公式サイトURL部分は「タグ入力」をクリックして入力エリアを表示後、ショートコードを入力します。

下図の赤囲み部分を入力

・ランキング自体のタイトルを入力
・１つ目の商品名または見出しを入力
・評価の★を選択（なし　可）

上図の青囲み部分を入力

画像バナーは画像のURLではなくタグで入力する必要があります。

アフィリエイトバナータグなどであれば、コピーして貼り付ければOKですし、「アフィリエイトタグ」に登録しているショートコードでもOK。

そうでない自サイト内の画像などを貼りたい場合はHTMLタグで入力します。

例

<img src="https://XXXX/XXX.jpg" alt="XXXX">

<a href=""><img src="https://XXXX/XXX.jpg" alt="XXXX"></a>

詳細ページURLと公式サイトURLは省略も可なので、どちらか１つでも大丈夫ですし、両方入れなくても問題ありません。

詳細ページのみ入力した場合は、ボタンが全幅で１つ出ます。

ボタン１つの例

ボタン２つの例

２つ目以降を順次作成

１つ目の登録（保存）がうまくいくと、２つ目の入力エリアが表示されます。

１つ目と同様に入力していきます。

１つずつ登録していく形になるので、以下を繰り返していきます。

いくつまででも登録可能です。

保存時オプション

作成したランキングリストは、ウィジェットとして好きなエリアに表示が可能ですが、投稿中に挿入したい場合などは、

「保存」の上にある「ビジュアルエディターのリストに表示」オプションをチェックします。（デフォルトでチェックが入っています）

記事本文中では利用しない場合は、チェックを外します。

※ちなみに、チェックしていなくても直接ショートコードを記述すれば投稿内に挿可能。

編集する

一覧の「編集」から修正や追加が出来ます。

カスタマイズする

文字や★の色やサイズ、ボタンの色のカスタマイズについては以下をご覧下さい。

作成したランキングを表示する

ウィジェット挿入

Cocoonのオリジナルウィジェット「[C]ランキング」を表示したいエリアに追加します。

ランキングが複数ある場合は、プルダウンで選択します。

投稿内に挿入

ビジュアルエディタの「ランキング」をプルダウンして選択し挿入します。

以上です。