外部リンク画像の場合もAMP化対応できるようにconvert変換?置換?できるようにできました。
function.php内に記述する内容は以下です。
//AMP判別関数
//今回は、?amp=1パラメーターを使用(環境によっては変更する必要があるかも)
function is_amp(){
//AMPチェック
$is_amp = false;
if ( empty($_GET['amp']) ) {
return false;
}
//ampのパラメーターが1かつ投稿ページの
//かつsingleページのみ$is_ampをtrueにする
if(is_single() &&
$_GET['amp'] === '1'
){
$is_amp = true;
}
return $is_amp;
}
//AMP用にコンテンツを変換する
function convert_content_to_amp_sample($the_content){
if ( !is_amp() ) {
return $the_content;
}
//iframe用のplaceholderタグ(amp-iframeの呼び出し位置エラー対策)
$amp_placeholder = '<amp-img layout="fill" src="'.get_template_directory_uri().'/images/transparence.png'.'" placeholder>';
//noscriptタグの削除
$the_content = preg_replace('/<noscript>/i', '', $the_content);
$the_content = preg_replace('/<\/noscript>/i', '', $the_content);
//Amazon商品リンクのhttp URLをhttpへ
$the_content = str_replace('https://rcm-jp.amazon.co.jp/', 'https://rcm-fe.amazon-adsystem.com/', $the_content);
//Amazonデフォルトの埋め込みタグを置換する
$pattern = '/<iframe([^>]+?)(src="https:\/\/rcm-fe.amazon-adsystem.com\/[^"]+?").*?><\/iframe>/is';
$append = '<amp-iframe$1$2 width="120" height="240"frameborder="0">'.$amp_placeholder.'</amp-iframe>';
/*
$pattern = '/(<p>)?<iframe([^>]+?)src="https:\/\/rcm-fe.amazon-adsystem.com\/[^"]+?t=([^&]+)[^"]+?asins=([^&]+)[^"]*?".*?><\/iframe>(<\/p>)?/is';
$amazon_url = 'https://www.amazon.co.jp/exec/obidos/ASIN/$4/$3/ref=nosim/';
$append = PHP_EOL.'<p><a href="'.$amazon_url.'">'.$amazon_url.'</a></p>'.PHP_EOL;
*/
//$append = url_to_external_ogp_blog_card_tag($amazon_url);
//$the_content = preg_replace($pattern, htmlspecialchars($append), $the_content);
$the_content = preg_replace($pattern, $append, $the_content);
//Amazon画像をブログカード化
//$the_content = url_to_external_blog_card($the_content);
//C2A0文字コード(UTF-8の半角スペース)を通常の半角スペースに置換
$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);
//target属性を取り除く
$the_content = preg_replace('/ *?target=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ *?target=[\'][^\']*?[\']/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);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
$the_content = preg_replace('/ src="(https:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $the_content);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する(SSL用)
$the_content = preg_replace('/ src="(https:)?\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $the_content);
//カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
$the_content = preg_replace('/ src="(https:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="//thumbnail.image.rakuten.co.jp', $the_content);
//カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
$the_content = preg_replace('/ src="(https:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://item.shopping.c.yimg.jp', $the_content);
//アプリーチの画像対応
$the_content = preg_replace('/<img([^>]+?src="[^"]+?(mzstatic\.com|phobos\.apple\.com|googleusercontent\.com|ggpht\.com)[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img>', $the_content);
$the_content = preg_replace('/<img([^>]+?src="[^"]+?nabettu\.github\.io[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="120" height="36" sizes="(max-width: 120px) 100vw, 120px"></amp-img>', $the_content);
//imgタグをamp-imgタグに変更する
$res = preg_match_all('/<img(.+?)\/?>/is', $the_content, $m);
if ($res) {//画像タグがある場合
foreach ($m[0] as $match) {
//変数の初期化
$src_attr = null;
$url = null;
$width_attr = null;
$width_value = null;
$height_attr = null;
$height_value = null;
$alt_attr = null;
$alt_value = null;
$title_attr = null;
$title_value = null;
$sizes_attr = null;
//src属性の取得(画像URLの取得)
$src_res = preg_match('/src="([^"]+?)"/is', $match, $srcs);
if ($src_res) {
$src_attr = ' '.$srcs[0];//src属性を作成
$url = $srcs[1];//srcの値(URL)を取得する
}
//width属性の取得
$width_res = preg_match('/width="([^"]*?)"/is', $match, $widths);
if ($width_res) {
$width_attr = ' '.$widths[0];//width属性を作成
$width_value = $widths[1];//widthの値(幅)を取得する
}
//height属性の取得
$height_res = preg_match('/height="([^"]*?)"/is', $match, $heights);
if ($height_res) {
$height_attr = ' '.$heights[0];//height属性を作成
$height_value = $heights[1];//heightの値(高さ)を取得する
}
//alt属性の取得
$alt_res = preg_match('/alt="([^"]*?)"/is', $match, $alts);
if ($alt_res) {
$alt_attr = ' '.$alts[0];//alt属性を作成
$alt_value = $alts[1];//altの値を取得する
}
//title属性の取得
$title_res = preg_match('/title="([^"]*?)"/is', $match, $titles);
if ($title_res) {
$title_attr = ' '.$titles[0];//title属性を作成
$title_value = $titles[1];//titleの値を取得する
}
$class_attr = null;
//widthとheight属性のないものは画像から情報取得
if ($url && (empty($width_value) || empty($height_value))) {
$size = get_image_width_and_height($url);
if ($size) {
$class_attr = ' class="internal-content-img"';
$width_value = $size['width'];
$width_attr = ' width="'.$width_value.'"';//width属性を作成
$height_value = $size['height'];
$height_attr = ' height="'.$height_value.'"';//height属性を作成
} else {
//外部サイトにある画像の場合
$class_attr = ' class="external-content-img"';
$width_value = 300;
$width_attr = ' width="300"';//width属性を作成
$height_value = 300;
$height_attr = ' height="300"';//height属性を作成
}
}
//sizes属性の作成(きれいなレスポンシブ化のために)
if ($width_value) {
$sizes_attr = ' sizes="(max-width: '.$width_value.'px) 100vw, '.$width_value.'px"';
}
//amp-imgタグの作成
$tag = '<amp-img'.$src_attr.$width_attr.$height_attr.$alt_attr.$title_attr.$sizes_attr.$class_attr.'></amp-img>';
// echo('<pre>');
// var_dump($srcs);
// var_dump(htmlspecialchars($tag));
// var_dump($widths);
// var_dump($heights);
// var_dump($alts);
// var_dump($titles);
// echo('</pre>');
//imgタグをamp-imgタグに置換
$the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
}
}
//画像タグをAMP用に置換
$the_content = preg_replace('/<img(.+?)\/?>/is', '<amp-img$1></amp-img>', $the_content);
// Twitterをamp-twitterに置換する(埋め込みコード)
$pattern = '/<blockquote class="twitter-tweet".*?>.+?<a href="https:\/\/twitter.com\/.*?\/status\/(.*?)">.+?<\/blockquote>.*?<script async src="\/\/platform.twitter.com\/widgets.js" charset="utf-8"><\/script>/is';
$append = '<p><amp-twitter width=592 height=472 layout="responsive" data-tweetid="$1"></amp-twitter></p>';
$the_content = preg_replace($pattern, $append, $the_content);
// vineをamp-vineに置換する
$pattern = '/<iframe[^>]+?src="https:\/\/vine.co\/v\/(.+?)\/embed\/simple".+?><\/iframe>/is';
$append = '<p><amp-vine data-vineid="$1" width="592" height="592" layout="responsive"></amp-vine></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 = '<p><amp-instagram layout="responsive" data-shortcode="$1" width="592" height="592" ></amp-instagram></p>';
$the_content = preg_replace($pattern, $append, $the_content);
//YouTubeのURL埋め込み時にiframeのsrc属性のURLに余計なクエリが入るのを除去(力技;)
$the_content = preg_replace('/\??(version=\d*|(&|&|&)rel=\d*|(&|&|&)fs=\d*|(&|&|&)autohide=\d*|(&|&|&)showsearch=\d*|(&|&|&)showinfo=\d*|(&|&|&)iv_load_policy=\d*|(&|&|&)wmode=transparent)+/is', '', $the_content);
// YouTubeを置換する(埋め込みコード)
$pattern = '/<iframe[^>]+?src="https?:\/\/www.youtube.com\/embed\/([^\?"]+).*?".*?><\/iframe>/is';
$append = '<amp-youtube layout="responsive" data-videoid="$1" width="800" height="450"></amp-youtube>';
$the_content = preg_replace($pattern, $append, $the_content);
// Facebookを置換する(埋め込みコード)
$pattern = '/<div class="fb-video" data-allowfullscreen="true" data-href="([^"]+?)"><\/div>/is';
$append = '<amp-facebook layout="responsive" data-href="$1" width="500" height="450"></amp-facebook>';
$the_content = preg_replace($pattern, $append, $the_content);
//Facebook動画埋め込み対策
$the_content = preg_replace('/ +allowTransparency(=["][^"]*?["])?/i', '', $the_content);
$the_content = preg_replace('/ +allowFullScreen(=["][^"]*?["])?/i', '', $the_content);
//TED動画埋め込み対策
$the_content = preg_replace('/ webkitAllowFullScreen/i', '', $the_content);
$the_content = preg_replace('/ mozallowfullscreen/i', '', $the_content);
//タイトルつきiframeでhttpを呼び出している場合は通常リンクに修正
$pattern = '/<iframe[^>]+?src="(https:\/\/[^"]+?)"[^>]+?title="([^"]+?)"[^>]+?><\/iframe>/is';
$append = '<a href="$1">$2</a>';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/<iframe[^>]+?title="([^"]+?)[^>]+?src="(https:\/\/[^"]+?)""[^>]+?><\/iframe>/is';
$append = '<a href="$1">$2</a>';
$the_content = preg_replace($pattern, $append, $the_content);
//iframeでhttpを呼び出している場合は通常リンクに修正
$pattern = '/<iframe[^>]+?src="(https:\/\/[^"]+?)"[^>]+?><\/iframe>/is';
$append = '<a href="$1">$1</a>';
$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_placeholder.'</amp-iframe>';
$the_content = preg_replace($pattern, $append, $the_content);
//スクリプトを除去する
$pattern = '/<script.+?<\/script>/is';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
return $the_content;
}
add_filter('the_content','convert_content_to_amp_sample', 999999999);//なるべく後で行う
あとは、AMP用のスタイルシートstyle.cssを作成すればページ単位ではAMP出来ているはずです。
ただ・・・・・・。
冒頭にも書きましたが、
AMP化に正式に対応した後にアクセス数がセッションでやはり3.5割から4割程度減っています。
AMP用にGoogle Analyticsのプロパティを新規作成することが推奨されていますが、
ページ単位のみの場合にプロパティって作成できなくない?
タグマネージャーにて振り分けるということも出来ますが・・・・・・。
ただ、
カスタムレポートを見るとアクセス数は変化がないのです。
Google Analyticsのユニバーサル(U・A)だと、アクセス数が(セッション数ですが、)なぜか減ってしまっています。
AMPからのアクセス数がしっかりとちゃんと計測できていないのが原因かと思われますが・・・・・・。
これは、
そのままでも良いのかもしれませんが何か気持ち悪いです。
フィルタ設定などで何とかできそうですが良く分かっていません。o(´^`)o ウー
タグマネージャーにての設定方法であればできそうですが、
それがGoogle Analyticsのアクセス数のサマリーすべてのコンテンツに反映されるのかどうか・・・・・・。
これから、タグマネージャーにて設定してみようかなぁと思ってもいます。
その後の詳細はまたしばらく様子を見てから記事にしたいと思います。
Google検索からのアクセス数は1000近く減ってしまいました。
が、上記したようにカスタムレポートにおいては変化がありません。
う~ん、悩ましい・・・・・・。
ただ、ひとつ言えることはAMP化対応したページを見ると
とってもシンプルで目的とする記事のみに集中はできますし、下手にjavaScriptなどで装飾したりしてページ表示速度が遅くなってしまうこともないのでなんだか新鮮な感じがします。
これだけは間違いないです!!どうですか?シンプルですよね?
comment