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

以上のコードをまとめて一括にして変換します。

add_action( 'template_redirect', 'set_amp_setting' );
 function set_amp_setting(){
 if(check_amp()){
 //headに出力されるlink要素などを消す
 remove_action('wp_head', 'wp_resource_hints', 2 );
 remove_action('wp_head', 'rest_output_link_wp_head');
 remove_action('wp_head', 'wp_oembed_add_discovery_links');
 remove_action('wp_head', 'wp_oembed_add_host_js');
 remove_action('wp_head', 'index_rel_link');
 remove_action('wp_head', 'parent_post_rel_link',10);
 remove_action('wp_head', 'start_post_rel_link',10);
 remove_action('wp_head', 'adjacent_posts_rel_link_wp_head',10);
 //canonicalは別で設定するので消す
 remove_action('wp_head', 'rel_canonical');
 //本文内の要素をAMP用に置換したり、不要なものは削除する
 add_filter( 'the_content', 'the_content_filter', 10 );
 function the_content_filter( $content ) {
 //ショートコードを展開できるようにする
 $content = do_shortcode( $content );
 //いろいろ置換
 $content = preg_replace('/<script\b[^>]*>(.*?)<\/script>/is', '', $content);
 $content = preg_replace('/<style\b[^>]*>(.*?)<\/style>/is', '', $content);
 $content = preg_replace('#<fb:like\b[^>]*>(.*?)</fb:like>#i', '', $content);
 $content = preg_replace('#<fb:comments\b[^>]*>(.*?)</fb:comments>#i', '', $content);
 $content = preg_replace('#<script .*?>(.*?)</script>#i', '', $content);
 $content = preg_replace('#<script type="text/javascript">.*?</script>#i', '', $content);
 $content = preg_replace('#<fb:like (.*?)></fb:like>#i', '', $content);
 $content = preg_replace('#<fb:comments .*?></fb:comments>#i', '', $content);
 //head に記載する amp-custom 内にレスポンシブ用の記述を加える前提
 $content = preg_replace('#<img (.*?)>#i', '<amp-img \1></amp-img>', $content);
 $content = preg_replace('#<img (.*?) />#i', '<amp-img \1></amp-img>', $content);
 //amp-img で amp の responsive を使う場合はこちら記述
 //ただし、 width:1px; min-width:100%; の指定が入り小さい画像も横幅100%になってしまう。
 // $content = preg_replace('#<img (.*?)>#i', '<amp-img layout="responsive" \1></amp-img>', $content);
 // $content = preg_replace('#<img (.*?) />#i', '<amp-img layout="responsive" \1></amp-img>', $content);
 $content = preg_replace('/style[^>]*/', '', $content);
 $content = preg_replace('/onclick[^>]*/', '', $content);
 $content = preg_replace('/onmouseover[^>]*/', '', $content);
 $content = preg_replace('/onmouseout[^>]*/', '', $content);
 $content = preg_replace('/target[^>]*/', '', $content);
 //埋め込み用Twitter対応
 $content = preg_replace('/<blockquote class="twitter-tweet".*>.*<a href="https:\/\/twitter.com\/.*\/status\/(.*)".*<\/blockquote>/is', '<amp-twitter width="592" height="472" layout="responsive" data-tweetid="$1"></amp-twitter>', $content);
 //埋め込み用Youtube対応
 $content = preg_replace('/<iframe[^>]+?src="https:\/\/www.youtube.com\/embed\/(.*)" frameborder="0" allowfullscreen><\/iframe>/i', '<amp-youtube layout="responsive" data-videoid="$1" width="480" height="270"></amp-youtube>', $content);
 //コンテンツ内のリンクをAMPページ用にすべて変更する場合
 //$content = preg_replace('/href="https:\/\/example.com\/(.*?)"/i', 'href="https://example.com/$1?amp=1"', $content);
 return $content;
 }
 //記事下にAMP用SNSボタンを配置
 add_filter('the_content','add_snsbtn_above', 20);
 function add_snsbtn_above($content){
 //記事下にsnsボタン配置
 ob_start();
 get_template_part('amp-sns-bt');
 $output_string = ob_get_contents();
 ob_end_clean();
 return $content.$output_string;
 }
 }
 }
 //プラグインが出力するlink要素を消す
 add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
 function my_deregister_styles() {
 if(check_amp()){
 wp_deregister_style('自分が使用しているプラグインのcss');
 wp_deregister_style('自分が使用しているプラグインのcss');
 wp_deregister_style('自分が使用しているプラグインのcss');
 }
 }

上記のプラグインによってheader内に出力されるCSSファイルは一番下部の部分です。

それぞれの使用しているブラグインに合わせて入力してください。

そうすると、

AMPでの表示の際にheader内に出力されていたCSSが出力されなくなります。

これが一番四苦八苦・試行錯誤しました。

その他もかなりですが・・・・・・。

またこれだけでは、かなりのエラーが出ると思われます。

それぞれのテーマの各テンプレートファイルの中でAMPでは使用できないコードなどがデバックモードで確認できます。

そのデバックモードでエラーと表示された部分をひとつずつ以下の条件分岐コードで、分岐していきます。

その際に、分岐条件を使用するテンプレートファイルの一番上に以下のコードを記載します。

<?php
 $myAmp = false;
 if(check_amp()){
 $myAmp = true;
 }
 ?>

そして、デバックモードでエラーが表示されたコード部分を以下の条件分岐のコードで囲っていきます。

<?php if($myAmp): // AMP対応ページの場合 ?>
 （AMP時に表示させる部分）
 <?php else: // 通常ページの場合 ?>
 （通常表示時に表示させる部分）
 <?php endif; // AMP分岐終了 ?>

こんな感じでひとつずつエラー部分を囲ってはデバックモードで確認して、さらに、通常表においても確認しておいた方が懸命だと思います。

とりあえずは、こんな感じまででまた後日追記します。

その他で、header内にjsファイルのURLやスタイルシートCSSが出力されないようにやったことです。

プラグインの中をみてheaderに出力する直書きのスクリプト（SCRIPT）があったので、
これは、出力場所がしっかりとwp header となっていた為、headerをfooterに変更しました。

もうひとつは、同じプラグインから記述を変更してwp_enqueueの第４引数をfalseではなく「true」にして、footer内にjsを出力するようにしました。

まだまだその他もろもろ、

カスタム背景の機能も停止しないとスクリプト（SCRIPT）なので、カスタム背景の機能を停止します。

停止の仕方は以下の通りです。

function.php内に以下のコードを記述します。

add_action( 'after_setup_theme', 'my_remove_custom_background', 100 );
 function my_remove_custom_background() {
 remove_theme_support( 'custom_background' );
 }

そうすると、カスタム背景の機能が使えなくなります。

しかし、このままですと<body>タグ内に.custom-backgroundというclassという属性が残ります。

なので、うわっ、なんか気持ち悪いし元に戻したいと言う場合には、この機能上は必須ではないので、以下のコードを functions.php に追加すると出力されなくなります。

add_filter( "body_class", "remove_custom_background_class" );

function remove_custom_background_class( $args ){
 $classes = array();
 foreach ($args as $class) {
 if ($class !== 'custom-background') {
 $classes[] = $class;
 } 
 } 
 return $classes;
 }

 

今日はここまで…。

他にもなんかしましたがウル覚え…。

以下のことを行った結果カスタム背景の機能は無効化しなきてもAMP化に対応することができました。

なので、上記コード？無効化する方法は必要ありません。

 

プラグイン使わないでAMP化に対応する方法やっと成功しました最終版（2016年11月24日）

えー、あれから僕たちは何かを信じてこれたかなぁ…。

↑

どこかで聞いたことのあるキャッチフレーズです。(o*。_。)oペコッ

やっとやっと、AMP化成功しました。AMP対応・AMP完全対応しました。

