ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

WordPressのAMPページで、続きを読むの位置にAdsense広告を入れる方法。

WordPressでは、AMPというずばりそのままの名前のプラグインを入れると、簡単にAMP対応ページを作成することができます。

また、Quick Adsenseというプラグインを使えば、個別記事を開いたときに続きを読むの位置だった箇所に、Adsense広告を入れることができます。

しかし、Quick Adsenseを使用しても、AMPページでは続きの読むに広告を入れる処理が効いてくれません。よって、別の方法が必要になります。

広告

続きを読むの位置に入るもの。

記事作成のうえでは、<!––more––>と入力することで、続きを読むにすることができます。

続きを読むを入れることで、記事一覧ページでは全文を出さず、その位置までの内容だけ出るようになります。

そしてQuick Adsenseを使えば、記事を開いたあと何もないことになるその位置に、広告を入れられるというわけです。

でもページのソースコードを見てみると、何もないわけではありません。

個別記事を開いているときに、Chromeなどの検証ツールを使って、続きを読むだった位置の要素を調べてみると、下記のようなコードがあります。

<span id="more-xxxx"></span>
<!-- xxxxには記事IDが入ります -->

入力時は<!––more––>だったのが、spanタグに置き換わっています。

spanタグはあっても中に何も書かれてないので、何もないように見えるだけで、実際はアンカーリンクが入っていることになります。

Quick Adsenseは、このspanタグをAdsenseのコードを置き換える処理を行っていると思われます。

AMPページの場合の続きを読む。

先程までは通常のページのことであって、AMPプラグインによって生成されたAMPページの場合は異なります。

実際にAMPページを開いているときに検証ツールを使って、続きを読むの位置に入ってるコードを調べてみます。

すると、先程とは違って、入力時と同じ<!––more––>がそのまま入っているのです。

もちろんコメントアウトされているので、実際は何も見えません。

Quick Adsenseはspanに対してしか置き換えを実行できないので、広告表示ができないのだと思われます。

あるいは、AMPページではプラグインの動作が無効化されているのか…。

仮にAMPページでもQuick Adsenseが効いたとしても、AMPページと通常ページで広告を振り分ける機能がありません。

AMPページで広告を貼るには専用のコードが必要になるので、どのみちQuick Adsenseでは対応できないということです。

対処法。

今回の対処法は、AMPページに表示させる記事本文をいったん文字列として変数に格納したあと、該当部分だけ置き換えを実行してから表示させるというものです。

そのために、AMPページに使用している専用のテーマを書き換える必要があります。

まず、AMPページ用のsingle.phpを見てみると、$this->get(“post_amp_content”)という変数があります。

これは、通常ページでいうget_the_content()のようなものですね。

その、$this->get(“post_amp_content”)に対して置き換えを実行するのです。

下記のような関数をfunctions.phpに追加して、それを実行すればいいでしょう。

function amp_set_adsense($content) {
	$adsense = '
	<div class="google_adsense">
		<p>広告</p>
		<amp-ad width="100vw" height=320
		type="adsense"
		data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
		data-ad-slot="xxxxxxxxxx"
		data-auto-format="rspv"
		data-full-width>
		<div overflow></div>
		</amp-ad>
	</div>
	';

	$contentData = str_replace("<!--more-->", $adsense, $content);
	return $content;
};

// xxxxの箇所は、各自の広告のIDに書き換えてください。

いちおうこれで動作はするのですが、phpの中にhtmlを直接書き込んでいるのが、ちょっとカッコ悪いですね…。

何か良い書き方があれば、メールやマストドンにご意見をお願いいたします。

余談。

直前の記事にて当Wordpressのテーマを変更したことはお知らせしましたが、AMPテーマも変更しています。

以前は、とりあえずAMP対応させるために既存のテーマを使っていたので、通常ページと全く違うレイアウトになっていました。

(しかも表示崩れも直していないままだった…。)

でも今回、AMPテーマの方も、通常ページのテーマとほぼ変わらないレイアウトに変更したため、AMPから通常に戻ったときの違和感はなくなりました。

ただ、formタグだけはAMPページで使用することができないので、AMPページのときだけ右上にある検索ボタンがなくなっています。ご了承ください。

Googleから来てAMPページになったけどサイト内検索したいと思ったときは、ひとまずどこかリンクを押して通常ページに切り替えをお願いします。