+本日の人気記事TOP10+
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法17
- Windows10で動かないアプリを動かす方法213
- カーメイトのエンジンスターターでエラー15表示と対処方法10
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー6
- アイドリングストップシステム異常警告灯表示対処方法6
- シガーライターがない車にシガーライターソケットの付け方と増設方法5
- 車のハンドルが重い時にできる対処方法5
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法5
- お風呂の枕バスピローおすすめと自作してみた。4
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)4
先日公開させていただいた記事(:AMP化する方法プラグインなしで対応してみる)でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。
先日の状態でも投稿記事のみはAMPか出来てはいたのですが、エラーの数がもの凄かったのです。w(゜ー゜;)wワオッ!!
数字は恥ずかしくて言えませんが…。いろいろと試行錯誤を繰り返してみてはいるもののまだ完全対応とまではいっていません。
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
人気記事一覧
車のキーナンバー確認方法。キーレス紛失や壊れた時
148,561件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
105,367件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,488件の PV
Windows10でエラーコード0x800705b4の対処方法
67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
41,164件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
40,227件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
36,232件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
31,411件の PV
車のキーナンバー確認方法。キーレス紛失や壊れた時 148,561件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 105,367件の PV
Windows10,Windows8.1プロダクトキー確認方法 75,488件の PV
Windows10でエラーコード0x800705b4の対処方法 67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 41,164件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整 40,227件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。 38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 36,232件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法 31,411件の PV
この記事を読まれている方におすすめ一覧クリック
一応パソコンでもスマホでも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タグなどいろいろと変換するコードです。
引用元サイト):コードは以下のサイトを参考にしました。
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対応もですがSSL対応(SSL化)もかんがえないとですよね…。無料サービスブログでAMP化(なんちゃってAMP対応)はできましたが、SSL化はどうなんでしょうね。というのと、本当に個人の運営するサイトやブログでSSL化は必要なのでしょうか・・・・。
おすすめの記事一部広告
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法17
- Windows10で動かないアプリを動かす方法213
- カーメイトのエンジンスターターでエラー15表示と対処方法10
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー6
- アイドリングストップシステム異常警告灯表示対処方法6
- シガーライターがない車にシガーライターソケットの付け方と増設方法5
- 車のハンドルが重い時にできる対処方法5
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法5
- お風呂の枕バスピローおすすめと自作してみた。4
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)4
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Multiplex 広告
あなたにおすすめ
-
新しい事を初める準備や片付けって意外と面倒で時間がかかる…。
なんでもそうですが、新たに新しいことを始める時に(家の配置替えや片付けや家電の買い替えやいろいろ)これまであったものを整理整頓して、新しいものを迎え入れたいと思います。 そんなこんなでこれまでにあった…
インフィード広告アドセンス
-
楽天ひかりIPv6設定WXR-5700AX7S設定接続未確認無線LANルーターにて
今年に入り新型コロナウイルスに感染拡大で4月には全国的に「緊急事態宣言」が発出されリモートワークなどが多くなりました。他にも、リモート飲み会やリモート〇〇とリモートと付くオンラインで行うことが多くなり…
インフィード広告アドセンス
-
記事の閲覧時間や所要時間の目安を表示する方法(今は需要ないかも…。)
以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。 ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。 しかし、最近ではそのナ…
インフィード広告アドセンス
「WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
Total146アドセンス336pxPC閲覧記事下表示1つ目コード
アクセスランキング
よろしかったらシェアよろしくお願いします。
-WordPress, カスタマイズ, 伝えたいこと, 備忘録
コメントを閉じるこのサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
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対応もですがSSL対応(SSL化)もかんがえないとですよね…。無料サービスブログでAMP化(なんちゃってAMP対応)はできましたが、SSL化はどうなんでしょうね。というのと、本当に個人の運営するサイトやブログでSSL化は必要なのでしょうか・・・・。
おすすめの記事一部広告
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法17
- Windows10で動かないアプリを動かす方法213
- カーメイトのエンジンスターターでエラー15表示と対処方法10
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー6
- アイドリングストップシステム異常警告灯表示対処方法6
- シガーライターがない車にシガーライターソケットの付け方と増設方法5
- 車のハンドルが重い時にできる対処方法5
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法5
- お風呂の枕バスピローおすすめと自作してみた。4
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)4
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Multiplex 広告
あなたにおすすめ
-
新しい事を初める準備や片付けって意外と面倒で時間がかかる…。
なんでもそうですが、新たに新しいことを始める時に(家の配置替えや片付けや家電の買い替えやいろいろ)これまであったものを整理整頓して、新しいものを迎え入れたいと思います。 そんなこんなでこれまでにあった…
インフィード広告アドセンス
-
楽天ひかりIPv6設定WXR-5700AX7S設定接続未確認無線LANルーターにて
今年に入り新型コロナウイルスに感染拡大で4月には全国的に「緊急事態宣言」が発出されリモートワークなどが多くなりました。他にも、リモート飲み会やリモート〇〇とリモートと付くオンラインで行うことが多くなり…
インフィード広告アドセンス
-
記事の閲覧時間や所要時間の目安を表示する方法(今は需要ないかも…。)
以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。 ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。 しかし、最近ではそのナ…
インフィード広告アドセンス
「WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
アドセンス336pxPC閲覧記事下表示1つ目コード
アクセスランキング
よろしかったらシェアよろしくお願いします。
-WordPress, カスタマイズ, 伝えたいこと, 備忘録
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
comment