今回の記事では「スマホで表示したいアドセンス広告」と「PCで表示したいアドセンス広告」を、使用しているデバイスによって勝手に切り替えて表示させる方法をまとめました。
早ければ10分~15分程度で設定を終えることができますので、すぐにでも終わらせたい方は参考になるのではないでしょうか。
いくつか注意点があるので、あらかじめ注意点を読んだ上自己責任で試してみてください。
別記事ではPCでアドセンス広告二つをを横並びにする方法もまとめています。
注意点
大前提として私はWordPressの編集に関しては独学であり、専門でも得意分野でもありません。
わからない場面を調べながらやる程度の知識です。
それでもよろしければ是非参考にしていただけたらと思います。
「スマホで表示したいアドセンス広告」と「PCで表示したいアドセンス広告」を設定する前に、あらかじめ注意点に目を通しておいてください。
注意
- 子テーマで行う方法なので、バックアップを取っておくなど失敗した場合元に戻せるようにしておく
- テーマ「AFFINGER6」で実践できている方法
- 「[PC]・・・[/PC]」といったショートコードでの分岐方法ではない
デザインが崩れた場合に対応できるよう、あらかじめバックアップを取っておいた方が安全です。
AFFINGER6で実践できているものですが、おそらくSTINGER系のテーマであればうまく表示されるのではないかと思います。
STINGER PROのテーマでもうまく表示されています。
ショートコードではないため、記事内へ記載しても反映されない方法です。
スマホとPCのアドセンス別々で表示する方法
私はエックスサーバーを使用しているため、エックスサーバーで行っている手順で紹介させていただきます。
例
記事内の関連記事下へ分岐するアドセンスを表示させる
分岐するアドセンスはいろいろな場所へ任意で表示させることができますが、今回は上の例に沿ってわかりやすく説明します。
子テーマでphpを2つ作成
サーバーへログインし、ファイルマネージャーから自身の子テーマを編集する場所へ進んでください。
私の場合は「afinger-child」です。
自身の子テーマに「single.php」と「single-type1.php」を作ります。
作成したそれぞれのファイルの中身は、本テーマ(私の場合は「affinger」)にある「single.php」と「single-type1.php」からコピーし、それぞれのファイルにペーストしておいてください。
保存文字コードは「UTF-8」でOKです。
作成したファイルを編集
「single.php」
子テーマへ追加した「single.php」の中身の書き換えを行います。
書き換え前
<?php
if ((trim($GLOBALS['stdata74']) !== '') && ( in_category($GLOBALS['stdata74']) )) {
include(TEMPLATEPATH . '/single-type2.php');
} else {
include(TEMPLATEPATH . '/single-type1.php');
}
書き換え後
<?php
if ((trim($GLOBALS['stdata74']) !== '') && ( in_category($GLOBALS['stdata74']) )) {
include(STYLESHEETPATH . '/single-type2.php');
} else {
include(STYLESHEETPATH . '/single-type1.php');
}
変わった点は「TEMPLATEPATH 」が「STYLESHEETPATH」になっているところです。
上の「書き換え後」の内容をまるまるコピーしていただいて問題ありません。
「スマホで表示したいアドセンス広告」と「PCで表示したいアドセンス広告」をデバイスによって切り替えるための設定はここまでで終わりです。
次の工程で実際に表示されるようにコードを入力していきます。
single-type1.php
「single-type1.php」ではスマホとPCでアドセンスを分岐するためのコードを入力していきます。
まずは分岐コードの説明をさせてください。
<?php if ( wp_is_mobile() ) : ?>
<!-- スマホad -->
あいうえお
<?php else: ?>
<!-- PCad -->
かきくけこ
<?php endif; ?>
上のコードには「スマホad」と「PCad」があり、それぞれひらがなを例に記載しました。
上のコードを「single-type1.php」の任意の場所へ記載すれば、「スマホではあいうえお」、「PCではかきくけこ」という形で表示されることができます。
そのため「あいうえお」の部分にスマホのアドセンスコード、「かきくけこ」部分へPCのアドセンスコードを入れれば、デバイスごとにアドセンス広告を載せられるということです。
分岐コードはどこへ記載する?
分岐コードは任意の場所へ設置できます。
今回は「single-type1.php」で説明しているため記事内になっていますが、「home.php(トップページ)」だったり「category.php(カテゴリーページ)」など場所を選ばす置くことが可能です。
ただ、その中でもファイル内のどこへ記載すればよいのか。
その点について簡単に説明します。
上は記事内の文章をが終わった直後にアドセンスを置きたい場合の例として実際にコードを入れた例です。
「single-type1.php」のファイル内に「ソーシャルボタン読み込み」というところがあるので、その上に置くというイメージで記載しました。
その結果
指定した場所へ「あいうえお」という文字が表示されています。
先にもお伝えしていますが、正直言って私自身もそこまでphpの編集に関して詳しくありません。
なので、「ここっぽいかな?」という感覚でしか編集できないこともあり、バックアップを取りつつ「ここに記載したらうまく反映するのでは?」というような感覚で何度もやっています。
ただ、今回紹介した方法ではうまくスマホとPCそれぞれのアドセンス表示がうまくできているため共有させていただきました。
参考用:スマホとPC分岐コード
<!-- スマホ/PC分岐アドセンスここから -->
<?php if ( wp_is_mobile() ) : ?>
スマホ用のアドセンスコード
<?php else: ?>
PC用のアドセンスコード
<?php endif; ?>
<!-- スマホ/PC分岐アドセンスここまで -->
上のコードを任意の場所へ記載することで、デバイスごとに表示したいアドセンスなどを切り替えることができます。
スマホとPCのアドセンスを別々で表示のまとめ
今回は「【15分で終わる】スマホとPCのアドセンスを別々で表示したい/PHPへ直接入力する簡単な方法」として一覧の流れをまとめてみました。
素人でもある私もにもできている内容なので、あまりブログなどのデザインを行ったことがない方でも簡単にスマホとPCで表示を切り替えることができると思います。
この記事には「スマホとPCのアドセンス別々で表示したい」ということでまとめていますが、アドセンスだけでなくスマホとPCで分岐したい場合は様々な用途として使える方法です、
その他にも「PCだけで表示したい」時や「スマホだけで表示したい」時にも活用できるでしょう。
是非自分のブログでも試してみてください。
もちろんバックアップはしっかりしておきましょう。