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

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

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

関連記事

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

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

【WordPress】画像URLをショートコード化する

imgタグなどでsrc属性を指定する際の、画像uriをショートコード化して環境差異を無くします。 目次 作業の目的 メディア設定の変更 functions.phpにuploadsディレクトリを返すショ …

GulpでWordPressのCI 〜設計編〜

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

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

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

【Stinger8】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …