Loading…

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

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

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

AMP画像

所要時間目安:9

This session is using  IPv4  is established in

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

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

目次に行く・戻る

メルカリ招待コード:

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

あなたにおすすめ

記事上に人気記事表示

Stinger6 WordPress カスタマイズ

アイキャッチ画像設定し忘れプラグインなし自動設定方法Stinger6

WordPressを使用すると、 アイキャッチ画像の設定が簡単に可能になります。 中でも人気のテーマStingerシリーズだとなおさらいろいろな機能が元々色々あってとても便利です。 そのStinger…

もっと読む

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

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

埼玉県子ども虐待条例について

10月7日のニュースにて知ったのですが、埼玉県にて子ども虐待条例という条例が2023年10月10日可決される見通しとの事でした。 この内容を拝見してどう思うのか。または実際にこのようなことが可能なのか…

もっと読む

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

降圧剤

伝えたいこと 備忘録 治療

降圧剤(血圧を下げる薬)で劇症肝炎死亡例…。

 多くの方が血圧を下げる薬として飲んだり点滴などで使用する降圧剤。数年前にはディオバンという降圧剤の不正がありました。 今回の降圧剤は、「アジルサルタン」「アムロジピンベシル酸塩」…

もっと読む

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

自動販売機設置画像

伝えたいこと 備忘録

そうだ!!自販機を設置しよう。費用とオススメな自動販売機業者とは?

まぁ、誰もが思う。 自動販売機みたいにお金がちゃりんちゃりんって置いてあるだけで、収入得られないのかなぁ。 なんてことってあると思います。   家賃収入もそうなのではないでしょうか。 でも、…

もっと読む

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

HDDが壊れそうか否か健康状態確認

PC 伝えたいこと 備忘録

CrystalDiscinfoでHDDが壊れそうかどうか確認方法と対処方法

以前と言っても先月末くらいからパソコンから異音が出始めました。 異音の種類によってもどこら壊れそうなのか概ねの判断・推測ができます。 以前の記事が以下です。 これらのことを行っても異音が解消されない場…

もっと読む

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

光コラボ

PC インターネット 伝えたいこと 備忘録 光コラボ 時事ネタ

光コラボはおすすめ?コラボ光一覧と光コラボとは?光コラボレーションはNTTが卸売に

昨年にNTTが光回線を卸売として、各ISP(プロバイダー)などにフレッツ光や光ネクストなどでエンドユーザー(消費者)に提供していた光回線を、各事業者にその光回線を卸売に踏み切った事により、コラボレーシ…

もっと読む

おすすめの記事一部広告

おすすめ!!

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

おすすめ2

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

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

Multiplex 広告

Total191


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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