MENU
そらいろ
SEとして7年の経験があるそこそこのエンジニア。
スキルセット:C#/VB.net/HTML/CSS/JavaScript/PHP
DB:Oracle/SQLServer他etc
専門はWebアプリケーション。データ分析やRPAにも精通。
WordPressテーマ「SWELL」の記事まとめ ⇒ SWELL

【SWELL】任意の見出し上にアドセンス広告を表示する方法を紹介!

当ページのリンクには広告が含まれています。

記事の途中にも広告を貼りたい、、

確かに上部と下部だけだとなかなか表示される機会が少くなるよね。
見出し前に広告出せるようにしてみようか!

今回は「SWELL」のカスタマイズ記事になります。

SWELL」を使っていて痒いところに手が届かないということがやっと発生しましたので対応してみました。

その内容は、「SWELL」では大体の位置に広告を貼り付けることができるのですが、任意の位置の見出し上広告だけは設定することができません。

各記事の作成時にショートコードを埋め込んであげれば可能なのですが、一括でできるわけではないのでメンテナンスが大変になってしまいます。

ということで、今回もやり方をまとめてみたので参考にしてみてください。

コードを利用する際の注意事項

当ブログのコードを利用して起こる不具合については対応できませんのでご了承ください。
本記事の内容を参考にブログ等で情報発信をする場合には、下記のルールを確認頂きたいと思います。

目次

任意の見出し上に広告を表示する

今回の手順では「テーマエディター」を使用しカスタマイズを行います。
必ずバックアップを取得してから実施するようにお願いします。

記事内広告の設定をする

広告コードをfunctions.phpにべた書きしてもいいのですが、あまり見栄えが良くないのでSWELL標準のショートコード機能を使っていきたいと思います。

「SWELL設定」⇒「広告コード」タグ⇒「記事内広告[ad]」の入力欄に広告コードを貼り付けてください。

広告コードはアドセンスでも各種ASPでも大丈夫です。

ページ下の「変更を保存」をクリックで設定完了です。

functions.phpを変更する

子テーマのfunctions.phpに下記コードを追加してください。

function adsense_before_h2($the_content) {
	$ad = <<< EOF
		[ad]
	EOF;
 
	if ( is_single() ) {//投稿ページ
		$tag = '/^<h2.*?>.+?<\/h2>$/im';//h2見出しのパターン
		$disp = array(2,3); //表示させたい見出しの番号を指定
		if ( preg_match_all( $tag, $the_content, $h2gets )) {
			if ( $h2gets[0] ) {
				$count = 0;
				foreach ($h2gets[0] as $h2get) {
					$count++;
					if (in_array($count,$disp)) {				
						if ($h2get) {
							$the_content  = str_replace($h2get, $ad.$h2get, $the_content);
						}
					}
				}
			}
		}
	}
	return $the_content;
}
add_filter('the_content','adsense_before_h2');

作りとしては、H2見出しを検索し指定の見出し番号の場合に見出し上に広告を表示するようにしています。

3行目の[ad]は一つ前で設定した広告ショートコードです。

べた書きでもいい人はここに広告タグを貼り付けても問題ありません。

カスタマイズして頂きたいのは8行目の部分です。

「array()」の中にカンマ区切りで広告を表示させたい見出しの番号を記述するようにしてください。

上記コードでは2番目と3番目の見出し上に表示されるようになっています。

注意点としては一つ目の見出し前に広告を入れると目次が変な位置に移動してしまうことです。

目次と見出しの間は目次広告で設定できるので、特に対策を入れてません。

偶数番目の見出しに広告を表示する

上記のものよりも個人的に好きなのは偶数番目の見出しに広告を表示する方法です。

というのも目次の数が何個になるか分からないのに、どこまで任意の表示位置を設定すればいいか分からないからです。

偶数番目に表示できればいいという人はこちらのコードを使用してください。

