【THE THOR】AMPテストで大量エラー発生、アフィリエイトエラーは手動しか方法がないのか！？

Google様には逆らえないので、推奨するとおり、AMP対応のページを準備しました。

実際には、Wordpressの有料テーマ【THE THOR】というのを使用しているので、ちょっとした設定をするだけで、AMPのページを生成できるようになっているようです。

しかし、GoogleSearchConsole（通称サチコ）からAMPエラーの表示があり、調べてみると大量のエラーが発生という流れです。

アフィリエイトリンクは手作業

過去にも、アマゾンや楽天のアフィリエイトリンクをページに貼った事で、エラーが出たことがあり対応しました。

AMPページにしたら、アマゾンアフィリエイトで「タグの属性で指定されたレイアウトが無効」になる対処方法

ので、本当にメンドクサイです。

現時点も直してないアフィリエイトリンクが大量に存在します。

convert.phpを修正すれば簡単？

他のWordpressテーマではやってないのでわかりませんが、THE THORでは、

//「marginheight」はタグ「amp-iframe」で使用できません対策
$pattern = '/marginwidth="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/marginheight="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/security="restricted"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);

//border属性を除去する
$the_content = preg_replace('/ +border=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ +border=[\'][^\']*?[\']/i', '', $the_content);

//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);

//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);

そして、現時点のconvert.phpの全コードが下記のようになります。

<?php
////////////////////////////////////////////////////////
//AMP専用投稿コンテンツをAMPページ用にコンバート
////////////////////////////////////////////////////////
function convert_content_amp($the_content){
	// 通常ページではコンテンツを置換しない
	if (isset($_GET["type"]) &amp;&amp; $_GET['type'] == 'AMP' &amp;&amp; is_single() &amp;&amp; get_option('fit_ampFunction_switch') == 'on' &amp;&amp; get_post_meta(get_the_ID(), 'amp_hide', true) != '1') {
		// Twitterをamp-twitterに置換する
		$pattern = '/<blockquote class="twitter-tweet".*?>.+?<a href="https:\/\/twitter\.com\/.*?\/status\/(.*?)">.+?<\/blockquote>/is';
		$append = '<p><amp-twitter width=486 height=657 layout="responsive" data-tweetid="$1"></amp-twitter></p>';
		$the_content = preg_replace($pattern, $append, $the_content);

		// Instagramをamp-instagramに置換する
		$pattern = '/<blockquote class="instagram-media".+?"https:\/\/www\.instagram\.com\/p\/(.+?)\/".+?<\/blockquote>/is';
		$append = '<amp-instagram layout="responsive" data-shortcode="$1" width="400" height="400" ></amp-instagram>';
		$the_content = preg_replace($pattern, $append, $the_content);

		// YouTubeをamp-youtubeに置換する
		$pattern = '/<iframe[^>]+?src="https:\/\/www\.youtube\.com\/embed\/(.+?)(\?feature=oembed)?".*?><\/iframe>/is';
		$append = '<amp-youtube layout="responsive" data-videoid="$1" width="480" height="270"></amp-youtube>';
		$the_content = preg_replace($pattern, $append, $the_content);

		// iframeをamp-iframeに置換する
		$pattern = '/<iframe/i';
		$append = '<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"';
		$the_content = preg_replace($pattern, $append, $the_content);
		$pattern = '/<\/iframe>/i';
		$append = '</amp-iframe>';
		$the_content = preg_replace($pattern, $append, $the_content);

		//C2A0文字コード（半角スペース）を通常の半角スペースに置換
		$the_content = str_replace('\xc2\xa0', ' ', $the_content);

		//style属性を取り除く
		$the_content = preg_replace('/ +style=["][^"]*?["]/i', '', $the_content);
		$the_content = preg_replace('/ +style=[\'][^\']*?[\']/i', '', $the_content);

		//onclick属性を取り除く
		$the_content = preg_replace('/ +onclick=["][^"]*?["]/i', '', $the_content);
		$the_content = preg_replace('/ +onclick=[\'][^\']*?[\']/i', '', $the_content);

		//fontタグを取り除く
		$the_content = preg_replace('/<font[^>]+?>/i', '', $the_content);
		$the_content = preg_replace('/<\/font>/i', '', $the_content);
		
		//imgタグにwidthとheightを追加　ここから先を追記
		$img_pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';
		preg_match_all($img_pattern, $the_content, $rep_imgs);
		foreach ( $rep_imgs[0] as $i => $rep_img ) {
		if ( false !== strpos( $rep_img, 'width=' ) &amp;&amp; false !== strpos( $rep_img, 'height=' ) ) {
		continue;
		}
		$rep_img_url = $rep_imgs[1][$i]; // 画像url
		$rep_img_size = @getimagesize( $rep_img_url ); // 画像サイズを取得
		if ( false === $rep_img_size ) {
		continue;
		}
		$replaced_img = str_replace( '<img ', '<img ' . $rep_img_size[3] . ' ', $rep_imgs[0][$i] );
		$the_content = str_replace( $rep_img, $replaced_img, $the_content );
		}

		//「marginheight」はタグ「amp-iframe」で使用できません対策
		$pattern = '/marginwidth="0"/i';
		$append = '';
		$the_content = preg_replace($pattern, $append, $the_content);
		$pattern = '/marginheight="0"/i';
		$append = '';
		$the_content = preg_replace($pattern, $append, $the_content);
		$pattern = '/security="restricted"/i';
		$append = '';
		$the_content = preg_replace($pattern, $append, $the_content);

		//border属性を除去する
		$the_content = preg_replace('/ +border=["][^"]*?["]/i', '', $the_content);
		$the_content = preg_replace('/ +border=[\'][^\']*?[\']/i', '', $the_content);

		//画像タグをAMP用に置換
		$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
		$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);

		//画像タグをAMP用に置換
		$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
		$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);

		//スクリプトを除去する
		$pattern = '/<script.+?<\/script>/is';
		$append = '';
		$the_content = preg_replace($pattern, $append, $the_content);

		return $the_content;
	}else {
		return $the_content;
	}
}
add_filter('the_content','convert_content_amp', 999999999);

アフィリエイトリンク無ければ有効

現時点で、アフィリエイトのリンクが無いページであれば

となるようです。

画像なども、更新したり、画像高さや幅の設定などをやらなくても大丈夫になりました。

アフィリエイトがある場合は、こつこつと手作業で修正するしかないようなので、対象のページを更新することがあれば修正するし、それ以外は放置ですね。

ちなみに、楽天アフィリエイトでは、AMP対応のコードなどが生成できるようですが、自分が試すと、画像が出なかったり、デザインを崩すような入り方をしたので使えませんでした。