AMP化する方法プラグインなしで対応してみる

所要時間目安：約 9 分

This session is using　 IPv4 　is established in

心臓の位置が左右で逆？内臓転位なのか？右心蔵なのか？

Bloggerダッシュボードデザインが変わって戸惑った…。

この記事は2016年11月21日のものです。現在は状況が異なる可能性がありますのでご注意ください。

SNS WordPress インターネットカスタマイズ伝えたいこと備忘録

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。

その後もHTTPS everywhere（SSL化）などもありますが…。

はじめはニュースサイトなどでなければ特にAMP化（AMP対応）しなくてもいいのではないか？
なんて思ってもいました。

ですが、なんとなくしてみた方がいいのかもと思い始めてきました。ENJIさんが作成されているテーマのAFFINGER4が正式にAMP対応されたのもきっかけかもしれません。

WordPressであれなプラグインなどでAMP対応はできると思われますが、私個人的にできる限りプラグインは使いたくないのです。干渉してしまったりサイトが重くなったりしてしまうからです。

アドセンス336pxPC閲覧記事下表示1つ目コード

具体的なプラグインを使用しないでAMP化する方法です。

ヘッダーに以下のコードを記載します。

<?php
 //AMPチェック
 $myAmp = false;
 $string = $post->post_content;

 // ampのパラメーターが1かつ記事の中に<script>タグが入っていない
 // かつsingleページのみ$myAmpをtrueにする
 if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
 $myAmp = true;
 }
 ?>
 <?php if($myAmp): // AMP対応ページの場合 ?>
 <html ?>
 <head>
 <?php else: // 通常ページの場合 ?>
 <html lang="ja">
 <head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
 <?php endif; // AMP分岐終了 ?>
 <meta charset="utf-8">
 <?php if($myAmp): // AMP対応ページの場合 ?>
 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 <?php $canonical_url = get_permalink(); ?>
 <link rel="canonical" href="<?php echo $canonical_url; ?>" />
 <link rel="amphtml" href="<?php echo $canonical_url.'?amp=1'; ?>">
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <script type="application/ld+json">
 {
 "@context": "https://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
 "@type":"WebPage",
 "@id":"<?php the_permalink(); ?>" // パーマリンクを取得
 },
 "headline": "<?php the_title();?>", // ページタイトルを取得
 "image": {
 "@type": "ImageObject",
 "url": "<?php // アイキャッチ画像URLを取得
 $image_id = get_post_thumbnail_id();
 $image_url = wp_get_attachment_image_src($image_id, true);
 echo $image_url[0];
 ?>",
 "height": 800,
 "width": 800
 },
 "datePublished": "<?php the_time('Y/m/d') ?>", // 記事投稿時間
 "dateModified": "<?php the_modified_date('Y/m/d') ?>", // 記事更新時間
 "author": {
 "@type": "Person",
 "name": "<?php the_author_meta('nickname'); ?>" // 投稿者ニックネーム
 },
 "publisher": {
 "@type": "Organization",
 "name": "<?php bloginfo('name'); ?>", // サイト名
 "logo": {
 "@type": "ImageObject",
 "url": "<?php bloginfo('template_url'); ?>/img/logo.png", // ロゴ画像
 "width": 130,
 "height": 53
 }
 },
 "description": "<?php echo mb_substr(strip_tags($post-> post_content), 0, 60); ?>…" // 抜粋
 }
 </script>
 <?php else: // 通常ページの場合 ?>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <?php endif; // AMP分岐終了 ?>
 </head>

この時に注意なのが、元々あるheader.php内の<head>タグと重ならないようにどちらかを削除します。

