DMM電子書籍のアフィリエイト広告は、そのままだとiframe使ってたり味気なかったりで使い勝手が悪いので、自分でカスタマイズしてみました。
ついでに、前に作ったアフィリエイト自動出し分けショートコードを応用して、自動で作品を出し分けるショートコードも作りました。
アフィリエイト自動出し分けの記事についてはこちら。
やりたいこと
DMMの商品リンク作成ツールで作った広告リンクは以下のような感じ。
このままだと味気ない感じ。そしてDMMのaff対応作品の広告リンクはこんな感じ。
iframeで重い上に対象作品もかなり限定されています。しかもなんか見切れとるやんけ。。。
ということで、商品リンク作成ツールで作ったリンクをカスタマイズしてaff対応作品みたいにします。
完成するとこんな感じ。
処理概要
- コミックタイプを引数として渡すとそのタイプに応じた広告をランダムに決定し、その広告を表示するためのhtmlコードを返す
- 広告表示数を引数として渡すとその数分の広告を含んだhtmlコードを返す
- 複数広告返す場合は重複しないようにする
- styleもHTMLのstyleタグとして合わせて返す
- 任意のボタンを作品イメージの下に表示する
- コミックタイプがnullの場合は全ての広告からランダムに返す
- 候補となる広告はCSV形式で与える
- デフォルトではCSVはfunctions.phpと同じディレクトリに配置する
ソースコード
functions.phpに以下コードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
// DMM COMIC広告のHTMLを返す // 第1引数:タイプ(カンマ区切り複数) // 第2引数:表示広告数 function shortcode_getDmmcomicAfAd($atts) { // Initialize if (empty($atts[1])) { //表示数が指定されていない場合はデフォルト $atts[1]=4; } else { if ($atts[1]>4) { //表示するコミックの最大数は4 $atts[1]=4; } } // CSVファイルの読み込み $filepath = dirname(__FILE__)."/dmm_comic.csv"; $file = new SplFileObject($filepath); $file->setFlags(SplFileObject::READ_CSV); foreach ($file as $line) { if(!empty($line[0])){ $records[] = $line; } } if(empty($atts[0]) or $atts[0] == "ALL"){ //タイプがnullの場合は全てのコミックから選択 for($i = 1; $i < count($records); $i++){ $afad_html[] = $records[$i][1]; } } else { $type_array=explode(',',$atts[0]); for($i = 1; $i < count($records); $i++){ // 引数のタイプと$recordsの一致判定 if (in_array($records[$i][0], $type_array)){ $afad_html[] = $records[$i][1]; } } } // $afad_htmlの長さまでの整数配列を作成 $random = range(0,count($afad_html)-1); shuffle($random); // 表示数よりも取得対象のコミックの方が少ない場合取得できたコミックを全て表示する if ($atts[1]>count($afad_html)) { $ad_count=count($afad_html); } else { $ad_count=$atts[1]; } // 表示広告数分値を取得する for( $i=0; $i<$ad_count; $i++ ){ $comic_html .= '<div class="comic_inline_item"><div class="comic_box">'; $comic_html .= $afad_html[$random[$i]]; $comic_html .= '</div><img src="' . get_stylesheet_directory_uri() . '/images/muryo_sample.png" alt="無料サンプル" class="muryo_sample">'; $comic_html .= '</div>'; } $comic_style = '<style>.comic_inline_item { float: left; box-sizing: border-box; width: 120px; border: solid #e0e0e0 1px; padding: 5px; margin: 0 10px 10px 0; } .comic_box{ background-color: #fff; height: 153px; overflow: hidden; }</style>'; $muryo_sample_style = '<style>.muryo_sample { width: 95px; margin: 0 auto; margin-top: 5px; display: block; }</style>'; return $comic_html.$comic_style.$muryo_sample_style; } add_shortcode('dmmcomic_afad', 'shortcode_getDmmcomicAfAd'); |
広告データを登録するCSVは、functions.phpと同じディレクトリにdmm_comic.csvという名前で配置します。
CSVのレイアウトとサンプルは以下です。
1 2 3 4 |
コミックタイプ,HTML,タイトル,FILLER popular,<a href="https://book.dmm.com/detail/b600osgk04364/someonesdodo-001"><img src="https://pics.dmm.com/digital/e-book/b600osgk04364/b600osgk04364pl.jpg" border="0" alt="ヒガンバナの女王"></a>,"ヒガンバナの女王", popular,<a href="https://book.dmm.com/detail/k153adena00257/someonesdodo-001"><img src="https://pics.dmm.com/digital/e-book/k153adena00257/k153adena00257pl.jpg" border="0" alt="インゴシマ"></a>,"インゴシマ", sport,<a href="https://book.dmm.com/detail/b355fakta01223/someonesdodo-001"><img src="https://pics.dmm.com/digital/e-book/b355fakta01223/b355fakta01223pl.jpg" border="0" alt="弱虫ペダル"></a>,"弱虫ペダル" |
ボタンの画像はmuryo_sample.pngという名前でstyle.cssのディレクトリ配下にimagesというディレクトリを作成しその中に配置してください。(Wordpressなら標準で存在してるディレクトリです。)
使い方
1 |
<div class="clearfix ad-container">[dmmcomic_afad タイプ 表示数]</div> |
でショートコードを呼び出すだけです。スタイルも勝手についてきます。containerとclearfixだけ自分でつける必要があります。
引数の使い方は以下。
- 第1引数:タイプ
,(カンマ)区切りで表示したいタイプを指定します。スペースは入れないでください(第2引数と認識されます)。
もし全てのタイプを指定したい場合は”ALL”と指定してください。 - 第2引数:表示数
半角数字で指定してください。広告の最大数は4(デフォルト)です。それ以上大きい数字を指定したら強制的に4になります。
CSVの置き場や名前を変えたい場合は$filepath = dirname(__FILE__)."/dmm_comic.csv";
を変更すればOKです。
ボタン画像の置き場や名前を変えたい場合は$comic_html .= '</div><img src="' . get_stylesheet_directory_uri() . '/images/muryo_sample.png" alt="無料サンプル" class="muryo_sample">'
の/images/muryo_sample.png
の部分を変えればOKです。