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

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

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

関連記事

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

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

MAMPを移行したらphpMyAdminが起動しなくなった

古いMacからMAMPを個別に移行したら、phpMyAdminが起動しなくなった。 どうやらMySQLのユーザー/パスワードが不一致になってしまったようだ。 関連して他のエラーも発生したため、一連で対 …

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

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

Stinger8のサイドバーにプロフィールを表示する

Stinger8のサイドバーにプロフィールを表示します。 目次 前提 作業手順 ウィジェットにHTMLを記述 CSSで見た目を整える 前提 WordPressがインストールされている Stinger8 …

【超初心者向け】githubでテーマファイルをバージョン管理する

恥ずかしながらgitでリモートリポジトリ管理するのが初めてなので自分用のメモ。 目次 やりたいこと 動作環境・前提 テーマファイルをmasterブランチで管理するまで 開発用のfeatureブランチ作 …