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

Affiliate Web製作 運用

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

投稿日:

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

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

【通年】最新機器レンタル

やりたいこと

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

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

関連記事

【WordPress】Google Search Consoleへのサイトマップ登録と確認方法

Google Search Consoleにサイトマップを登録するメモ。これをしないとクローラに記事を拾ってもらえない。 7,8年前に1回やったことあるんですが、昔とやり方がめっちゃ変わってて結構焦り …

SiTest入門 ~サイトへの導入とABテストの実施まで~

サイト分析・改善ツールのSiTestというツールをがすごいという噂を聞きました。サイト自体を改変することなく、各種スプリットテスト(ABテストやリダイレクトテスト、多変量テスト等)を実施できるほか、ヒ …

【備忘】gitのglobal userとlocal user使い分け

Macで初めてgit commitした時に、「お前は誰だ?」的な感じで怒られた。

でユーザー名とメールアドレスを指定する必要があるらし …

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

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

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …