現在デフォルトスキンとして「Season (Summer)」を適用中。

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

ランキング作成で1位にMixHostを入力してみた例

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

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

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

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

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

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

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

一歩進んだ入力方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

表示の確認

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

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

商品ランキング作成結果

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

まとめ

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

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

テーマ設定
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年1ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

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

  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タグを用いて入力してみてください。
      タグ入力だと自由にテキストを変更できます。

      • ベプベプ より:

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

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