Loading…

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

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

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

AMP画像

所要時間目安:9

This session is using  IPv4  is established in

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

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

  • 本日
  • 週間
  • 月間
  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

目次に行く・戻る

メルカリ招待コード:

今年の初め頃に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化対応方法完全版

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

YouTube

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

YouTube動画が重い時や遅い時に遅くならない簡単解決方法(続)

以前の記事にYouTubeの動画が重い時や遅い時に、ページの表示速度やサイト自体が重くなってしまわないようにする方法を記載しました。ですが、WordPressにおいてのショートコード化で動画IDのクイ…

もっと読む

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

草取りを楽にする防草シート

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

草取りのコツと防草シート効果で草が生えてこないようにする

これから、夏にかけて雑草や草が生えてきます。 (しかも1周間でかなりの成長をします。)そんな時は草取りがとっても大変になってしまいます。 草取りのコツとしては、 草取り鎌を使用すると結構簡単に根っこか…

もっと読む

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

アクセス数

備忘録

アクセス数が増加しない。アクセス数を増加させるには…。

 当ブログを主としてはじめて概ね1ヶ月半程度が経ちました。しかし、 以前のブログに比べてアクセス数は1/10以下程度です。 ちょっと寂しいですが、 それが現状では現実・事実です…。…

もっと読む

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

AFFINGER5

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

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

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

もっと読む

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

Yahoo!20周年特別サイト

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

Yahoo!20周年特別サイト開設

インターネットの入り口でもあるポータルサイトで、有名なYahoo!が今年4月1日に20周年を迎えました。20年前と言えばWindows95が発売されて、パソコンが注目を浴びて同時にインターネットという…

もっと読む

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

エコキュートシャワーの水圧弱い

伝えたいこと 備忘録

シャワーの水圧が弱い原因はエコキュートだった…。

ここ数年間賃貸物件からオール電化の戸建てに引っ越しをしてからのことです。深夜の電気代の安い時間帯にお湯を沸かして貯めておくというエコキュートです。これが色々と調べてみたところ水圧の設定値があったようで…

もっと読む

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

おすすめの記事一部広告

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

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Total235


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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