[COCOON]のランキング作成機能、複数のショップにリンクを貼る

blog

wordpressのテーマ「cocoon」には、ランキング作成機能が標準装備されています。

この機能では、「商品名」「画像、バナー」「説明文」「アフィリエイトタグ」などの商品情報を入力することによって、ランキングページを簡単に作成できます。

一つの商品に対して、「amazon」「楽天」など複数のショップへアフィリエイトリンクを貼ると、報酬のとりこぼしが減らせます。

「cocoon」では、各ショップへのリンクボタンにセレクタが設定されているので、これを利用してリンクを貼ってみたいと思います。

ただ、複数ショップへリンクを貼るには、ショップの数だけタグを取得しなければなりませんが…。

*ここでは、ASP「もしもアフィリエイト」を例に取ります。
*今回は、「amazon」「楽天」「yahooショッピング」3つのショップへリンクを貼ります。

 

スポンサーリンク
スポンサーリンク

各ショップのタグ取得

*各ショップとの提携方法については割愛させて頂きます。

「もしもアフィリエイト」では、「どこでもリンク作成」という機能があるので、これを利用するのが良いかと思います。

提携中プロモーションページから、「amazon」の「どこでもリンク」をクリックします。(↓はamazon)

cocoonランキング作成b2

「リンク先URL」と「リンクテキスト」を入力し、「どこでもリンクを作成する」を押すと、下にタグが出力されます。

「リンク先URL」:検索結果や商品ページなどのURL
「リンクテキスト」:アマゾンであれば「Amazon」とか
「リンク種別」:テキストリンク

cocoonランキング作成b

他、「楽天」「yahooショッピング」についても同様に、「どこでもリンク」からタグを取得します。

 

必要であれば、画像のみのタグも取得しておきます。

*画像のみのタグは、もしもアフィリエイトなら、「商品リンク」「簡単リンク」などから取得できます。(「どこでもリンク」からだと、取得できるショップが限られます)
 

各ショップへのボタンリンクのセレクタ確認

「cocoon」親テーマのstyle.cssを開いて、「shoplinkamazon」で検索すると、4401行くらいに

.shoplinkamazon a {
background: #f79901;
}

という記述があります。これが「amazon」のセレクタです。これ以降の行に、「楽天」「yahooショッピング」などのcssがズラッと並んでいます。

例えば

  • 楽天:.shoplinkrakuten
  • yahooショッピング:.shoplinkyahoo

などなど。他にもいっぱいあります。見ればどれのものか大体わかるかと思います。

 

ランキング作成

「cocoon設定」→「ランキング作成」を選択し、新規追加ボタンを押します。

すると以下のように、商品情報の入力画面になります。

「cocoon」ランキング作成

赤枠の「画像・バナータグ」「リンクタグ」にタグを入力していきます。

「画像・バナータグ」欄には、画像のみのタグを入力します。(空欄可)

「リンクタグ」欄に入力するコード

「リンクタグ」欄には、上の方で取得した各ショップのタグを組み合わせて入力します。

*「リンクタグ」入力欄がない場合は、「タグで入力」をクリックすると、その下に入力欄が現れます。

 

上で確認した、各ショップへのボタンリンクのセレクタのclassを付けて、それぞれ取得したタグを囲みます。

<div class="shoplinkamazon">アマゾンのタグ</div>
<div class="shoplinkrakuten">楽天のタグ</div>
<div class="shoplinkyahoo">yahooショッピングのタグ</div>
*上のコードは見やすいように改行を入れていますが、実際には改行は入れない方が良いかと思います。

*コード作成の際は、メモ帳か何かを使うのが良いかと思います。

これで、3つのショップへのリンクが、縦に並んだ状態で貼られます。

各ボタンを横に並べたい場合

「詳細ページ」を入力しない場合、各ボタンは縦に、横幅いっぱいで並びます。見栄えが良くないと思う事もあるかもしれません。

ボタンを横に並べたい時は、セレクタ「kaerebalink-link1」を利用します。多分「カエレバ」用かと思いますが、あるものは使ってしまいます。

これのclassを付けて上で作ったコードを囲みます。

<div class="kaerebalink-link1">
<div class="shoplinkamazon">アマゾンのタグ</div>
<div class="shoplinkrakuten">楽天のタグ</div>
<div class="shoplinkyahoo">yahooショッピングのタグ</div>
</div>
*上のコードは見やすいように改行を入れていますが、実際には改行は入れない方が良いかと思います。
 
*このページの下の方(「関連記事」の下)に、「詳細ページ」を入力しないで、各ショップへのリンクを横に並べた例があります。
タイトルとURLをコピーしました