ブログ記事内の好きな場所にGoogle AdSense を設置する方法
いろいろなブログを拝見しますが、Google AdSense の配置も実にさまざまです。私もこれまでいろいろと試してきましたが、ひとまず下記のような配置で落ち着けようと考えています。
- 記事ページではアドセンスは記事内に集中
- まずは最初の h2 タグの上
- 次いで最後の h2 タグの上
- 最後は記事下
本文中に2つもアドセンスを置くと、滞在時間が短くなるという話もあります。しかし当ブログの場合は数か月テストしてみても特に変化はありませんでした。ゆえに途中で離脱されるようなら己の力不足よと割りきります。
更新が止まったプラグインに頼るのは不安すぎる
さてこれまで当ブログでは、こうした記事内配置のアドセンスは “AdSense Manager” というプラグインを使ってきました。
しかしこれには常に不安がついて回りました。その理由はこちら。
このプラグインは2年以上更新されてないから、新バージョンのワードプレスだと互換性無くなるかもよ。
ワードプレスはけっこうな頻度で新バージョンに更新されます。いつ何時このプラグインと互換性がなくなるか分かりません。そうなった場合、また一から最適な方法を調べて貼り直し作業となります。
で、アドセンスの配置を落ち着ける今回のこのタイミングで、配置方法も見なおそうと考えたわけです。
ショートコードで自由に好きな部分に配置できるようにした
さまざまな方のブログを拝見しましたが、自由度高し & 安定感がある方法として、functions.php でショートコードを作成するという方法を採用しました。
はじめに：大変参考になりました！
大参考にさせていただいたのはこちらのブログ。
【パターン別】WordPressで記事中に広告を配置する方法
WordPressで記事中に広告を設置する方法として、プラグインを使用したり、ショートコードを用いたり、functions.phpを編集する方法などがあります。今回はパターンごとにまとめてみました。
sitebk.com
参考っつーかそのまんまです。大変お世話になりました！実にさまざまな方法が紹介されていますので、同じようにお悩みの方はぜひ参考に。
今回はこちらで挙げられていた方法をより具体的に記していきます。
まずはすべての元となるコードをコピペ
では実演です。
まずは下記コードをメモ帳にでもコピペしておきます。これがすべてのキーとなるコードなので、全文字しっかりコピペしてください。名称は変えてもいいですけど、なにか間違えたら大変なので最初はひとまずこのままで。
|
1 2 3 4 5 |
function showads() { return 'ここにアドセンスコード'; } add_shortcode('adsense', 'showads'); |
自分のアドセンスのコードをコピペ
次に現在使用しているアドセンスのコードを使います。
デフォルトサイズを使用している方は、アドセンスの管理画面からコードを確認。当ブログのように、閲覧ブラウザの幅によって表示する広告サイズを変更している（カスタマイズをしている）場合には、カスタマイズ後のコードを使用します。
今回は例として私のカスタマイズされているコードを使用しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css"> .adslot { width: 300px; height: 250px; } @media (min-width:340px) { .adslot { width: 336px; height: 280px; } } </style> <ins class="adsbygoogle adslot" style="display:inline-block;" data-ad-client="ca-pub-固有のコード①" data-ad-slot="固有のコード②"></ins> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> |
横幅 340px 以上のブラウザで閲覧すると 336px × 280px の広告を表示し、それ以下のブラウザで閲覧した場合には 300px × 250 px の広告を表示させるようにしています。
方法は下記よりどうぞ。
※固有のコード①はアカウントに紐付いており、固有のコード②は広告ユニットに紐付いています。ご自分のコードを確認しておいてください。
そして次にメモ帳にコピペしておいた最初のコード内の、「ここにアドセンスコード」部分に表示させたいアドセンスコードを貼り付けます。
なお前後のクオーテーションマークは含みませんのでご注意を！あくまでも「ここにアドセンスコード」部分です。
functions.php に貼り付けてショートコードのできあがり
アドセンスコードを貼り付けるとこのような状態になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function showads() { return '<style type="text/css"> .adslot { width: 300px; height: 250px; } @media (min-width:340px) { .adslot { width: 336px; height: 280px; } } </style> <ins class="adsbygoogle adslot" style="display:inline-block;" data-ad-client="ca-pub-固有のコード①" data-ad-slot="固有のコード②"></ins> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>'; } add_shortcode('adsense', 'showads'); |
最後にこれを「外観」→「テーマの編集」と進み、functions.php に貼り付けます。ファイル内最後の ?> の手前に貼り付けておきましょう。最後に「ファイルを更新」をクリックして終了となります。
※ functions.php を変にいじると画面が真っ白になってしまうことがあります。必ずバックアップを取ってから作業を行いましょう。
無事に更新できれば、 [adsense] というショートコードができあがりました。
記事作成時もすごく簡単に使える
このショートコード、使い方は超簡単です。記事内に [adsense] と書くだけ。
プレビューで確認してみると・・・
問題無いですね。このショートコードはビジュアルエディタでもテキストエディタでも変わりません。
広告ユニット単位でショートコードを作っておこう
ちなみに私の場合はこのショートコードを3つ作成しました。ユニットごとの稼働状況は見ておきたいですし、内容を少し変えたいものもあるので。できれば分けておいたほうがいいでしょう。
やり方はいたって簡単。
|
1 2 3 4 5 |
function showads() { 省略 add_shortcode('adsense', 'showads'); |
このうち、”showads” と “adsense” に1から3までナンバリングしました。
|
1 2 3 4 5 |
function showads1() { 省略 add_shortcode('adsense1', 'showads1'); |
こんな塩梅。このコードを1から3まで functions.php に追記して、adsense1〜3 という3つのショートコードを作成したと。
実際に使用する際はこのショートコードをそのまま直打ちしてもいいですが、プラグイン “AddQuicktag” に登録しておけば便利ですよ。
では再見。
この記事へのコメントはこちら