現在の接続環境は
です

記事内にプロモーションが含まれています。

Windows10サポート終了まで

プロモーションを含みます

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

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

AMP画像

所要時間目安:9

This session is using  IPv4  is established in

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

  • 本日
  • 週間
  • 月間
  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 9PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 5PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. エクストレイルステアリング内のスパイラルケーブル接続部コネクタ

    ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 4PV

    NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 93PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 33PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 21PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 93PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 33PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 21PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

今日は2024年11月11日です。

目次に行く・戻る

メルカリ招待コード:

今年の初め頃に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分岐終了 ?>

 

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

それぞれを使用する場所などによって使い分けましょう。

自分が忘れないためのメモでもあります。

 

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

?amp=1#development=1

エラーがでた場合にはひとつひとつエラーを修正していくことになります。

ものすごく大変だしめんどくさいです。

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

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

  1. Accelerated Mobile Pages — WordPress Plugins
  2. AMP

それぞれでCSSが異なるのかAMP対応後のページの表示のされ方が異なるようです。以上、プラグインを使わないでAMP対応する方法でした。

おそらく、まだまだ足りない不足していることもあると思います。
今後、自分が対応次第完全対応版に進化させていきたいと思っています。

※最後に言い忘れていましたが、ページのみをAMP対応する方法になります。

追記です。)

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

良かったら、是非、参考にして頂けましたら幸いです。

こちらの記事になります。

プラグイン使わないAMP化対応方法完全版

カウントダウンタイマー

あなたにおすすめな関連記事

自動車税納税通知書

メンテナンス 伝えたいこと 時事ネタ

自動車税納税通知書が来ない…。再発行してもらった方法と自動車税一覧

新年度も始まり1ヶ月が過ぎました。 5月と言えば自動車税の納税通知書が来る月でもあります。そして、納付期限も同じ5月末日までです。ゴールデンウィークも明けて通常通りの営業や運行・運用に戻った世の中です…

もっと読む

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

ツイッター10年日本公式サイトスクショ

PC 伝えたいこと 備忘録 時事ネタ

Twitter10年!!はじめてのツイッター投稿からちょうど10年の日

上記画像は、 日本Twitterの公式サイトのスクショです。 (サイトを訪れると10年を祝って風船があがっていきます。。) 今日2016年3月21日は、Twitterではじめてツイートされた…

もっと読む

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

Windows10アップグレード後画面

PC Windows10 伝えたいこと 備忘録

Windows7でつけっ放しで外出したらWindows10になっていた…。恐いなぁ…。

画像引用元):https://twitter.com/poti1990/status/708217655077920768/photo/1?ref_src=twsrc%5Etfwもう、Windows1…

もっと読む

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

Pixlr(ピクセラ)

PC ツール ブラウザChrome 伝えたいこと 備忘録

無料おすすめな画像編集オンラインソフトPixlr(ピクセラ)がすごいっ

画像編集ソフトと言えばフォトショップ(Photoshop)が超メジャーなアプリケーションかと思われます。他にもオススメとしてはGIMPや名前は今回紹介するタイトルと同じですが、ちょっと違うたしかピクセ…

もっと読む

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

YouTube

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

YouTube動画が遅い。重い時、掲載しても遅くならない方法

すごいっ!! YouTubeの動画をブログに貼り付けても重くならない・遅くならない方法があったなんて…。 WordPressでも応用可能かと思って試してみました。 たぶん、多くのテーマでも可能なのでは…

もっと読む

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

AFFINGER5

AFFINGER4Pro WordPress カスタマイズ テーマ 伝えたいこと 備忘録

AMP対応ショートコード(自作)をAFFINGER4で増やす方法

アイキャッチ画像:AFFINGER4公式HP(https://the-money.net/)のスクリーンショットです。 AFFINGER4では標準でAMP対応機能が備わっています。 そんな中で、自分で…

もっと読む

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total269


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

目次に戻る

よろしかったらシェアよろしくお願いします。

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

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


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

あと5秒で記事が閲覧できます。