カスタマイズ

AFFINGER4(アフィンガー4)でスマホのトップのみサイト名の下にアドセンスを設置する方法

更新日:

AFFINGER4(アフィンガー4)』でスマホ表示の際に、トップページのサイト名の下にアドセンス広告を設置する方法をご紹介します。

今回ご紹介するのは、WordPressのウィジェットは一切使わず、「home.php」に直接、コードを記述する方法になります。

スポンサーリンク

スマホでのみ表示させるための関数を設置

まず、WordPressでスマホのみ表示させるための仕組みを用意しなければなりません。

WordPressではあらかじめ「wp_is_mobile()」という関数が用意されていますが、この関数だとスマホだけではなく、タブレットにも適用されてしまうため、スマホのみに適用する関数を用意する必要があるのです。

子テーマの「functions.php」に関数を記述

アフィンガー4の子テーマにある「functions.php」に以下を記述してアップします。

これで「is_mobile()」という、スマホのみに適用する関数を利用できます。

親テーマの「home.php」を子テーマにコピーして、アドセンスコードを設置

カスタマイズするファイルは子テーマで運用した方が後々管理がしやすいので、親テーマにある「home.php」を子テーマにコピーして、<div class="home-post post"> の下に、以下のように記述します。

上記の例では、「スマホ用」の部分にアドセンス広告を記述すれば、スマホのみアドセンス広告が表示され、PCやタブレットでは何も表示されません。

「PC・タブレット用」の部分に大きめのアドセンス広告を表示させたい場合は、専用の広告を用意して記述すれば、PCとタブレットのみその広告が表示されるようになります。

より適切なサイズのアドセンス広告を表示させる方法

アフィンガー4では、スマホでページを表示すると両サイドに15pxずつの空きがあります。

この状態でアドセンス広告のレスポンシブタイプの広告を設置すると、その余白の分だけサイズが制限された小さい広告が表示されることがあり、広告の訴求が弱まります。

これではスペースがもったいないため、アドセンス広告の部分だけ両サイドの空きを無くせば、画面の横幅いっぱいの広告を表示させることができ、適切な広告を表示させることができます。

例えば、以下のようにCSS(スタイルシート)で記述すれば、両サイドの余白を無くした状態で広告が表示されます。

上記の例では、アドセンス広告のコードの前後を div で囲み、style で直接、余白を調整していますが、class指定をするなどして、スタイルを記述してもかまいません。

-カスタマイズ

Copyright© アフィンガーNavi , 2017 AllRights Reserved.