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