何がしたかったのか
当ブログの環境
このブログはWordPressのAffingerというテーマを利用して、作成しています。
Affingerに限らず、ほとんどのテーマがそうですが、PCとスマホでは記事一覧のレイアウトが異なります。
具体的にはこんな感じで。よく見るタイプですよね。
自然なインフィード広告を入れたい
トップページにグーグルアドセンスのインフィード広告を入れようとしたんですが、「ザ・広告」みたいなのっていやじゃないですか。記事と見分けがつかないのはダメですが、ある程度はデザインには溶け込ませたいんですよ。
最近はレスポンシブ広告なるものが用意されてるようで、画面幅に応じて、いい感じに広告を調整してくれるらしいです。これでできるかと思ったのですが、どうも思うようにいかず。
そうすると、PCとスマホで別のインフィード広告を用意するしかないということになりまして、どうやればいいのか考えました。
インフィード広告設定の基本手順
まずはAffingerでインフィード広告を設定する方法を確認しておきます。
１．インフィード広告を作る
グーグルアドセンス画面からそれぞれのインフィード広告を作成します。トップ画面から広告→サマリー→広告ユニットごと→「インフィード広告」を選んで作成します。
色々設定できるのでブログレイアウトに合わせたレイアウトで作りましょう。
今回は「インフィードPC用」「インフィードスマホ用」をそれぞれ別に作成し、コピペするコードを確認しました。
なお、もし一つの広告で済ませるなら「インフィード広告」ではなく「ディスプレイ広告」で作成する方が適してるケースが多いと思います。
２．ウィジェットの設定
続いて、WordPressに移り、外観→ウィジェットを選びます。
「広告・Googleインフィード広告」を選び、「カスタムHTML」を追加して、さっき作った広告のコードを貼り付けます。
タイトルは別につけなくてもいいでしょう。
３．AFFINGER管理で設定
最後にAFFINGER管理に移動して「Google・広告/AMP」項目に移動します。
「インフィード広告の設定」項目の「トップページの記事一覧及びアーカイブに挿入」欄に１～９のうち好きな数字を入れます。
何記事毎に広告を表示するかの設定、と考えればいいです。サイドバーや関連記事にも入れたい場合は、そこにも数字を入れます。空欄であれば表示されません。
一つの広告をスマホでもPCでも表示させればいいのであればこれで完了です。
しかし今回はスマホとPCで別の広告を使いたい。ウィジェットでPC用とかモバイル用とか分かれてればいいのですが、インフィード広告ウィジェットは共通のようです。
当たり前ですが、2個貼り付けたら、広告が2個表示されるだけです。
さてどうしようかと。
結論から言うと２.ウィジェットの設定部分でちょっと工夫をして解決しました。
やっちゃダメなやつ
CSSで表示を切り替えてみようかな
最初に思いついたのは、CSSで表示を切り替える方法。勘のいい人はすでに危なげな香りを感じてますでしょうか。
テーマのCSSを編集してもいいんですが、Affingerならそんなことしなくてもいい方法があります。
AffingerではpcnoneクラスはPC（並みの画面の大きさ）では表示されませんし、smanoneクラスはモバイル（600以下の画面かな？）ではdisplay:noneで表示されない設定になっています。
じゃあこれを利用して、カスタムHTMLウィジェットでこんなコードを書けばいいのでは、と。
<span class="pcnone">
<!-- ここにスマホ用インフィード広告コード -->
</span>
<span class="smanone">
<!-- ここにPC用インフィード広告コード -->
</span>うん、たぶんこれでうまくいくでしょう。解決解決・・・
ちょっと待った
禁止されているコードの改変方法
AdSense コードを以下の方法で改変することは禁止されています。display:none などを使用して広告ユニットを隠す（ただし、レスポンシブ広告ユニットを実装している場合を除く）
google AdSense ヘルプ AdSense広告掲載ポリシー より引用(マーカーは著者による）
はい、そうです、がっつりポリシー違反です。最悪アカウント停止されます。やる前に気づいてよかった。
そりゃそうですよね。このHTML自体は読み込まるわけです。つまり何で見ててもPC用、モバイル用、両方の広告表示用スクリプトが呼び出されてるんです。
Script呼び出して、両方の広告表示してる風なのに、実は片方はcssで隠しちゃってるんです。そう考えたらまぁダメでしょうね。悪気はなくてもアウトな行為でしょう。
この方法自体は、広告にさえ使わなければ共通ウィジェットでのスマホとPCの表示振り分けには使えそうなんですけどね。
実際やってみた方法
PHPで切り替えればいい
ならばHTML自体を端末に応じて切り替えるしかない、HTML替えるならPHPだ、という単純思考によりPHPでやってみることにしました。
テキストウィジェット内でPHPを実行できるようにする
そのままでは、ウィジェット内に書かれたPHPコードは実行できません。
一つフィルターを追加してあげる必要があります。こちらのページを参考にさせていただきました。
function.phpに以下のコードを書き加え、更新します。
function widget_text_exec_php( $widget_text ) {
if( strpos( $widget_text, '<' . '?' ) !== false ) {
ob_start();
eval( '?>' . $widget_text );
$widget_text = ob_get_contents();
ob_end_clean();
}
return $widget_text;
}
add_filter( 'widget_text', 'widget_text_exec_php', 99 );これでテキストウィジェット内に書かれたPHPコードが実行されるようになります。
プラグインでやる方法もあるようですが、これだけならプラグイン入れるまでもないかと。
テキストウィジェットを追加して振り分けコードを書く
続いてWordPressの外観→ウィジェットから「広告・Googleインフィード広告」を選び、テキストウィジェットを追加します。
必ずテキストエディタを選択して下記を書き込みます。
<?php if(wp_is_mobile()){ ?>
// ここにスマホ用インフィード広告コードをコピペ
<?php }else{ ?>
// ここにPC用インフィード広告コードをコピペ
<?php } ?>これで完了です。
なお、途中でビジュアルエディタに切り替えると勝手に書き換えられることがあるので、切り替えずに完了させます。
完璧じゃない
これでだいたい思ったようには表示されますし、表示してない広告のスクリプトが呼ばれることもないのでおおむね成功と言えそうです。でも完璧じゃないんです。
レイアウトの切り替えは一般的には画面の大きさに応じて行われますが、この方法による広告の切り替えはWordPressのwp_is_mobile関数で端末種別をみて処理を振り分けているだけなので、レイアウトと一致しないことがあります。具体的にはPCで小さな画面で見たり、タブレットだとたぶんずれます。
もうこの辺はあきらめました。こだわるならphpで画面サイズを取得して振り分ければいいんですが、そこまでやらなくてもいいかな、というのが今のところ。そこまでしてもPCのウィンドウサイズ変更には対応できませんし。
その他の選択肢
最初からレスポンシブ広告一つですます
ブログのレイアウトにもよりますが、もしレスポンシブ広告一つで対応できるならそっちのが圧倒的にいいです。
まずはディスプレイ広告（レスポンシブ広告）を作ってみてうまく表示されるか試してみることをお勧めします。
それでうまくいかないときだけ上記の方法をお試しください。
ブログのレイアウトの方を広告に合わせる
逆転の発想。かなりの大仕事になりそうなので面倒ですが、本格的に広告運用を考えるならこれもあり、というかこうすべきなのかもしれません。
AffingerならEXにすればJETという広告が溶け込みやすいテーマが使えるようです。私の場合はデザインも自分でやるよりは、既存のもの使わせてもらった方がキレイにできそうなので、いずれは検討します。
他にいい方法あれば教えてください
「そんなことしなくてももっと簡単にできるよ」とか「こうしたほうがいいよ」とかあればコメントいただけると嬉しいです。