えー何度も言わせてください。はいm(__)m。

一般ピープル、一般人、一般ポーピルが自力でなんとかかんとかプラグインを使用しないでAMP対応しちゃったのですから・・・・。

 

でもですね…。
正直、どこまで何をやったかどこをどういじったのか完全には覚えていないのです。

前回の記事のあとにもかなり修正しましたから。

しかも、
投稿記事のみのページだけになっていますのであしからずです。

一時は、AMP用に別のテンプレートを作成して分岐条件にてAMPの場合にはそのテンプレートを読み込ませるという方法もあるなぁ。と思いAMP用のテンプレートファイルを作成してみたり・・・・。

だけれども、なんとなくうまくいかなく（本当ならこの方法のほうが後々何かあった場合には楽だと思われます。）、

そして、元に戻って現在ある限りのもの（テンプレートファイル）をイジったり修正したりしてみました。

若干、無理矢理感がぬぐえませんが一応ブログカード風のリンクがあったりする投稿ページ以外はAMPに対応しています。
（していると思います。）

ただ、AMP用のCSSを未設定なので結構無様なAMP対応ページになっております。

AMP用のCSSは後々対応してみようとおもいます。

WordPressが勝手に吐き出すヘッダー内のタグ（いろいろありますが）をなんとかかんとか分岐条件でできないかと四苦八苦し、試行錯誤し、暗中模索し・・・・。

結局、簡単な解決方法ですが以下のようにWordPressが吐き出すヘッダー要素を分岐条件を使って無効化して対応してしまいました。

そ

れ

は

、

以下のコードをこれまでの<?php wp_head(); ?>を以下のようにしました。

<?php if ( ! $myAmp ) { wp_head(); } ?>

 

たったのこれだけです。

現在はフッターを読み込まないようにしていますが、
後々を考えて一応フッター内の<?php wp_footer(); ?>も以下のように分岐条件を使用して対応しておいてあります。

<?php if ( ! $myAmp ) { wp_footer(); } ?>

 

忘れないようにするためのメモです。

 

他にフェイスブックのbodyタグの直下に挿入するコードがあると思いますが、

このフェイスブックのコードが分岐条件を指定してもAMP表示時には問題ないのですが、通常表示の際にフェイスブックに関するブログパーツ？が表示されなくなってしまっていました。

現在フッターの右下にあるのです。（スマホだと表示位置が異なりますが）

それも解決できたので忘れないように残して（メモって）おきます。

以下のフェイスブック用のコードがあると思います。（使っている人は）

<div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=○○○○○○○○○○○○○○○○";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

このfb-rootってコードです。

これが何度分岐条件を指定してもエラーはでませんでしたが、通常表示の際に表示されなくなってしまっていました。

エラー表示と何度も何度もにらめっこしました。

そして、なんとなく分かったので以下のように分岐条件を挿入する位置を変えてみました。

<div id="fb-root"></div>
 <?php if($myAmp): // AMP対応ページの場合 ?>
 <?php else: // 通常ページの場合 ?>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=○○○○○○○○○○○○○○○○";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <?php endif; // AMP分岐終了 ?>

 

そうしたところAMP表示でも問題なくSuccessfullySuccessfulとなり通常表示の場合には、しっかりと表示されていると思います。（<div id="fb-root">の上ではなく、黄色下線の部分に分岐条件を挿入する。）

なんとなく（ではなく試行錯誤の暗中模索の四苦八苦して）のAMP化なので、
すべての事が備忘録として残されているとは限りませんが概ね前回の記事と合わせて（ではなくかな？）、
このような方法でプラグインを使用しないでAMPに対応することができました。

最後にAMP対応成功の際にスクリーンショットです。

また、今後追加したり修正したり変更したりすることがあると思われます。その際はまた備忘録として残しておきたいと思っています。

参考にさせていただいたサイトです。

WordPressのAMP対応:メモ1

本当にありがとうございます。

