PHP WordPress

googleアドセンスの設置方法※おすすめ

2017/01/10

この記事ではアドセンス広告を、

  • 記事内の上部に1か所(スマホは2か所)
  • 記事下部に2か所(スマホは1か所)

に自動挿入される方法をご紹介します。

いちいち手動でアドセンスタグを埋め込む手間から解放されます。

一応、いろいろ調べた結果、一般的に最適と言われている広告配置を再現しています。

 


スポンサーリンク


1.まずグーグルアドセンスにログイン

以下からアドセンスにログインしてください。

www.google.com/adsense/login2?hl=ja

 

2.アドセンスを設置したいサイトを追加しておく

アドセンス狩り対策のため、アドセンス管理画面からサイトを追加しておきます。

以下の順にクリック&入力してください。

2017-1-1-4-8-54

 


2017-1-1-4-13-26

これでOKです。

 

3.子テーマを作成

テンプレートを直接いじると、バージョンアップの際に、もう一度再設定することになるので、メンテナンスを考えて子テーマを作り編集していきます。

①まずFTPソフトでワードプレスサイトのトップにアクセス。

2017-1-10-22-49-38

そこから、「wp-content」をクリックして、次に「themes」をクリックする。

そこに、新しいフォルダ(ディレクトリ)を新規作成しましょう。

名前は「child」

 

②作った子テーマの「child」の中に「style.css」を新規作成します。

やり方が分からない方のために、説明。

メモ帳を開いてください。

2017-1-10-22-56-26

 

メモ帳に下記のソースコードを全部コピーして、ペーストしてください。

 

[css]
/*
Theme Name: child
Template: stingerplus
*/

@import url('../stingerplus/style.css');
[/css]

2017-1-10-22-57-52こんな感じ。

その次に、張り付けたコードの

  • Template:「ここを現在使っているテーマの正式名称を入力」
  • @import url「今使っているテーマのstyle.cssのディレクトリパスを記入」

します。

ちょっと小難しいですね^^;

Template部分は、正式名称を調べる必要があります。

今回は、STINGERPLUSというテーマを私は利用しているので、そちらで例を出しますね。

今順当に着ていればこうなっていますよね。

2017-1-10-23-2-57

私は今のテーマが「STINGERPLUS」なので、「stingerplus」をクリックします。

2017-1-10-23-5-39たくさんファイルが出てきまして、その中で「style.css」というファイルを見つけてください。

こちらを開いてください。

開けない場合は、一度ダウンロードして、メモ帳で開いてみてください。

開いたら、Theme Nameというところを探してください。

2017-1-10-23-7-58

そこに書かれている単語が、テーマの正式名称になります。

この例でいうなら「STINGERPLUS」の部分。

後で使うのでコピーしておきましょう。

 

次に、style.cssのあるディレクトリパスです。

2017-1-10-23-13-25

FTPソフトを開いていれば、この赤線部分をコピーしてください。themes/の次の部分です。※スラッシュは含めません。

2017-1-10-23-16-36テーマのフォルダ名でも大丈夫です。

 

ここまでで、

テーマの正式名称が「STINGERPLUS」

style.cssのパスが「stingerplus」

ということが分かりましたね。

こちらを先ほどの、メモ帳の部分にペーストしていきます。

2017-1-10-22-57-1

今回、正式名称がSTINGERPLUSとなっていたのですが、なぜか動きませんでした。小文字に変更してみたら動きました。詳しい方いたら教えてください^^;

張り付け終わったら、保存しましょう。

保存するときは、ファイル名を「style.css」にしてください。

2017-1-10-23-28-8文字コードはUTF-8にしましょう。

BOM有りかBOM無しか選べるときは、BOM無しでお願いします。

できたファイルは、「child」のフォルダ(ディレクトリ)にアップロードしておきます。

2017-1-10-23-30-7

さて、いよいよ記事にアドセンスが自動挿入されるように設

定していきます。

 

4.記事の下部にアドセンス広告が表示される設定の仕方

記事の下部にアドセンス広告が表示されるように設定していきます。

PC表示の時には2つ、スマホ表示の時に1つ表示されるようになります。

 

①まず親テーマにアクセスし「single.php」の中のソースコードをすべてコピー

②子テーマを開き「single.php」を新規作成し、中に①を全部ペースト

③適当な記事ページを見ながら、firebugで記事が終わっていると思われるところに以下のコードを挿入する

[php]

スポンサーリンク

<?php if (wp_is_mobile()) :?>

<div class="ad-bottom-sm">
★アドセンスのタグを挿入
</div>

<?php else: ?>

<div class="ad-bottom">
★アドセンスのタグを挿入
</div>

<div class="ad-bottom" style="margin: 70px 0">
★アドセンスのタグを挿入
</div>

[/php]

 

このコードはデバイスを判別して、PCは2か所、スマホは1か所表示するようになっています。

 

5-1.記事の上部にアドセンス広告が表示されるように設定

記事の上部に広告を自動挿入する方法として、ここでは最初にでてくるh2見出しタグを目印に、その直前に広告が自動挿入させるように設定します。

まず子テーマに「function.php」というファイルを新規作成。以下のコードを中身にコピペしてください。

「★アドセンスのタグを挿入」の部分はご自身のアドセンスタグに置き換えてください。

[php]
<?php
//最初のh2見出し手前にアドセンスを表示
function add_ad_before_h2_for_once($the_content) {
//広告(AdSense)タグを記入
$ad1 = <<< EOF

スポンサーリンク

★アドセンスのタグを挿入

EOF;
if ( is_single() ) {//投稿ページ
$h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
if ( $h2s[0] ) {//チェックは不要と思うけど一応
if ( $h2s[0][0] ) {//1番目のH2見出し手前にad1を挿入
$the_content = str_replace($h2s[0][0], $ad1.$h2s[0][0], $the_content);
}
}
}
}
return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_once');
?>
[/php]

 

設定が正しければ、最初のh2の直前に広告が表示されます。

h2の記述がなければ、表示されません。

 

5-2.スマホ表示のときのために、ヘッダーまたはパンくずリスト付近にスマホ用アドセンス広告が表示されるように設定

現在の設定で、PCは3つの広告が表示されますが(上下下)、

スマホはまだ2つだけしか(上下)表示されません。

 

アドセンス広告は1ページに3つまで設置していいので、できれば最大数設置した方がクリックされやすいといわれています。

そこで、スマホ表示の広告をもう一つ増やすために、300×100の横長広告を、ヘッダーかまたはパンくずリスト付近に表示させます。(300×250の大きいサイズはファーストビュー占領するので規約違反)

やり方は、まず子テーマのsingle.phpを開いて、以下のコードを適当な位置に挿入します。

※適当とは規約違反にならない位置です。

[php]
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>

<div class="ad-top">

スポンサーリンク

★300×100のアドセンスのタグを挿入
</div>

<?php endif; ?>
[/php]

 

たとえば、h2の見出し直前に設定した広告と同時表示してしまう可能性があるので気を付けてください。(※1画面に2つの広告表示は違反)

h2直前の広告と重なりそうなら、ヘッダー付近に挿入がおすすめです。

 

まとめ

以上、簡単でしたが、アドセンス広告の自動挿入の設定のやり方をご紹介しました。

レベル的には、ややWebのことをわかっている人向きでしょう。

初心者には厳しい内容かもしれません。

しかし、素直にコピペすれば理屈は知らなくても、できるとは思います。

以上、頑張ってくださいね。

スポンサーリンク

-PHP, WordPress