wordpressのテーマ「cocoon」には、ランキング作成機能が標準装備されています。
この機能では、「商品名」「画像、バナー」「説明文」「アフィリエイトタグ」などの商品情報を入力することによって、ランキングページを簡単に作成できます。
一つの商品に対して、「amazon」「楽天」など複数のショップへアフィリエイトリンクを貼ると、報酬のとりこぼしが減らせます。
「cocoon」では、各ショップへのリンクボタンにセレクタが設定されているので、これを利用してリンクを貼ってみたいと思います。
ただ、複数ショップへリンクを貼るには、ショップの数だけタグを取得しなければなりませんが…。
*今回は、「amazon」「楽天」「yahooショッピング」3つのショップへリンクを貼ります。
各ショップのタグ取得
「もしもアフィリエイト」では、「どこでもリンク作成」という機能があるので、これを利用するのが良いかと思います。
提携中プロモーションページから、「amazon」の「どこでもリンク」をクリックします。(↓はamazon)
「リンク先URL」と「リンクテキスト」を入力し、「どこでもリンクを作成する」を押すと、下にタグが出力されます。
「リンク先URL」:検索結果や商品ページなどのURL
「リンクテキスト」:アマゾンであれば「Amazon」とか
「リンク種別」:テキストリンク
他、「楽天」「yahooショッピング」についても同様に、「どこでもリンク」からタグを取得します。
必要であれば、画像のみのタグも取得しておきます。
各ショップへのボタンリンクのセレクタ確認
「cocoon」親テーマのstyle.cssを開いて、「shoplinkamazon」で検索すると、4401行くらいに
.shoplinkamazon a { background: #f79901; }
という記述があります。これが「amazon」のセレクタです。これ以降の行に、「楽天」「yahooショッピング」などのcssがズラッと並んでいます。
例えば
- 楽天:.shoplinkrakuten
- yahooショッピング:.shoplinkyahoo
などなど。他にもいっぱいあります。見ればどれのものか大体わかるかと思います。
ランキング作成
「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>