カスタマイズ

AFFINGER4(アフィンガー4)でPC・タブレットとスマホでサイドバー上のアドセンス広告を変える方法

更新日:

AFFINGER4(アフィンガー4)』でサイドバーの上にアドセンス広告を掲載する際に、PC・タブレットとスマホで別のアドセンス広告を掲載する方法をご紹介します。

今回の方法では、WordPressのウィジェットと「Widget Logic」プラグインを利用して実現します。

スポンサーリンク

ウィジェットでPC・タブレット用とスマホ用のアドセンス広告を追加

サイドバーの一番上にアドセンス広告を掲載するためには、ウィジェットの「サイドバートップ」にPC・タブレット用とスマホ用のアドセンス広告を追加します。

まずは、各アドセンス広告を用意します。

アドセンス広告の用意

サイドバーの横幅ですが、PCではデフォルトで300pxですので、以下のようにアドセンス広告を用意したとします。

  • PC・タブレット用:300×250のレクタングル
  • スマホ用:250×250のスクエア

「サイドバートップ」ウィジェットに追加

アフィンガー4であらかじめ用意されている「サイドバートップ」ウィジェットに、先ほど用意したPC・タブレット用とスマホ用のアドセンス広告を追加します。

手順

ウジェット画面で左側にある「利用できるウィジェット」の「テキスト」を「サイドバートップ」に追加し、「テキスト」を展開します。

展開後、大きい枠にアドセンス広告のコードをコピペすることで追加できます。

「タイトル:」欄の入力内容

この時、「タイトル:」欄にアドセンス広告を用意した際に設定した名前を入れておくと管理しやすいです。

WordPressのテーマ(テンプレート)によっては、この「タイトル:」欄に入力した内容がそのままページ上に表示されるものもありますが、アフィンガー4では、この欄に入力した内容はページ上に表示されません

例えば、PC・タブレット用のアドセンス広告を作成した際、「サイト名_side_top02_300_250」という名前にして、これを「タイトル:」欄に設定したとします。

余談ですが、このように、アドセンス広告の名前を設定する際は「ドメイン_PC(or SP)_場所_上下_サイズ」というようにすると管理しやすいです。

上記の「SP」というのは「Smart Phone」の略で「スマホ用」の意味です。「PC」はPCとタブレットを対象としています。

「Widget Logic」プラグインでPC・タブレットとスマホで表示を切り替える

前述までの内容では、PC・タブレット用とスマホ用のアドセンス広告が、PC・タブレット・スマホで2つとも表示されてしまいます。

そのため、デバイスで表示を切り替えるために「Widget Logic」プラグインを利用します。

このプラグインをインストールして有効にすれば、ウィジェットを展開すると「ウィジェットのロジック:」欄が追加されます。

そこに、各アドセンス広告用のウィジェットに以下を記載して保存します。

  • PC・タブレット用:「!is_mobile()」
  • スマホ用:「is_mobile()」

これらは関数と呼ばれるもので、「is_mobile()」関数は自分で準備しないと使えません。「is_mobile()」関数については、『AFFINGER4(アフィンガー4)でスマホのトップのみサイト名の下にアドセンスを設置する方法』の「スマホでのみ表示させるための関数を設置」をご参照ください。

「!is_mobile()」のように関数の最初に「!(ビックリマーク)」を付けると逆の効果となり、「is_mobile()」はスマホのみ適用させるための関数ですので、「!」を付けるとスマホ以外、つまり、PCとタブレットにのみ適用されます。

これで、PC・タブレットとスマホで別々のアドセンス広告が表示されるようになります。

-カスタマイズ

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