でも、AMP対応もですがSSL対応（SSL化）もかんがえないとですよね…。無料サービスブログでAMP化（なんちゃってAMP対応）はできましたが、SSL化はどうなんでしょうね。というのと、本当に個人の運営するサイトやブログでSSL化は必要なのでしょうか・・・・。

SSL化とかHTTPS化とか言うけれども、セキュリティは大事だけど個人ブログやサイトにも必要かなぁ…。

HTTPS化(SSL)しなければならないのかなぁ。自動でなって…。

これまでの人気記事トップ１０

• 車のキーナンバー確認方法。キーレス紛失や壊れた時 150,635件の PV
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 106,657件の PV
• Windows10,Windows8.1プロダクトキー確認方法 75,748件の PV
• Windows10でエラーコード0x800705b4の対処方法 67,240件の PV
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 44,461件の PV
• スロットルポジションセンサー調整で不安定なアイドリング調整 40,723件の PV
• 車から異音の原因。カラカラ、カタカタ、コトコトなど…。 38,216件の PV
• Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 37,259件の PV
• ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 36,611件の PV
• カーメイトのエンジンスターターでエラー15表示と対処方法 33,342件の PV

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

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

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

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

インターネット 伝えたいこと 備忘録 時事ネタ

鳥越俊太郎さん週刊文春の記事を否定。当たり前だと思うけど…。

（アイキャッチ画像はhttps://news.tbs.co.jp/newseye/tbs_newseye2826318.htmの動画のスクリーンショットです。） 昨日（2016年7月20日）一部メディ…

もっと読む

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

伝えたいこと 備忘録

アイキャッチ画像の設定は必要か?

ここ数年でよく見たり聞いたりする「アイキャッチ」という言葉があります。言葉通り、「目（目線・視線）をキャッチ（掴む）」という意味合いかと思われます。ですが、そのアイキャッチ画像って本当に必要なのか？時…

もっと読む

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

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

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

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

もっと読む

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

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

川田裕美フリーアナウンサー医師にアナウンサー辞めたほうが良いと!?

（アイキャッチ画像は川田裕美フリーアナウンサーの公式ブログのスクリーンショットです。） かのお昼時間帯の情報番組でありワイドショー番組であり名番組のミヤネ屋でアシスタントをしていた、読売テレビだった川…

もっと読む

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

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

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

今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。 その後もHTTPS everywhere（SSL化）などもありますが…。 は…

もっと読む

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

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

確定申告医療費控除申請のインターネット手続き方法とやり方

残すところ1週間で確定申告の時期が終わります。 しかし、医療費控除の申告は特に確定申告の時期ではなくてもできるのを知っていましたか？ 年中いつでも担当箇所の税務署がやっている平日であればできるのです。…

もっと読む

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

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

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

おすすめの記事一部広告

• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法309
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ97
• 車のキーナンバー確認方法。キーレス紛失や壊れた時92
• スロットルポジションセンサー調整で不安定なアイドリング調整71
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく69
• カーメイトのエンジンスターターでエラー15表示と対処方法66
• マイナ保険証は必要なのか。マイナンバーカードへの運転免許証1本化も必要なのか。63
• エクストレイルT32マイナーチェンジ後ステアリング外し方55
• エクストレイルフォグランプが下を向きすぎている光軸調整方法47
• ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に45

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

Multiplex 広告

Total287

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

目次に戻る

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

この記事タイトルとURLをコピー

• X
• Share
• Pocket
• Hatena

• LINE
• RSS
• Feedly
• Push7

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

目次に戻る

目次に戻る

---

コメントを閉じる

comment コメントをキャンセル

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

コメント ※

名前 ※

メール ※

サイト

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。

Δ

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

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

欧州連合の法律により、欧州連合からの訪問者には、ブログで使用されている Cookie に関する情報を提供する必要があります。また、これらの法律では多くの場合、同意を得ることが求められます。

Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

You are not opted out. Uncheck this box to opt-out. You are currently opted out. Check this box to opt-in.

The tracking opt-out feature requires cookies to be enabled.