WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
- 2015.04.07
- WORDPRESS

目次
こんにちは。@dmgadget_ディーエムガジェットです。WordPressを使い始めてテーマを「Stinger3」で使っている頃はGoogleアドセンスなどはメイン記事の最後に2つ並べて配置していました。
通常Googleアドセンスは1ページに3つまでとなっていますが、自分の場合少し前までは右側サイドバーのトップに1つと記事の最下部に2つの計3つを掲載していました。しかしStinger5を導入したのをきっかけにそれまでのサイドバーとメイン記事最下部に2つ並べる方法をやめて、ショートコードを使って記事本文中に3つ掲載する方法に変更しました。全部で100近くあった記事を全部変更する必要があったのでちょっと面倒くさい部分もありましたが、約3倍ぐらいクリック率が上がったので変更した意味があったのかなと思っています。簡単に導入出来ますので是非行ってみてください!
functions.phpにショートコードを記述
ディーエムガジェットではテーマにStinger5を子テーマで運用しています。子テーマを使用しての説明となりますので、導入していない方は下記よりどうぞ!
Transmitなどで親テーマの「functions.php」を開きます。開いた「functions.php」の一番下のに以下の記述をコピペしてください。(functions.phpに間違った記述をするとブログが真っ白になりますので、心配な方は必ずファイルのバックアップをしましょう。又、functions.phpに限っては子テーマ運用を行っておりませんのでご了承ください。
//アドセンス function showads() { return ' <div class="ad_center"> <p style="color:#666;margin-bottom:5px;">スポンサーリンク</p> <div style="margin-bottom:10px;"> ここの間にアドセンスコードをペーストします! </script> </div></div> '; } add_shortcode('adsense', 'showads');
上記の「ここの間にアドセンスコードをペーストします!」と書いてある所にGoogle Adsenseから広告のコードをコピーして貼付けます。モザイク処理がされてしまっていますが、実際にはこんな表記になります。
「functions.php」への記述は以上です。保存して閉じましょう。
子テーマのstyle.cssに記述を足します。
アドセンスを記事中のセンターに表示させる為に少し書き込みます。子テーマの中の「style.css」を開いて一番下に
/* adsenseを中央に配置 */ .ad_center{ margin: 0 auto; text-align: center; }
と記述しましょう。コピペで大丈夫です。
スマホやタブレットでもアドセンスがセンターに表示されるように変更
このままだとスマホやタブレットではアドセンスがセンターに表示されないので記述を追加します。
同じく子テーマの一番下に下記のコードを追加します。
/*media Queries タブレットサイズ adsenseを中央に配置 ----------------------------------------------------*/ @media only screen and (min-width: 380px) { .ad_center{ margin: 0 auto; text-align: center; } } /*media Queries PCサイズ adsenseを中央に配置 ----------------------------------------------------*/ @media only screen and (min-width: 780px) { .ad_center{ margin: 0 auto; text-align: center; } }
最後に記事中に広告を表示させる為のコードを書きます。
メイン記事の広告を入れたい場所に
と記載すれば書いた場所のセンターに広告が表示されます。新しく広告のコードを入手した方は表示されるまでに少し時間がかかるかもしれません。スマホやタブレット端末でも表示を確認しましょう。いかがでしょうか?正しくセンターに表示されましたでしょうか?表示されない方はもう一度設定を見直してみてください。
これで記事中にアドセンスを表示させることが出来ました!
本文の文章が短い場合何回もアドセンスが表示されると読みにくいので、その場合は表示するアドセンスの数を1から2個に変更するなどしてユーザビリティを上げましょう。読んで頂いてありがとうございました。
-
前の記事
Android用格安USB充電ケーブルはAmazonより100均の方が良いかもしれない。 2015.04.05
-
次の記事
WordPress 蛍光ペン風テキスト装飾をCSSに設定 2015.04.10