あとは、以下のコードを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;
 }

 //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) 75vw, 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) 75vw, 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) 75vw, 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) 75vw, 75px" src="https://item.shopping.c.yimg.jp', $the_content);

 //画像タグをAMP用に置換
 $the_content = preg_replace('/<img/i', '<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を置換する（埋め込みコード）
 $pattern = '/<iframe.+?src="https:\/\/www.youtube.com\/embed\/(.+?)(\?feature=oembed)?".*?><\/iframe>/is';
 $append = '<amp-youtube layout="responsive" data-videoid="$1" width="800" height="450"></amp-youtube>';
 $the_content = preg_replace($pattern, $append, $the_content);

 // iframeをamp-iframeに置換する
 $pattern = '/<iframe/i';
 $append = '<amp-iframe layout="responsive"';
 $the_content = preg_replace($pattern, $append, $the_content);
 $pattern = '/<\/iframe>/i';
 $append = '</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);//なるべく後で行う

single.php内にもampか否かの判別するコードとwphead();から出力されるjsファイルなどを無効化しなればなりません。

ですが、
今のところfunction.phpに上記コードを記載してあるのでAMP用のスタイル.css（50KB以下）など作成しなくても、
とりあえずURLの末尾に/?amp=1を付けてEnterを押すかページの更新をするとエラーはあるもののなんちゃってAMP化できています。；

アドセンスは置換が難しいのでAMPと通常のページの条件分岐で対応してみています。

AMPの分岐条件コード

<?php if($myAmp): // AMP対応ページの場合 ?>
 <amp-ad width="300" height="250" type="adsense"
 data-ad-client="ca-pub-○○○○○○○○○○○○○○○○"
 data-ad-slot="○○○○○○○○○○">
 </amp-ad>
 <?php else: // 通常ページの場合 ?>
 （ここに通常のコードを記述）
 <?php endif; // AMP分岐終了 ?>

あとは、TwitterやFacebookやYouTubeインスタグラムやなどのSNSの為に以下のコードを（も）ヘッダー内に書きます。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
 <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
 <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
 <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
 <script custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async></script>
 <script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>
 <?php endif; // AMP分岐終了 ?>

上記は、

Google Analytics。
Facebook。
YouTube。
vine。
Twitter。
インスタグラム。

の共有ボタンなどを使用している場合です。

もっと少ない方は以下のコードのみでも良いかもしれません。

<script custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async></script>
 <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
 <script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>
 <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

TwitterとvineとインスタグラムとYouTubeのみのコードになります。

AMP対応の分岐条件分けのコードは以下になります。

<?php if($myAmp): // AMP対応ページの場合 ?>
 AMP対応時のコード
 <?php endif; // AMP分岐終了 ?>

<?php if(!$myAmp): // 通常ページの場合 ?>
 通常のコード
 <?php endif; // AMP分岐終了 ?>

<?php if($myAmp): // AMP対応ページの場合 ?>
 AMP対応時のコード
 <?php else: // 通常ページの場合 ?>
 通常のコード
 <?php endif; // AMP分岐終了 ?>

「SNS, WordPress, インターネット, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

: Twitterで知らない人からフォローされるけど…。どうしたら良いの？

: はてブボタンオリジナル作成方法

: ギャル語最近の動向とトップ10を紹介します。いくつわかりますか？

: AMP化する方法プラグインなしで対応してみる

: スマイルゼミのタブレット学習評判と機能が家族内でLINEみたい

: YouTubeアカウント停止と復旧・復活させる方法はどうしたら良いのか

あなたにおすすめ

: PC 伝えたいこと備忘録
MG3530が壊れたのでMG3630と比較した評価レビュー
（画像出典元は以下のAmazon商品リンクより）有名なCanon製プリンターです。機種は様々ですが、今回はMG3530がインクの交換の際にヘッドがズレてしまい印字がうまくできなくなってしまいました。…
もっと読む

インフィード広告アドセンス

: 伝えたいこと備忘録
清原さん、残念ですが…。面識もない一般人が記事を書くのを迷っていました。
清原和博と言えば、中高年世代の甲子園のヒーローでした。その少し下の世代になると、松坂大輔さんなど松坂世代と言われた世代の方たちがヒーローとなって世代交代と言いますか、世代に…
もっと読む

インフィード広告アドセンス

: PC Windows10 伝えたいこと備忘録
Windows7でつけっ放しで外出したらWindows10になっていた…。恐いなぁ…。
画像引用元）:https://twitter.com/poti1990/status/708217655077920768/photo/1?ref_src=twsrc%5Etfwもう、Windows1…
もっと読む

インフィード広告アドセンス

: 伝えたいこと備忘録
ニュースとは。NEWSとは？どういう意味なのか考察…。
ニュース…単語のみの意味を考察すると…。ニュースとは→新しい情報・事柄（etc）などタチ（達）の総称。であろうと考えています。

インフィード広告アドセンス

: スマホ伝えたいこと
大容量バッテリー5000mhA搭載スマホ!!AsusZenfone(TM)MaxがBIGLOBEスマホに!!
さて今回は…。なんとスマホでバッテリバッテリー容量が最大級で、連続待受時間も最大38日間という驚異的なバッテリー容量を持った高性能格安スマホが出ました。そして、急速充電も可能ときたもん…
もっと読む

インフィード広告アドセンス

: 伝えたいこと備忘録時事ネタ治療
塩水洗浄ダイエットは効果なんかより危険なので医師が警告
女性なら誰しも一度は考えたことがあるダイエットかと思われます。しかし、最近流行っている？流行っていた新しいダイエット方法で【塩水洗浄】というものがあるようです。これは、ただ単に空腹時に大量の塩水を1L…
もっと読む

目次に戻る

コメントを閉じる

comment コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

心臓の位置が左右で逆？内臓転位なのか？右心蔵なのか？

Bloggerダッシュボードデザインが変わって戸惑った…。

人気記事一覧

具体的なプラグインを使用しないでAMP化する方法です。

ヘッダーに以下のコードを記載します。

あとは、以下のコードをfunction.phpに記述して変換します。

single.php内にもampか否かの判別するコードとwphead();から出力されるjsファイルなどを無効化しなればなりません。

アドセンスは置換が難しいのでAMPと通常のページの条件分岐で対応してみています。

あとは、TwitterやFacebookやYouTubeインスタグラムやなどのSNSの為に以下のコードを（も）ヘッダー内に書きます。

もっと少ない方は以下のコードのみでも良いかもしれません。

AMP対応の分岐条件分けのコードは以下になります。

それぞれAMPファースト通常表示ファースト、最後のは以前からあるスマホ表示とPC表示の条件分岐条件コードと同じように、AMP対応の時の場合と通常表示の時の場合の２つの分岐条件を混ぜてひとつにしたものです。

AMP対応できているかどうかの確認方法は、URLの末尾に?amp=1#development=1を付けてデバックモードでエラーの有無を確認してみます。

そういった場合には最悪？（しょうがなく）プラグインに頼る方が楽ですし懸命かもしれません。

AMP対応プラグインには以下の２つがあります。

追記です。）

この記事を作成してからも完全にAMP化する対応方法を試行錯誤した結果・・・・。 以下に追加で新たに記事として作成していますので、 この長文の後できついかもしれませんが・・・・。

「SNS, WordPress, インターネット, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

あなたにおすすめ

おすすめの記事一部広告

おすすめ！！

おすすめ2

Googleニュース

comment コメントをキャンセル

この記事を作成してからも完全にAMP化する対応方法を試行錯誤した結果・・・・。
以下に追加で新たに記事として作成していますので、この長文の後できついかもしれませんが・・・・。