この記事では、見出し(H2)の上に広告を挿入する方法について解説しています。
「プラグインを使用せずにテーマファイルにコードを追記する形で広告を配置したい」や「自動でH2タグを検索して表示するコードを探している」という方におすすめの記事となっています。
プラグインをインストールするとサイトが重たくなる原因となってしまうため、できるだけコードで済ませたい方や、自分好みにカスタマイズできるコードを探している方におすすめです。
見出し(H2)上部に広告を表示させる手順
プラグインやテーマ機能を用いず、テーマファイルのPHPを編集することで広告表示させるためには、下記手順にてコードを追記する必要があります。
- ワードプレスの管理画面に遷移する
- 外観 > テーマファイルエディタ に遷移する
- 「編集するテーマ」で子テーマを選択する
- 「Theme Functions (functions.php)」にコードを記載し「ファイルを更新」する
- 表示されていることを確認する
大まかな手順は上記通りで、子テーマの「Theme Functions (functions.php)」にコードを追記し保存する必要があります。
テーマファイルの編集に伴う注意点は別記事にて解説するため、この記事では追記するコードを確認していきましょう。
見出し(H2)上部に広告を挿入するソースコード
コードは下記の通りです。
/************************************
* H2上部にN個おきにAdSenseを自動挿入するコード
* 各コードの説明はコード上部にコメントアウトで記載しています
*/
function adsense_before_headings_skip( $the_content ) {
if ( ! is_single() ) {
return $the_content;
}
/*
広告設置する見出しの間隔を設定
$interval-1個おきにアドセンスが挿入される
= 2 にした場合2個おきにアドセンスが挿入される
*/
$interval = 1;
/*
何個目の見出しから設置するかを設定
数字は0からカウントアップ
1つ目の見出しであれば0を設定
2つ目の見出しであれば1を設定
*/
$initial = 0;
/*
表示するアドセンスコードの設定
表示したい広告の種類分 $adN を作成する
*/
/* 1つ目の広告タグを挿入 */
$ad1 = <<< EOF
/* ここにアドセンスのコードを貼り付ける */
EOF;
/* 2つ目の広告タグを挿入 */
$ad2 = <<< EOF
/* ここにアドセンスのコードを貼り付ける */
EOF;
/*
アドセンスコードをさらに追加する場合はここで行う
$ad3、$ad4というように続けて追加する
*/
/*
ループ処理しやすいように $ad 配列に $ad1, $ad2 を格納
配列はアドセンスコード数に応じて設定
例えば3種類設定したいのであれば
$ad3を$ad1や$ad2同様に作成し、下記で配列を作成すればOK
$ad = array ( $ad1, $ad2, $ad3 );
*/
$ad = array( $ad1, $ad2 );
/* 設定されたアドセンスコード数を取得 */
$adnum = count( $ad );
$count = 0;
/* 投稿ページに限定・間隔が1以上の場合のみ実行 */
if ( is_single() && $interval > 0 ) {
/* h2 見出しのパターンを作成 */
$pattern = '/^<h2.*?>.+?<\/h2>$/im';
/* $headings[0] にページ内の全ての h2 見出し要素を格納 */
if ( preg_match_all( $pattern, $the_content, $headings ) ) {
/* 表示するアドセンスコードを格納する変数 */
$adcount = 0;
/* $interval 間隔でループを実行 初期値は $initial */
$h2count = count( $headings[0] );
for ( $i = $initial; $i < $h2count; $i = $i + $interval ) {
/* $headings[0]に格納された「h2要素」を「アドセンスコード + h2要素」に置換 */
$the_content = str_replace( $headings[0][ $i ], $ad[ $adcount ] . $headings[0][ $i ], $the_content );
$adcount++;
$count++;
/*
設定されたアドセンス数を上回った場合は
再度先頭のアドセンスコードから表示する
*/
if ( $adcount >= $adnum ) {
$adcount = 0;
}
}
}
}
/* 置換後のコンテンツを返却 */
return $the_content;
}
/* the_content フックに関数をフック */
add_filter( 'the_content', 'adsense_before_headings_skip', 9999);
/* 9999は読み込み順位(小さくすると目次より上に表示されることがある) */
/* H2上部にN個おきにAdSenseを自動挿入するコード End */
※赤字はコメントアウト箇所です。
コードの概要
動作の概要としては、下記の通りです。
- 各投稿にて指定のタグ「見出し(H2)」を検索する
- 検索したタグ「見出し(H2)」の要素を指定の間隔でピックアップ・格納する
- 格納したタグの要素に記載したアドセンスのコードを追加してアウトプットする
そのため、上記コードを素人目で変更できる箇所としては大きく以下の3点になります。
- 指定のタグ(H3を含めることも可能)
- ピックアップの間隔(感覚を空けて挿入することが可能)
- 挿入するアドセンスのコード(アドセンスだけではなくなんでもコードにして追加することが可能)
こんな感じで、コードを簡単にいじるだけでも自分好みに設定できることが分かります。
まとめ
今回は、サイトを構築して広告収入を得るうえでもっとも重要となる、広告配置についてコードを紹介する記事でした。
見出し(H2)上部に広告を挿入する方法について検索すると、1・3・5個目など見出しを指定して広告を挿入するコードは多くヒットしますが、多くの場合、見出しを自動検知するわけではなく、見出しが4個しかない場合エラーが出てしまうものでした。
そこで見出しを自動で検知して指定の間隔ごとに広告を挿入するコードについてご紹介いたしました。
自分のサイトに広告を挿入するうえで参考にしていただければ幸いです。