grayishスキン適用中

商品・サービスランキングを作成して配置する方法

テーマ設定
この記事は約3分で読めます。

Cocoonでは、手軽に商品(サービス)ランキングを作成できるようになっています。

商品ランキングを本文下に表示することによって、コンバージョン率が高くなるような使い方も可能かもしれません。

以下ではランキング作成&配置方法を説明したいと思います。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

ランキングを作成する方法

ランキングを作成するには、WordPress管理画面から「Cocoon設定→ランキング作成」を選択してください。

Cocoon設定からランキング作成を選択

「ランキング」画面が表示されたら「新規作成」をクリックしてください。

ランキングの新規作成リンクをクリック

すると、ランキング入力フォームが表示されるので、タイトル、商品名、評価、画像、説明文、詳細ページURL、ページURL(もしくはアフィリエイトタグ)を入力します。

ランキング情報の入力画面

例えば、サーバー紹介でエックスサーバーを紹介する場合は、こんな感じです。

「ページURL」は公式サイトへのURL等を入力します。ただ、ASPの規約により、タグは変えられない場合は、「リンクタグ」にAテキストリンクを入力するとボタン表示されるようになっています。

入力を終えたら「追加」ボタンを押してください。

入力がうまくいったら、次の入力項目が表示されます。

入力を得ると次の商品の入力エリアが表示される

あとは、ランキング順に商品(サービス)入力項目を追加していけばOKです。

Cocoonは、追加すればするだけランキング順位を作成することが可能です(そんなに必要ないと思うけど)。

商品ランキング自体も何個でも作成することが可能です。

一歩進んだ入力方法

Cocoonの機能である「アフィリエイトタグ」機能と組み合わせることで、ショートコードで入力することも可能です。

ショートコード入力が可能な入力欄はこちら。

ランキング入力項目ではショートコードも使える

このように入力することで、アフィリエイトをタグを一元管理することが可能です。

アフィリエイトタグの一元管理機能の使い方
アフィリエイトタグのマネージャー機能の使い方です。広告タグを一元管理することで、タグの張り替えや、テキスト修正などを容易に行えるようになります。

ウィジェットでランキングを配置する

次に、ランキングの配置です。

ランキングは、ウィジェットで表示場所を設定します。

WordPress管理画面から「外観→ウィジェット」を選択します。

Wordpress管理画面から外観→ウィジェットを開く

「ランキング」ウィジェットを表示したいウィジェットエリアにドラッグ&ドロップで配置します。

ランキングウィジェットを投稿本文下ウィジェットエリアに配置

あとは、ウィジェットの「ランキング」項目から作成した商品ランキングを選択します。

ランキングウィジェットでランキングドロップダウンの項目を選択

タイトル入力は任意です。
商品ランキングは何個でも作成して選ぶことができます。
サイドバーにも配置可能です。

表示の確認

あとは、「ランキング」ウィジェットを配置した場所の表示を確認すればOKです。

ランキングはこんな感じで表示されます。

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。

まずは無料お試し10日間。

サービス運営期間:20年

細かなデザインについては、スタイルシート(CSS)で修正していただければと思います。

まとめ

こんな感じで、手軽にWordPress上で入力するだけでランキングを作成することができます。

「おすすめしたい商品を本文下にランキング形式で表示したい」なんて場合には重宝する機能です。

