どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレス(WordPress)で使用するテンプレートによっては、ウィジェットを使って簡単にアドセンス広告を表示させることができます。
私が今愛用している「STINGER8」でも、テキストに広告コードをコピー&ペーストするだけで、記事下に２つ表示させることが可能です。
しかし、残念なことに記事上に表示させるウィジェットがないので、どうしても記事内の上部(h2タグの上)に表示させたかった私は、できるだけ簡単で手間のかからない方法を探しました。
そんな都合の良い方法はないのかと思いきや、探してみると意外にあるものですね。
アドセンス広告をブログに表示させているからには、収益効果の高い場所に配置したいと誰もが考えていることだと思います。
そこで今回は初心者の方でもサクッとウィジェットを追加して、アドセンス広告を表示する方法をご紹介します。
ウィジェットを追加する方法
それでは流れに沿って作業を進めていきましょう。
作業前の心構え
「STINGER8」で新しいウィジェットを追加するには、子テーマ内の「functions.php」ファイルを編集することになります。
このファイル編集で一度は誰もが経験したであろう画面が真っ白エラーでブログはおろか、ワードプレスにさえアクセスできない。
ワードプレスのテーマファイルの中でも特に、「functions.php」は慎重に編集を行う必要があります。
作業に入る前には必ずバックアップファイルを用意して、万が一に備えておくようにしましょう。
もしエラーが起きてしまった場合は、以下の記事を参考に復旧作業を進めてみて下さい。
| 参考：「functions.php」の編集後に画面が真っ白！原因とエラーを直す方法 |
ファイル編集は「親テーマ」ではなく「子テーマ」で行っていきますので、ファイルがない時はアップロードをして子テーマ内に追加しておきましょう。
「functions.php」を編集する
ワードプレスの管理画面から、「外観」⇒『テーマの編集』をクリックします。
子テーマの「functions.php」ファイルを開いたら、以下のコードをファイル内下部の空いているスペースにコピー&ペーストして下さい。
//記事上のウィジェット追加
register_sidebars(1,
array(
'name'=>'記事上',
'id' => 'widget-in-article',
'description' => '記事上に表示されるウイジェット。最初のh2タグの上に表示されます。',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));
//h2見出しを判別する正規表現を定数にする
define('H2_REG', '/<h2.*?>/i');//h2見出しのパターン
//記事にh2見出しが最初に含まれている箇所を返す（含まれない場合はnullを返す）
//h3-h6しか使っていない場合は、h2部分を変更してください
function get_h2_included_in_body( $the_content ){
if ( preg_match( H2_REG, $the_content, $h2results )) {//h2見出しが記事内にあるかどうか
return $h2results[0];
}
}
//記事内最初のh2見出しの上にウィジェットを追加する処理
function add_widget_before_1st_h2($the_content) {
if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき
) {
//広告（AdSense）タグを記入
ob_start();//バッファリング
dynamic_sidebar( 'widget-in-article' );//記事内ウィジェットの表示
$ad_template = ob_get_clean();
$h2result = get_h2_included_in_body( $the_content );//記事にh2タグが含まれていれば取得
if ( $h2result ) {//h2見出しが記事内にある場合のみ
//最初のh2タグの上に広告を挿入（最初のh2を置換）
$count = 1;
$the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
}
}
return $the_content;
}
add_filter('the_content','add_widget_before_1st_h2');
上記コードは「寝ログ」さんでご紹介されているものをお借りしています。
「コピペ一発！WordPress本文中にウィジェットでアドセンス挿入するカスタマイズ方法」
こちらのコードのおかげで、手間なく理想通りにアドセンス広告を表示させることができましたので、本当に感謝の気持ちでいっぱいです！
「functions.php」にコードが追加できましたら、『ファイルを更新』をクリックしてこちらの作業は完了です。
追加したウィジェットを使用
新しい記事上のウィジェットが「STINGER8」に追加されましたので、これを使って記事内最初のh2タグの上にアドセンス広告を表示させます。
使用するアドセンス広告の種類
ここではレスポンシブに対応し、デザイン性にも優れている「記事内広告」を使用します。
この広告ならパソコンとスマホで表示が崩れることもなく、デバイスごとに自動的に最適化表示してくれるので、手間もかからずオススメです。
Googleアドセンスのサイトで広告コードが取得できたら、ワードプレスに戻ってウィジェットに貼り付けましょう。
ウィジェットにコードを貼り付け
管理画面メニューの「外観」⇒「ウィジェット」に移動したら、右側に「記事上」が追加されていますので、後はテキストを追加してコードを貼り付けて下さい。
因みに「広告・Googleアドセンス用336px」ではタイトルが表示されませんが、記事上の方は入力すれば「スポンサーリンク」「広告」と表示させることも可能です。
ただ、「テキスト」のタイトル欄に入力した場合はラベルと広告の余白が広いので、もう少し間隔を狭めたいと思っている方も多いかと思います。
そんな時には、以下のように広告コード内に直接記載するだけで解決できます。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> スポンサーリンク <ins class="adsbygoogle" style="display: block;
上記の位置に記載するとラベルが余白なく表示されますが、左寄せになっているので子テーマの「style.css」に以下のコードを追記します。
/*-- アドセンスのラベル --*/
.widget-in-article {/*記事上*/
text-align: center;
}
.adbox {/*広告・Googleアドセンス用336px*/
text-align: center;
}
これで記事上・記事下のアドセンス広告に上手く表示できたかと思います。
ラベルも表示しておきたいという方はぜひ試してみて下さい。
まとめ
「STINGER8」の記事下だけでなく記事上にもアドセンスを表示することで、クリック率が向上する可能性があります。
また、アドセンスに限らずにアフィリエイト広告や、その他のコンテンツを表示させることにも活用できますので、運営されているブログやサイトによって使い分けができます。
ウィジェットの追加方法自体は非常に簡単なものなので、まだこの方法を試されていない方はこの機会に利用してみて下さい。
