最近、目の調子が悪くて更新頻度がおちています ><

【プラグイン不要】AdSense広告をWordPress記事内にカンタン配置・挿入

スポンサーリンク

追記:

Simplicity2を使用している場合は、Simplicity2.6.1(2017/10/3公開)から、標準機能として追加されました。バージョンアップを行って下さい。

※但し、広告サイズは「336×280」「300×250」のみのようです。


AdSense広告ユニットの上限が廃止されてから、本文中に広告をいくつか入れている方も増えましたね。

ただし「コンテンツ量に応じて適切に・・・」を意識しないと、かえってGoogleに嫌われてしまうので難しいところですが・・。

とはいえ3000、4000文字を超える記事なんかの場合、うまく広告を配置・挿入するとアクセントにもなり、視覚的にも収入的にも効果的かもしれません。

個人的には、これ以上プラグインを増やしたくなかったので、思い通りの位置にAdSense広告やアフィリエイト広告を簡単に配置・挿入できる方法を探していたところ!

Simplicity作者のわいひらさんが、プラグイン不要で超簡単アドセンス広告を本文中に表示させるカスタマイズ方法を公開してくれました♪

  • functions.phpにコードを書く(コピペ)
  • その中に、アドセンスの広告コードを貼り付ける

設定は以上です。

あとは、本文中の広告を表示させたい場所へ[ad]と入力するだけで、AdSense広告やその他のアフィリエイト広告を、思い通りの位置へ挿入できます。

今まで手作業で広告コードを貼り付けていた方や、プラグインを使いたくない方にオススメです。

スポンサーリンク

PC・モバイルで同じ広告を出すコード

  • functions.phpにコードを書く(コピペ)

functions.phpを編集する場合には、必ずバックアップを取ってから行って下さい。少しのミスで画面が真っ白になったり、WordPressにログインできなくなることがあります・・・ありました (TOT)

FTPソフトなどに慣れていない場合は、サーバーにログインして、ファイル管理画面から編集することをオススメします。

ファイル管理画面からfunctions.phpを編集する場合

ファイルマネージャ

エックスサーバーの場合「ファイルマネージャ」からfunctions.phpファイルを編集します。

場所:/public_html/wp-content/themes/使用中のテーマ/functions.php

※Simplicityを使用している方は

場所:/public_html/wp-content/themes/simplicity2-child/functions.php

functions.phpに何か書いてある場合は、必ずその下にコードを追加するように貼り付けて下さい。

↓ 以下のコードを全てコピーして貼り付けます

//[ad]ショートコードに対して広告を表示する
function replace_ad_shortcode_to_advertisement_ex($the_content){
$ad_shortcode = '[ad]';
$ad_code = <<< EOF
<div>スポンサーリンク</div>
//////////////////////////////////
//ここにアドセンスタグを挿入する//
//////////////////////////////////
EOF;
$the_content = preg_replace('{^(<p>)?'.preg_quote($ad_shortcode).'(</p>)?$}m', $ad_code, $the_content);
return $the_content;
}
add_filter('the_content', 'replace_ad_shortcode_to_advertisement_ex');
  • 赤い文字の部分に、AdSenseの広告コードを貼り付けます
  • レスポンシブ広告などに便利ですよね
アドセンス広告しか試していませんが、その他の広告でも可能ということですのでやってみて下さいね。

AdSense広告ユニット → コードを取得 → 広告コードをコピー

AdSenseコード取得

  • 正方形に近い大きめのレスポンシブ広告を表示させたい場合

data-ad-format=”auto“を

data-ad-format=”rectangle“へ変更します。

レスポンシブ広告を、正方形に近くて大きいサイズを表示させたい場合には、コードの一部を「auto」から「rectangle」に変更します。
rectangle」にすることで、スマホには正方形に近い広告が入るようになり、PCには正方形または横長の大きな広告が表示されます。
貼付け後イメージ

貼り付けが終了したら、よく確認してから保存編集(エックスサーバー)で確定します。

「スポンサーリンク」のラベルをカスタマイズする場合

AdSense広告の上に表示する「スポンサーリンク」や「広告」のラベルを少しだけ変更します。

functions.phpに貼る上記コード『<div>スポンサーリンク</div>』の部分を変更して下さい。

ラベルを中央に配置

<div style="text-align: center;">スポンサーリンク</div>

ラベルを中央配置 + 文字サイズ + 文字色

<div style="text-align: center;"><span style="font-size: 0.8em; color: #888;">スポンサーリンク</span></div>

AdSense スポンサーリンク ラベル

フォントが小さすぎたり、見えにくいとアドセンスの規約違反になるかもしれませんので、常識の範囲内自己責任でお願いします。

投稿記事内の文中に広告を入れてみる

「ビジュアルエディタ」、「テキストエディタ」どちらも一行使って[ad]と入力します。

[ad]ショートコードは、1行まるまる使って[ad]と入力してください。これは、文章内に[ad]というテキストを使っていたとしても、広告に変更しない処置です(誤置換防止)。引用元 Simplicity

ブラウザで表示してみると

こんな感じで、簡単に思い通りの位置へAdSense広告を配置・挿入することができました♪

広告の入れすぎは、アドセンスポリシー違反になる可能性があるので注意して下さいね。

パソコン用とモバイル用で広告をわけて表示したい場合のコードは、本家のサイトに掲載されています。

参考・引用
WordPress本文中の[ad]とショートコードを書き込んだ部分に広告を表示するカスタマイズ方法
Wordpress本文中にと書き込んだ際に、AdSenseコードと変換するカスタマイズ方法の紹介です。記事内に、何個でも広告を表示したい際に便利かと思います。ただし、AdSenseポリシー違反には注意。

まとめ

AdSense広告コードを手作業でコピペしてたよ~って人には、とっても便利ですよね!

私の場合、プラグインをこれ以上増やしたくなかったので、本当に助かってます♪

ただ、「functions.php」を編集するときは、必ずバックアップをとってから作業して下さい・・

ちなみに、テストでコードをコピペしたところ、1行目「//[ad]ショートコードに対して広告を表示する」一番最初の「/」が1本抜けてて、画面が真っ白になってしまいました(笑)

たったそれだけでもエラーになります。スタイルシートのようにはいきません・・

万が一、画面が真っ白、顔面が真っ青になっても・・慌てずにサーバーのファイル管理画面から一旦、追加したコードを削除すれば元に戻ります。

慎重に編集して下さいね~

余談ですがw

一番最初に、わいひらさんのコードをコピペして、AdSenseの広告コードを入れた時

/////////////////////////////////////
//ここにアドセンスタグを挿入する//
/////////////////////////////////////

ここにアドセンスタグを挿入する」← 素直に、この部分にだけ広告コードを入れてしまったら・・・

広告の周りに、いっぱい「///////////////////////////////」← ヒゲが生えてしまいましたw

画像ポップアップがSimplicityで標準機能に!カンタン拡大表示
レスポンシブ対応の画像をポップアップ(拡大表示)するbaguetteBox.jsがデフォルト機能として追加され簡単に使えるように!ページ内で開くので使いやすい。
トップへ戻る