Loading…

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

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

本日の人気記事BEST10

所要時間目安:10


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

AMP化プラグインを使用しないで成功

先日公開させていただいた記事(:AMP化する方法プラグインなしで対応してみる)でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。

先日の状態でも投稿記事のみはAMPか出来てはいたのですが、エラーの数がもの凄かったのです。w(゜ー゜;)wワオッ!!

数字は恥ずかしくて言えませんが…。いろいろと試行錯誤を繰り返してみてはいるもののまだ完全対応とまではいっていません。

スポンサーリンク

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

よく読まれている人気記事一覧

目次に戻る


スポンサーリンク

一応パソコンでもスマホでもAMP化した?投稿ページは見ることはできますよ。

とってもシンプルでまさにシンプル・イズ・ベストって感じでもありますが、実際の所はAMP対応のスタイルシート(CSS)をどうしようかなぁと思っています。

AMP化はここまでにして、
役に立つ記事を作って作成していったほうがいいのかなぁ。

なんて思ったりもしますが、
自分の備忘録としても残しておきたいのです。

いろいろと足りない部分があってかなりの修正をしました。

header.php内とsingle.php内は分岐条件関数ばかりの山々になってしまいました。(汗)

エラー数で言いますと、はじめのエラー数の1/40以下になっています。

何をしたのか何を試してみたのか何を修正してみたのかが、分別つかなくなってきてしまっています…。

ですが、
プラグインを使わずにAMP対応に挑戦する前にバックアップをとってあるので、何かあったっ場合にはもとに戻せるようにはしてあります。

大きなカスタマイズをする際には基本中の基本ですね!!

それでも、何回か英語のエラー表示が出てしまいました。関数って難しい…。

慌ててFTPツールでアップロードして上書きして復活みたいな感じです。

熱中するとできないと気がすまない寝ないでも頑張ってしまう。
顔色が悪いと言われても、食事もろくに取らずに調べまくり試してみてはの繰り返し…。

そこまでAMP対応に執着しなくても良いように思われますが…。

自分で言うなよポリポリ (・・*)ゞ。

 

なんとなく一度手を付けたものを途中でやめるのは納得がいきません。

もう少し気張っていろいろと試して頑張ってみたいと思います。

ふぅε=(・ρ・*) フゥ

 

Fighto(*⌒O⌒)bふぁいとっ!!一発!!オロナミンC…。(笑)(汗)。・・・(゜_゜i)タラー・・・

 

数日経過・・・・・・。

 

いろいろと検索したりプラグインを使わないでなんとかAMP化してAMP対応したいという意気込みで徐々にエラー数が減ってきました。

はじめは400くらいあったエラー数がやっと14になりました。でも、その14のエラー数がくせものなのです。

あっ( ̄0 ̄;アッ言っちゃった!!

とその前にこれまでの行った内容とコードを忘れない内に記載しておきたいと思います。

 

まずは、先日のコードをfunction.php内に記載していろいろとコーンバート(変換)させて頂きました。

しかし、
テーマのテンプレート毎にAMP対応していない所も多くて、その際には以下の分岐条件にて一つ一つ囲いました。

これが想像以上に大変・・・・・・。

コメント欄などはコメントのテンプレートファイルを非表示にしてしまえばそれで簡単です。

AMPには使えないHTMLコードやlink rel・・・・といったものやCSSはAMP対応のものにしないといけません。

といろいろ言っている前に、いろいろと行ってみたことを以下に記載します。

先に、言っておきますが、ほとんどコードだらけです。

 

プラグインのcssや自分の通常にcssを除去してその他画像などのimgタグなどいろいろと変換するコードです。

引用元サイト):コードは以下のサイトを参考にしました。

WordPressのAMP対応:メモ1

 

function check_amp(){
 if(isset($_GET['amp'])){
 if($_GET['amp'] === '1' && is_singular()){
 return true;
 }
 }
 }

 

//AMPチェックの関数化
 if (!function_exists('check_amp')) {
 function check_amp(){
 if(isset($_GET['amp'])){
 if($_GET['amp'] === '1' && is_singular()){
 return true;
 }
 }
 }
 }

 

 

add_action( 'template_redirect', 'set_amp_setting' );
 function set_amp_setting(){
 if(check_amp()){
 //処理を書く
 }
 }

 

//プラグインが出力する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');
 }
 }

 

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

 

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の第4引数を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対応成功の際にスクリーンショットです。

AMP化プラグインを使用しないで成功 AMP化プラグインを使用しないで成功

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

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

WordPressのAMP対応:メモ1

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

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

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

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

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


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

おすすめの記事一部広告

関連記事

東京オリンピックパラリンピック

伝えたいこと 備忘録

東京オリンピック・パラリンピック開催!?しちゃうしかないの?しちゃって良いの?するしかないの?

もう以前に記事にしてから早いもので来年の夏には東京オリンピック・パラリンピックが開催予定となっていま…

もっと読む

PC Windows10 不具合 伝えたいこと 備忘録 設定

Windows10で動かないアプリを動かす方法2

先日も書きましたWindows10の不具合?に関することです。 不具合と言うのか仕様と言えば良いのか…

もっと読む

紅葉

php WordPress テーマ

WordPressテーマカスタマイズしてみた。

WordPressのテーマをカスタマイズしてみました。 カスタマイズしてみた内容は、 ちょっと試行錯…

もっと読む

Windows7サポート終了日

PC Windows10 セキュリティ 伝えたいこと

Windows7サポート終了まであと何日?

早いもので・・・。 WindowsXPのサポートが延びの延びて2014年4月までの長期間サポートを経…

もっと読む

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

おすすめ!!

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

おすすめ2

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る


コメントを閉じる

comment

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

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