WordPressの記事にGoogleアドセンスの広告を挿入する

WordPressにGoogleアドセンスの広告枠を挿入しているサイトがあります。

弊社のクライアント様からも、最近「記事の中に広告を表示したい」というご要望をいただく事がありました。

 

そこで、新たにショートコードをつかってGoogleアドセンスの広告枠を挿入する方法をご紹介します。

スクリーンショット 2015-11-28 4.24.49

 

本文にGoogleの広告を埋め込んでも動作しない

まず、前提として、本文にGoogleアドセンスの広告タグを埋め込んでも多くの場合は動作してくれません。

WordPressのテキストエディタが、スクリプトのタグを消去してくれるからです。

この辺りは、不本意な表示の崩れを回避するためにはとても有効なのですが、

コードを埋め込みたい場合などには、意図しない動作になります。

 

テーマのPHPに、直接書くこともできるが

テーマファイルを直接編集して、コードを埋め込むこともできますが、

それだと記事の途中に挿入することが基本的にはできません。

文章の中に挿入する場合は、WordPressの「ショートコード」という機能を使います。

 

ショートコードとは?

ショートコードとは、あらかじめ設定しておいた文字列を文中に記入することで、

その文字列に処理を与える機能です。

具体的には、[ ここに設定した文字列を書く ] というように記入します。

今回の場合は「GoogleAD」というショートコードを作成しています。

スクリーンショット 2015-11-28 4.25.49

 

すると、記入した部分にGoogleアドセンスの広告が表示されるようになります。

スクリーンショット 2015-11-28 4.29.40

 

ショートコードはあらかじめ作成しておく

どのWordPressでもそうなるということではありません。

ショートコードの機能は、あらかじめ作成をしておく必要があります。

 

例えばこのテーマでは、3つのショートコードを作成しています。

  • 文中にお問い合わせフォームを挿入する
  • YouTubeの動画を挿入する
  • Googleアドセンスの広告枠を挿入する

例えば、YouTubeの動画は、 「youtube vid=動画のID」で表示する処理を書いています

//YouTube動画挿入
function youtubeFunc($atts) {
    extract(shortcode_atts(array(
        'vid' => null
    ), $atts));
    
    ob_start();
    
    if( isset( $vid ) ){
        //YouTubeの動画を表示させる処理
    return ob_get_clean();
}
add_shortcode('youtube', 'youtubeFunc');

 

すると、動画IDをしていするだけで、動画が表示されます。

YouTube Movie

表示する処理としては、こんな記述になります。

スクリーンショット 2015-11-28 4.37.36

動画IDを挿入して、あらかじめ指定した書式でYouTubeの映像を表示します。

なぜ、動画IDなのかというと、3つの理由があります。

  1. ショートコードに動画の共有タグをすべて書くのは大変
  2. 自由なサイズで動画を入れるとレスポンシブデザインで表示が崩れる可能性がある
  3. YouTubeの埋め込み仕様が変わっても、一括で置き換えられる

なので、ショートコードを使って処理しています。

 

Googleアドセンスを表示する準備

脱線してしまいましたが、Googleアドセンスをショートコードを使って表示する処理についてご説明します。

多くの場合は、ショートコード自体にGoogleアドセンスの広告タグを設定して仕様します。

//Googleアドセンス 広告タグ
function GoogleADsFunc() {
    
    ob_start();
    //ここに直接広告タグを書く
    return ob_get_clean();
}
add_shortcode('GoogleAD', 'GoogleADsFunc');

しかしこれだと、クライアントごとに毎回PHPを触っていただく必要が出てきます。

 

そこで、WordPressの設定画面を拡張して、フォームに記入するだけで大丈夫なようにカスタマイズしました。

スクリーンショット 2015-11-28 4.43.17

Google関係の設定を記入する部分がいくつかあります。

すべて、コピペだけで完結するようにしています。

 

ここに広告用の貼り付けタグを記入すれば、ショートコードで読み込むことができます。

注意点としては、コンテンツ内に貼り付ける場合、スマートフォンでの表示も考慮して

「レスポンシブデザイン」で広告を作成することをお勧めします。

スクリーンショット 2015-11-28 4.46.58

そうすれば、スマートフォンで見たときも崩れはありません。

 

まとめ

今回、たまたまクライアントのサイトで広告を表示したくて実装をしてみましたが、

自分自身、Googleアドセンスを使うのは、ほぼ初めてでした。

アカウントは持っていましたが、全く使っていなかったのです。

 

しかし、クライアントが使う部分は、自分でも事前に使うということを心がけているので

このブログでも、広告を表示してみることにしました。

その収益などについては、今後ご報告していきたいと思います。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る
こんなブログも読まれています