WordPressブログの任意の記事で、Google AdSense（グーグルアドセンス）を非表示にしたい場合があると思います。
当ブログは無料テーマの Simplicity を使用しているので、Google AdSense（グーグルアドセンス）を簡単に設置する事が出来ます。下記の様にパソコン用とスマホ用に、別々にウィジェットを設定する事が可能です。
Google AdSense（グーグルアドセンス）の無くなったスペースに、別の広告を貼りたいのですが中々上手くいきません・・・。
記事中で広告バナーを横並びにすると、パソコンでは上手く表示されるのですが、スマホで見てみると広告バナーが小さくなったり、横にはみ出たりします。
そこで、functions.phpに条件分岐のコードを記述して、パソコンでは横並びの広告バナー、スマホでは1つだけの広告バナーという風に、コンテンツをPCのみ スマホのみで別々に表示させる方法 を紹介したいと思います。
目次
テーブルを使ってバナーを横に並べてみる
まず初めに、テーブルを使って広告バナーを横に2つ並べてみます。パソコンとスマホでどのように表示されるのか確かめていきましょう。
WordPressブログ記事で、枠線なしのテーブルに、コードを2つ挿入しました。
パソコンでの見え方
パソコンで表示させると、300×300サイズの広告バナーが綺麗に横並びになりました。
スマホでの見え方
先程横並びで設定した広告バナーを、今度はスマホから閲覧してみましょう。
スマホでも広告バナーが2つ横並びで表示されましたが、大きさが半分ほどになってしまいました。これでは広告バナー自体が目立たないので、ブログの訪問者にクリックされ難くなります。
そこで、パソコンとスマホで別々に広告を表示させるコードを functions.php に追加してやります。
functions.phpに条件分岐のコードを記述
「ダッシュボード」➝「外観」➝「テーマの編集」➝「functions.php」と進みます。
functions.phpに下記のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ){ $content = do_shortcode( $content); if(!wp_is_mobile()){ return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォンで表示するコンテンツ /*タブレットも含まれる*/ function if_is_sp($atts, $content = null ){ $content = do_shortcode( $content); if(wp_is_mobile()){ return $content; } } add_shortcode('sp', 'if_is_sp'); |
コピペでポチっと。最後に「ファイルを更新」をクリックします。
何とか成功したみたいですね。
ショートコードを使って広告を表示させる
無事functions.phpに条件分岐のコードを記述できたので、仕上げはショートコードを使ってパソコンとスマホ別々の広告を表示させていきます。
1 2 3 4 5 6 7 8 | [pc] パソコンでのみ表示 [/pc] [sp] スマホでのみ表示 [/sp] |
パソコン
スマホ
では、パソコンで広告バナーを横並びに2つ表示、スマホでは1つだけの広告バナーを表示させてみましょう。
パソコン
スマホ
まとめ
Google AdSense（グーグルアドセンス）の広告を2つ並べて横並びに表示させると、パソコンでは上手くいきますが、スマホで閲覧した時に、縦に連続して2列に表示されてしまいます。これはポリシー違反になります。
今回の方法でパソコンとスマホで別々に広告を表示するコードを追加すれば、パソコンでは2つ横並びに、スマホでは単独という風に別々に表示させる事が可能になります。その他の使い方では、パソコンだけに広告を挿入する事や、スマホのみに広告を表示する事も可能になります。
コメント
はじめまして！
月乃塾ブログからマッキー事牧野といいます。
いつもワードプレスでブログを作成してますが、できることが多すぎてまだチンプンカンプンです(+_+)
是非ごりょんさんのブログを参考に勉強させていただきたいと思いますのでよろしくお願いします(^^♪
マッキーさんはじめまして。
こちらこそよろしくお願いします。