Cocoonでは、手軽に商品（サービス）ランキングを作成できるようになっています。
商品ランキングを本文下に表示することによって、コンバージョン率が高くなるような使い方も可能かもしれません。
以下ではランキング作成＆配置方法を説明したいと思います。
ランキングを作成する方法
ランキングを作成するには、WordPress管理画面から「Cocoon設定→ランキング作成」を選択してください。
「ランキング」画面が表示されたら「新規作成」をクリックしてください。
すると、ランキング入力フォームが表示されるので、タイトル、商品名、評価、画像、説明文、詳細ページURL、ページURL（もしくはアフィリエイトタグ）を入力します。
例えば、サーバー紹介でMixHost
を紹介する場合は、こんな感じです。
入力を終えたら「追加」ボタンを押してください。
入力がうまくいったら、次の入力項目が表示されます。
あとは、ランキング順に商品（サービス）入力項目を追加していけばOKです。
Cocoonは、追加すればするだけランキング順位を作成することが可能です（そんなに必要ないと思うけど）。
一歩進んだ入力方法
Cocoonの機能である「アフィリエイトタグ」機能と組み合わせることで、ショートコードで入力することも可能です。
ショートコード入力が可能な入力欄はこちら。
このように入力することで、アフィリエイトをタグを一元管理することが可能です。
ウィジェットでランキングを配置する
次に、ランキングの配置です。
ランキングは、ウィジェットで表示場所を設定します。
WordPress管理画面から「外観→ウィジェット」を選択します。
「ランキング」ウィジェットを表示したいウィジェットエリアにドラッグ＆ドロップで配置します。
あとは、ウィジェットの「ランキング」項目から作成した商品ランキングを選択します。
表示の確認
あとは、「ランキング」ウィジェットを配置した場所の表示を確認すればOKです。
ランキングはこんな感じで表示されます。
細かなデザインについては、スタイルシート（CSS）で修正していただければと思います。
まとめ
こんな感じで、手軽にWordPress上で入力するだけでランキングを作成することができます。
「おすすめしたい商品を本文下にランキング形式で表示したい」なんて場合には重宝する機能です。
コメント
基本的な質問で恥ずかしい限りなのですが、ランキングの画像を挿入する際のイメージ画像のタグを入力というのはどの部分を入力すればいいのでしょうか？
申し訳ないですが、ちょっと質問内容の意味が分からないです。
もう少し詳しく書いていただけると助かります。
大変申し訳ありません。
ランキング作成で画像・バナータグ部分に画像を入れたいです。横の注釈にイメージ画像のタグを入力して下さいと書いていますがイメージ画像のタグとはどのようなものでしょうか？
メディアのライブラリから参照する事は出来るのでしょうか？
初歩的な質問で大変申し訳ございません。
通常はASP（アフィリエイトサービスプロバイダー）のタグなどを入力します。
普通の画像を入力したい場合は、以下のようなimg画像タグを挿入します。
※hrefに入力するURLはメディアライブラリに画像をアップしてURLを取得したものを入力してください。
出来ました。本当にありがとうございました。素人すぎて質問の仕方が分からず大変失礼をいたしました。これからももっと勉強します。ありがとうございます。
ランキングの画像はアフィリエイトタグ以外の画像を使用できないのでしょうか？
例えば、ワードプレスにアップした画像をランキング画像として使用したいです。
普通に、アップロード画像でimgタグを作成して入力すれば、使用できると思います。
わいひら様
お世話になります。
cocoonの設定でツイッターカードが上手く反映できません。
cocoonの設定に何か不具合があるのでしょうか？
xoke2363.com
ご回答よろしくお願いします。
サイトがnoindex状態になっています。
![]()
http://xoke2363.com/robots.txt
おそらくWordPress設定の「表示設定」にある「検索エンジンでの表示」にチェックがついているのではないかと思います。
もし違うようであれば、できればコメントの案内にあるように、質問はフォーラムの方に書き込んでいただいてよろしいでしょうか。
![]()
https://wp-cocoon.com/community/
当ページのように、関連性のないページのコメントに書かれた場合、同様の問題に行き当たった方が見つけづらいですし、コメント機能は低機能なので画像とかがアップしづらいので。
ご協力、よろしくお願いいたします。
素晴らしいテーマありがとうございます
一つ質問があります。すみません教えて下さい
このページのランキングを見ると、左に「詳細ページ」右が「エックスサーバー」と表示されていますが、私の場合は右が「公式ページ」となっています。
こちらのページのように、右に「好きな表示名」を表示するにはどのようにしたら良いのでしょうか？
教えて下さいませ。私の設定方法の確認不足でしたら申し訳ありません。
「ページURL」の代わりに「タグで入力」リンクをクリックしてaタグを用いて入力してみてください。
タグ入力だと自由にテキストを変更できます。
ありがとうございました。無事解決しました。単純な事だったのですね
コメントで質問してすみませんでした。次回からは質問などはフォーラムへ参加させて頂きます。
ありがとうございます。
そうしていただけると、画像もアップしてよりわかりやすく説明できるかと思います。