とあるエンジニアの作業ブログ

Affiliate Web製作 運用

DMM電子書籍の広告を自動出し分けするショートコード

投稿日:

DMM電子書籍のアフィリエイト広告は、そのままだとiframe使ってたり味気なかったりで使い勝手が悪いので、自分でカスタマイズしてみました。
ついでに、前に作ったアフィリエイト自動出し分けショートコードを応用して、自動で作品を出し分けるショートコードも作りました。

アフィリエイト自動出し分けの記事についてはこちら

marryup

やりたいこと

DMMの商品リンク作成ツールで作った広告リンクは以下のような感じ。
大きい女の子は好きですか?

このままだと味気ない感じ。そしてDMMのaff対応作品の広告リンクはこんな感じ。

iframeで重い上に対象作品もかなり限定されています。しかもなんか見切れとるやんけ。。。
ということで、商品リンク作成ツールで作ったリンクをカスタマイズしてaff対応作品みたいにします。
完成するとこんな感じ。

生贄投票
無料サンプル
ヒガンバナの女王
無料サンプル

処理概要

  • コミックタイプを引数として渡すとそのタイプに応じた広告をランダムに決定し、その広告を表示するためのhtmlコードを返す
  • 広告表示数を引数として渡すとその数分の広告を含んだhtmlコードを返す
  • 複数広告返す場合は重複しないようにする
  • styleもHTMLのstyleタグとして合わせて返す
  • 任意のボタンを作品イメージの下に表示する
  • コミックタイプがnullの場合は全ての広告からランダムに返す
  • 候補となる広告はCSV形式で与える
  • デフォルトではCSVはfunctions.phpと同じディレクトリに配置する

ソースコード

functions.phpに以下コードを追加します。

広告データを登録するCSVは、functions.phpと同じディレクトリにdmm_comic.csvという名前で配置します。
CSVのレイアウトとサンプルは以下です。

ボタンの画像はmuryo_sample.pngという名前でstyle.cssのディレクトリ配下にimagesというディレクトリを作成しその中に配置してください。(Wordpressなら標準で存在してるディレクトリです。)

使い方

でショートコードを呼び出すだけです。スタイルも勝手についてきます。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です。

-Affiliate, Web製作, 運用
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

GulpでWordPressのCI 〜実装編〜

gulpを使ったWordPressのテーマファイルCIの実装編です。 設計編はこちらを参照ください。 目次 やりたいこと・動作環境・前提 やりたいこと・環境・バージョン ディレクトリ構成 利用モジュー …

GulpでWordPressのCI 〜設計編〜

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しまし …

【WordPress】サーバーのテーマファイルをFTPで自動バックアップ

私みたいに趣味でWordPressを使ってる人はレンタルサーバーを借りてサイトを公開していると思います。 最近のレンタルサーバーにはバックアップ機能が標準/オプションで用意されているものがほとんどです …

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

Stinger8の細かなレイアウト修正をします。 目次 トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正 サイドバーに表示される最近の投稿やアーカイブな …

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …