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

2015.04.07
WORDPRESS

functions.phpにショートコードを記述
子テーマのstyle.cssに記述を足します。
スマホやタブレットでもアドセンスがセンターに表示されるように変更
最後に記事中に広告を表示させる為のコードを書きます。
これで記事中にアドセンスを表示させることが出来ました！

こんにちは。@dmgadget_ディーエムガジェットです。WordPressを使い始めてテーマを「Stinger3」で使っている頃はGoogleアドセンスなどはメイン記事の最後に２つ並べて配置していました。

通常Googleアドセンスは１ページに３つまでとなっていますが、自分の場合少し前までは右側サイドバーのトップに１つと記事の最下部に２つの計３つを掲載していました。しかしStinger5を導入したのをきっかけにそれまでのサイドバーとメイン記事最下部に２つ並べる方法をやめて、ショートコードを使って記事本文中に３つ掲載する方法に変更しました。全部で１００近くあった記事を全部変更する必要があったのでちょっと面倒くさい部分もありましたが、約３倍ぐらいクリック率が上がったので変更した意味があったのかなと思っています。簡単に導入出来ますので是非行ってみてください！

functions.phpにショートコードを記述

ディーエムガジェットではテーマにStinger5を子テーマで運用しています。子テーマを使用しての説明となりますので、導入していない方は下記よりどうぞ！

WordPressテーマ「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から広告のコードをコピーして貼付けます。モザイク処理がされてしまっていますが、実際にはこんな表記になります。

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

「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;
}
}