コメント テーマの質問はフォーラムへ

  1. Kimoland より:

    基本的な質問で恥ずかしい限りなのですが、ランキングの画像を挿入する際のイメージ画像のタグを入力というのはどの部分を入力すればいいのでしょうか?

    • わいひら わいひら より:

      申し訳ないですが、ちょっと質問内容の意味が分からないです。
      もう少し詳しく書いていただけると助かります。

  2. Kimoland より:

    大変申し訳ありません。
    ランキング作成で画像・バナータグ部分に画像を入れたいです。横の注釈にイメージ画像のタグを入力して下さいと書いていますがイメージ画像のタグとはどのようなものでしょうか?
    メディアのライブラリから参照する事は出来るのでしょうか?
    初歩的な質問で大変申し訳ございません。

    • わいひら わいひら より:

      通常はASP(アフィリエイトサービスプロバイダー)のタグなどを入力します。

      普通の画像を入力したい場合は、以下のようなimg画像タグを挿入します。

      <img src="https://wp-cocoon.com/wp-content/uploads/2018/08/2018-08-25_20h35_55.png" alt="">

      ※hrefに入力するURLはメディアライブラリに画像をアップしてURLを取得したものを入力してください。

  3. Kimoland より:

    出来ました。本当にありがとうございました。素人すぎて質問の仕方が分からず大変失礼をいたしました。これからももっと勉強します。ありがとうございます。

  4. kei より:

    ランキングの画像はアフィリエイトタグ以外の画像を使用できないのでしょうか?
    例えば、ワードプレスにアップした画像をランキング画像として使用したいです。

  5. りょっぺ より:

    わいひら様
    お世話になります。
    cocoonの設定でツイッターカードが上手く反映できません。
    cocoonの設定に何か不具合があるのでしょうか?
    xoke2363.com
    ご回答よろしくお願いします。

    • わいひら わいひら より:

      サイトがnoindex状態になっています。
      http://xoke2363.com/robots.txt
      おそらくWordPress設定の「表示設定」にある「検索エンジンでの表示」にチェックがついているのではないかと思います。

      もし違うようであれば、できればコメントの案内にあるように、質問はフォーラムの方に書き込んでいただいてよろしいでしょうか。
      https://wp-cocoon.com/community/

      当ページのように、関連性のないページのコメントに書かれた場合、同様の問題に行き当たった方が見つけづらいですし、コメント機能は低機能なので画像とかがアップしづらいので。
      ご協力、よろしくお願いいたします。

  6. ベプベプ より:

    素晴らしいテーマありがとうございます
    一つ質問があります。すみません教えて下さい

    このページのランキングを見ると、左に「詳細ページ」右が「エックスサーバー」と表示されていますが、私の場合は右が「公式ページ」となっています。

    こちらのページのように、右に「好きな表示名」を表示するにはどのようにしたら良いのでしょうか?

    教えて下さいませ。私の設定方法の確認不足でしたら申し訳ありません。

    • わいひら わいひら より:

      「ページURL」の代わりに「タグで入力」リンクをクリックしてaタグを用いて入力してみてください。
      タグ入力だと自由にテキストを変更できます。

      • ベプベプ より:

        ありがとうございました。無事解決しました。単純な事だったのですね
        コメントで質問してすみませんでした。次回からは質問などはフォーラムへ参加させて頂きます。

        • わいひら わいひら より:

          ありがとうございます。
          そうしていただけると、画像もアップしてよりわかりやすく説明できるかと思います。

  7. らてん より:

    お世話になっております。
    ランキングに関して質問がございます。

    普段通りランキングを作成していたところ、20つ目の商品で「ランキングを更新できませんでした。」とランキング作成ページ上部に表示され、ランキングに商品を追加できなくなってしまいました。こちらは仕様でしょうか、エラーでしょうか。

    仕様であるならば、①ランキングには追加できる商品の上限がある。②ランキングには記載できる文字数の上限がある。③その他の原因が存在する。などがございますが、どのような仕様でしょうか。
    エラーであるならば、解決策をご教示いただきたく存じます。

    お手数をおかけしますが何卒よろしくお願いいたします。

    • わいひら わいひら より:

      大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。

      こちらから、「トピックを追加」ボタンを押してコピペで同様のことを書き込んでいただければ幸いです。

      ※フォーラムの書き込みは登録不要です。

      コメント機能だと機能が貧弱で、画像アップロード機能などがなく、対応(案内)が大変なのでご協力よろしくお願いいたします。

      • らてん より:

        申し訳ございません。承知いたしました。
        ありがとうございます!

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