スマホ画面にだけヘッダー直下にアドセンスを表示させる方法!条件分岐タグをSANGO・賢威7に設置!

ワードプレスで書いた記事をスマホ表示の時だけ、ヘッダー直下にアドセンス広告を表示させたい。

どうやらスマホで記事を閲覧した際に、ヘッダー直下にアドセンス広告があるとクリック率が上がるらしいんです。

とりあえず、ダメ元でも試して見る価値はありそうですね。

 

ども、かずのり(@kazunori_opt)です。

 

アドセンス広告をスマホでは表示させ、パソコンでは非表示にする方法を確認しましょう。

single.phpに少し記述するだけの簡単な作業です。

サンプリングに使ったWPテンプレートは「SANGO」と「賢威7」です。

 

それぞれ、追記の位置が違うのでしっかりと確認しておきましょう。

Sponsored Link

アドセンス広告をスマホ=表示 PC=非表示にする方法

アドセンス広告を

・スマホでは表示
・パソコンでは非表示

それぞれの表示を使い分けるには、テンプレートのsingle phpに追加のコードを記述します。

今回は、追記の際に少し不明なところがあったので自分への備忘録として。

そして、同じように困っている方に解決のヒントになれば幸いです。

また、single phpに追記を行う場合は、バックアップを取って置くか、子テーマを使って追記を行うようにしましょう。

条件分岐タグを使う

スマホではアドセンスを表示させ、パソコンで非表示にするには「条件分岐タグ」を使用します。

以下が、single phpに追記する条件分岐タグです。

条件分岐タグ
<?php if ( wp_is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php else: ?>
 // PCで表示させたい内容
<?php endif; ?>

このタグを使えば、アドセンスコードに限らずスマホやパソコンでの表示・非表示を分けることができます。

とっても便利な分岐タグですね。

今回は、スマホでアドセンス広告を表示させたいので、

<?php if ( wp_is_mobile() ) : ?>

<?php else: ?>

このタグの間にアドセンスコードをコピペします。

パソコンで表示させたい内容は無いので、2段目については空欄でOKです。

 

そうそう、アドセンスコードにはスポンサードリンクの表示もしっかりと明記してくださいね。

ちなみに、条件分岐タグについて参考にさて頂いた記事がこちら。
参考 【WordPress】wp_is_mobile()でPCとスマートフォンで表示を切り替える方法【条件分岐タグ】Handy Web Design

「SANGO」のsingle phpに条件分岐タグを追記する

ワードプレス管理画面から「外観」→「テーマの編集」→「個別投稿(single php)」の順でクリックします。

SANGOのsingle phpの画面は以下の通りです。(カスタマイズやバージョンにより多少異なる)

ヘッダーの直下にアドセンス広告を表示させてたい場合は、

single php

<?php get_header();?>

<div id=”content”<?php column_class();?>>

上記のコードの間にコードを追記します。

分岐タグをペーストすると、以下のようになります。

Sponsoreed Linkの下の3行は僕が独自で設置しているコードなので無視して下さい。

追記が確認できたら「ファイルを変更」して完了です。

 

条件分岐コードを追記後、アドセンス広告の表示には少し時間がかかります。

僕の場合、このブログに初めてアドセンス広告を掲載するので、条件分岐タグを追記して2時間が経ちますが、広告の表示はまだありません(汗

でも、Sponsoreed Linkの表示が出ているので大丈夫。

気長に待ちましょう。

パンくずリストの下に、アドセンス広告を表示させとようと追記位置を色々と試してみましたが、パンくずリストを交わすことができず・・・。

パンくずリストをかわす場合は、パンくずリストをフッターに移動させないとダメなのかも?

「賢威7」のsingle phpに条件分岐タグを追記する

条件分岐タグの設置方法を同じです。

ですが、テンプレートが違うとsingle phpに記載されているコードも違います。

条件分岐タグの追記位置がわかりづらかったので、賢威7ユーザーの方はこちらで確認してください。

条件はSANGOと同じ、スマホのヘッダー直下にアドセンス広告を表示です。

賢威7では、<!–▼メインコンテンツ–> の上に、条件分岐タグを追記します。

条件分岐タグを追記すると以下のようになります。

タグの追記を確認できたら「ファイルを更新」しましょう。

アドセンスコードが反映されると、スマホだけにアドセンス広告が表示されます。

スマホで確認した画面がこちら。

しっかりとアドセンス広告が表示されていますね。

賢威7の場合は<!–▼メインコンテンツ–> の上に条件分岐タグを追記しただけですが、パンくずリストをかわす事が出来ました。

理由はよくわかりませんが、CSSをいじりすぎると、深みにハマるのでこれ以上は触らないよにしますw

条件分岐が既に設定されているテンプレートもある?

今回、複数のブログに条件分岐タグを設置しました。

ですが、一つだけ既に条件分岐タグがsingle phpに使用されていて、アドセンスが表示されないアクシデントもありました。

条件分岐タグを追記する際は、single php内に条件分岐タグが存在していないか先に確認をしておくといいですね。

 

以上、条件分岐タグの設置の仕方についての解説でした。

Sponsored Link
READ  外注ライターのツイッター&インスタ埋め込みが引用表示になる場合の対処法【ワードプレス】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です