function adsense_before_h2($the_content) {
	$ad = <<< EOF
		[ad]
	EOF;
 
	if ( is_single() ) {//投稿ページ
		$tag = '/^<h2.*?>.+?<\/h2>$/im';//h2見出しのパターン
		if ( preg_match_all( $tag, $the_content, $h2gets )) {
			if ( $h2gets[0] ) {
				$count = 0;
				foreach ($h2gets[0] as $h2get) {
					$count++;
					//少なくても1番目は目次と被るので飛ばす(今は偶数番目仕様)
					if ($count%2 == 0) {				
						if ($h2get) {
							$the_content  = str_replace($h2get, $ad.$h2get, $the_content);
						}
					}
				}
			}
		}
	}
	return $the_content;
}
add_filter('the_content','adsense_before_h2');

14行目の条件で偶数番目のみ取得するようにしてあります。

ちなみに全部の見出し前に広告を表示したいという場合は14行目の記述を「if ($count> 1) {」とするとうまいこと行きます。

コメントにもあるように1番目は飛ばしています。

ということで見出しの偶数番目に広告を表示させる方法を合わせて紹介しました。

Ext.任意の見出し毎に複数種類の広告を分けて表示する

上記2つの方法では1種類の広告を任意の見出し上に表示する方法を紹介しましたが、ここでは2種類以上の広告で任意の見出し上に表示する方法を紹介します。

例:見出しの4,5,6番目にはA広告、見出しの3番目にはB広告を表示する。

function adsense_before_h2($the_content) {
	$ad = <<< EOF
		[ad_tag id="1"]
	EOF;
	$ad2 = <<< EOF
		[ad_tag id="2"]
	EOF;
 
	if ( is_single() ) {//投稿ページ
		$tag = '/^<h2.*?>.+?<\/h2>$/im';//h2見出しのパターン
		$disp = array(4,5,6); //表示させたい見出しの番号を指定
		$disp2 = array(3); //表示させたい見出しの番号を指定
		if ( preg_match_all( $tag, $the_content, $h2gets )) {
			if ( $h2gets[0] ) {
				$count = 0;
				foreach ($h2gets[0] as $h2get) {
					$count++;
					if (in_array($count,$disp)) {				
						if ($h2get) {
							$the_content  = str_replace($h2get, $ad.$h2get, $the_content);
						}
					}
					if (in_array($count,$disp2)) {				
						if ($h2get) {
							$the_content  = str_replace($h2get, $ad2.$h2get, $the_content);
						}
					}
				}
			}
		}
	}
	return $the_content;
}
add_filter('the_content','adsense_before_h2');

まず、2種類の広告を表示したいので、2~4行目と5~6行目に2種類の広告を記載します。

初めの2パターンではSWELL設定内の記事内広告から取得しましたが、2種類分の指定はできないので広告タグ機能で作成した広告コードを使用します。

最後に12行目に$disp2を追加しているので2種類目の広告を表示する位置を指定します。(6行目の$ad2の広告を表示する位置です。)

その他は今までのものと同様です。

もし3種類に増やしたい場合は、色付けした箇所を複製して今回のように追加すれば可能です。

確認できてないですが、2種類の広告を同じ見出しに設定した場合は、2種類の広告が同じ見出し上に表示されるようになっているはずです。ただしその場合、広告2が上で広告1が下にくるような順になると思います。

まとめ

今回は任意の位置に見出し上広告を表示する手順を紹介しました。

全部の見出しに広告を設定するとうるさくなってしまうのでこれぐらいがベストかもしれないですね。

変なところがあれば教えて頂けると助かります。

他にもカスタマイズの記事を書いているので読んでもらえてらうれしいです。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

そらいろのアバター そらいろ 管理人

SEとして7年の経験があるそこそこのエンジニア。
スキルセット:C#/VB.net/HTML/CSS/JavaScript/PHP
DB:Oracle/SQLServer他etc
専門はWebアプリケーション。データ分析やRPAにも精通。

目次