プラグイン使わない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)しなければならないのかなぁ。自動でなって…。

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

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

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

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

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

伝えたいこと 備忘録

ピカットロンプロでキッチンシンク排水口のヌメリやお風呂のカビ取り

何年か前にテレビのショピング番組でピカットロンプロという台所（キッチンシンク）の排水口やお風呂の排水部分のヌメリやカビ取り、そして洗面所のヌメリや髪の毛などの水回りの清掃にただドロッとしたピカットロン…

もっと読む

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

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

rss2.php編集版RSSフィードにアイキャッチ画像を表示する方法

何度も何度も申し訳ありません。どうしてもRSSフィードにアイキャッチ画像を表示させたくて邁進している所存でございます。。。。先日にも再度検証してコードを修正したりいくつかの方法を記載いたしました。その…

もっと読む

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

php WordPress

PHPバージョン5.5に設定変更方法

WordPressで使われているphpというものがあります。 これにもバージョンがあるらしく、 現状私が利用させていただいているサーバーのバージョンは5.5ではなく5.2.17でした。 そして、 Fa…

もっと読む

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

WordPress 伝えたいこと 備忘録

ドメイン移行（複製）方法、DupulicaterでスターサーバーwpblogフリーWPから

これまで無料でWordPressを使うことができたネットオウルのサービスであるフリーWPのwpblog.jpドメインのサービスが2022年3月31日で終了の案内がされました。他の無料サービスのフリーP…

もっと読む

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

メンテナンス 伝えたいこと 車

ガソリン給油口の位置確認方法スピードメーターにて

昨今は、2007年頃にガソリン価格が高騰した頃と同じくらいの値段になってきています。180円/L前後。もう少しすると補助金制度が終わるためにさらにガソリン価格が高くなるかもしれません。ガソリン値下げ隊…

もっと読む

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

WordPress 不具合

WordPressビジュアルエディタで見出しタグが挿入できない場合の対象方法

WordPressにて、 ブログを始めたのはここ数日前です。 しかし、 WordPressのビジュアルエディタにて、 見出しタグの挿入時に範囲選択した場所以外も見出しタグが挿入されてしまう。 という現…

もっと読む

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

サーバ上のファイルやフォルダ削除できない時に削除する方法



Stinger6トップページ記事間にアドセンス広告を表示・入れる方法



WordPressプラグインなしでコンタクトフォームを作成方法



スマホやモバイル端末でサイドバー非表示・削除にする方法



Stinger7にテーマ変更してみたが…。



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

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

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

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

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

おすすめの記事一部広告

• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法94
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ49
• 車のキーナンバー確認方法。キーレス紛失や壊れた時37
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく36
• TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）29
• カーメイトのエンジンスターターでエラー15表示と対処方法24
• ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に24
• アイドリングストップシステム異常警告灯表示対処方法23
• キッチンシンク下がドブ臭い下水臭い原因と解決方法20
• ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法18

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

Multiplex 広告

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

Total256

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

目次に戻る

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

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

• X
  Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2924
  Twitter
• Share
  Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2921
  Share
• Pocket
  Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2921
  Pocket
• Hatena
  Deprecated: Automatic conversion of false to array is deprecated in /home/variouspress/infovarious.com/public_html/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2921
  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.