アドセンス広告を全記事の目次前に表示するための方法【Xサーバー】

アドセンス広告を全記事の目次前に表示するための方法【Xサーバー】

こんにちは、Takeです。

先日、申請していたGoogle AdSenseの審査に通りました!

>>Google AdSenseの審査をブログ開始3週間で通過するためにやったこと

早速、はじめはGoogle Adsenseの自動広告を導入していたのですが、広告の数が多すぎてブログ記事が読みにくいとの声がありました。そこで、広告位置の調整を行なっています。

基本的に、記事の上・下・サイドバーなどの特定の位置であれば、ウィジェットやCSS編集を使って、広告表示タグをダッシュボード上で入力することで広告を表示することが可能な場合が多いと思います。

しかし、それ以外の場所にも自由自在に広告の配置を変えるためには、ブログテーマのphpファイルを変更する必要が出てくることを今回知りました。

例えば僕の使っているテーマの場合、「全ての記事の途中の特定位置」に広告を貼り付けるのは、ダッシュボード上での設定だけではできないようでした。

そこで、今回一般的に「効率の良い広告配置」と言われる、目次の前(H2タグの前)に広告を配置する方法について調べてみましたので、その内容について解説します。


効率的な広告位置について

どの位置に広告を貼り付けるのが効率的か調べると、たくさん記事が出てきます。

その中でも解説が明確だったので、僕は以下の記事を参考にさせて頂きました。

>>WordPressにアドセンス広告を設置する方法【図解】

記事本文中のアドセンスは非常に効果的。記事途中のアドセンスは1つ1つ貼り付けてもいいですが面倒なので「最初の見出しタグ(h2)」の前に自動で設置できるコードを利用させてもらいます。

他の記事ですが、H2タグ前の位置は、ブログ記事を読む人がまず導入部分を読んで、自分の求めている記事ではない場合に他の記事へ遷移する箇所という意味で、広告をクリックしやすい位置だとの説明があり、なるほどと思いました。

PHPファイル「ad-in-body.php」の作成

さて、H2タグの前に広告を入れたいのですが、そのためにはphpファイルを変更する必要があります。

※上のブログ記事の「記事本文中にアドセンスを自動で入れる」という箇所を参考にしています。

手順的には「ad-in-body.php」という新しいファイルをテーマに追加してそのファイルに広告を設置するコードを書き、「fnctions.php」をちょっと編集して記事中の見出しの前で「ad-in-body.php」ファイルを呼び出すという方法。

以下を記載したファイルを「ad-in-body.php」のファイル名でPCローカル上に保存しておきます。

1
2
3
4
5
6
7
8
<p class=adlabel>スポンサーリンク</p>
<div class=midad>
<?php if (wp_is_mobile()) :?>
スマートフォン用のサイズの広告のコード
<?php else: ?>
PC用の広告コード
<?php endif; ?>
</div>

※「スマートフォン用のサイズの広告のコード」と「PC用の広告コード」の部分は、Google Adsenseの広告コードで置き換えます。

筆者のようにXサーバーを使っている場合、この「ad-in-body.php」ファイルをWordpressサーバー上に新規追加するため、「FileZilla」というソフトをダウンロードする必要があります。理由としては、新規でphpファイルを追加する場合は、Wordpressのダッシュボードが使えないためです。

「FileZilla」は、mac向けに使われるフリーのFTPクライアントソフトです。ここでは、Wordpressのサーバー向けにファイルをアップロードするために使います。

まずはFileZilla公式ホームページから、FileZillaをダウンロードします。ダウンロードしたら、次に以下の手順でWordpressのサーバーへ接続します。

FileZillaによるWordpressサーバーへの接続

以下サイトを参考にさせて頂きました。

【FileZillaの使い方】WordPressでFTPソフトを使おう

FileZillaをダウンロードしたら、まず画面の左上にあるアイコンをクリックして、「サイトマネージャ」を開きます。そのあと、以下を記入します。

①ホスト

Xサーバーを契約した時に送られてきたメールの「■FTP情報」という欄に、

FTPホスト名(FTPサーバー名)  : sv****.xserver.jp

といった形で記載されています。

②プロトコル

「FTP-ファイル転送プロトコル」を選ぶ

③暗号化

「明示的なFTP over TLSが必要」を選ぶ

④ログオンの種類

「通常」を選ぶ

⑤ユーザ

ホストと同じく、Xサーバーを契約した時に送られてきたメールの「■FTP情報」という欄に以下の記載があります。

FTPユーザー名(FTPアカウント名): ******

⑥パスワード

ホスト、ユーザーと同じく、Xサーバーを契約した時に送られてきたメールの「■FTP情報」という欄に以下の記載があります。

FTPパスワード          : ******

以上を入力して接続すると、Wordpressのサーバーにアクセスできます。

アクセスしたら、「自分のサイトドメイン名」 > public_html > wp-content > themes > 「テーマ名」と進みます。

今アップロードされているファイル一覧が出てきますので、そこへ作成した「ad-in-body.php」をドラッグ&ドロップします。すると、新しいファイルとして登録されます。

「functions.php」ファイルの更新

「ad-in-body.php」が新しく追加できたら、「functions.php」に以下を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//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];
  }
}
function add_ads_before_1st_h2($the_content) {
  if ( is_single() ) {//固定ページも表示する場合はis_singular()にする
    ob_start();//バッファリング
    get_template_part(adinbody);//広告貼り付け用に作成したテンプレート
    $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_ads_before_1st_h2);

以上で、H2タグ前(目次前)に広告が導入できるはずです。

 

 

以上、本記事ではH2タグ前にアドセンス広告を挿入する方法について説明しました。