先日公開させていただいた記事(:AMP化する方法プラグインなしで対応してみる)でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。
先日の状態でも投稿記事のみはAMPか出来てはいたのですが、エラーの数がもの凄かったのです。w(゜ー゜;)wワオッ!!
数字は恥ずかしくて言えませんが…。いろいろと試行錯誤を繰り返してみてはいるもののまだ完全対応とまではいっていません。
車メンテナンス・カスタマイズ・点検・修理、WordPressカスタマイズ、PC設定、車、時事ネタ、情勢、日々の出来事など津々浦々に綴っていきます。
所要時間目安: 約 10 分
今日は2025年6月6日です。
この記事は2016年11月24日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月6日 (金曜日)本日の人気記事トップ10
2025年6月6日 (金曜日)↓における週間月間人気記事トップ3は?↓
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
米FTCアマゾンを独禁法違反疑いで提訴と日立家電品正規取扱店制度 1PV
具体的には、アマゾンが主力事業のネット通販で出店している小規模事業者に対して高額な手数料を請求したほか、事業者が他の競合サイトで安く販売した場合、アマゾンのサイトでは検索しづらくしたなどと指摘していま…
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 29PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 22PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
先日公開させていただいた記事(:AMP化する方法プラグインなしで対応してみる)でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。
先日の状態でも投稿記事のみはAMPか出来てはいたのですが、エラーの数がもの凄かったのです。w(゜ー゜;)wワオッ!!
数字は恥ずかしくて言えませんが…。いろいろと試行錯誤を繰り返してみてはいるもののまだ完全対応とまではいっていません。
アドセンス336pxPC閲覧記事下表示1つ目コード
AMP化はここまでにして、
役に立つ記事を作って作成していったほうがいいのかなぁ。
なんて思ったりもしますが、
自分の備忘録としても残しておきたいのです。
いろいろと足りない部分があってかなりの修正をしました。
header.php内とsingle.php内は分岐条件関数ばかりの山々になってしまいました。(汗)
何をしたのか何を試してみたのか何を修正してみたのかが、分別つかなくなってきてしまっています…。
ですが、
プラグインを使わずにAMP対応に挑戦する前にバックアップをとってあるので、何かあったっ場合にはもとに戻せるようにはしてあります。
それでも、何回か英語のエラー表示が出てしまいました。関数って難しい…。
慌ててFTPツールでアップロードして上書きして復活みたいな感じです。
熱中するとできないと気がすまない寝ないでも頑張ってしまう。
顔色が悪いと言われても、食事もろくに取らずに調べまくり試してみてはの繰り返し…。
そこまでAMP対応に執着しなくても良いように思われますが…。
↑
自分で言うなよポリポリ (・・*)ゞ。
なんとなく一度手を付けたものを途中でやめるのは納得がいきません。
もう少し気張っていろいろと試して頑張ってみたいと思います。
ふぅε=(・ρ・*) フゥ
Fighto(*⌒O⌒)bふぁいとっ!!一発!!オロナミンC…。(笑)(汗)。・・・(゜_゜i)タラー・・・
数日経過・・・・・・。
はじめは400くらいあったエラー数がやっと14になりました。でも、その14のエラー数がくせものなのです。
あっ( ̄0 ̄;アッ言っちゃった!!
しかし、
テーマのテンプレート毎にAMP対応していない所も多くて、その際には以下の分岐条件にて一つ一つ囲いました。
これが想像以上に大変・・・・・・。
コメント欄などはコメントのテンプレートファイルを非表示にしてしまえばそれで簡単です。
AMPには使えないHTMLコードやlink rel・・・・といったものやCSSはAMP対応のものにしないといけません。
といろいろ言っている前に、いろいろと行ってみたことを以下に記載します。
先に、言っておきますが、ほとんどコードだらけです。
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');
}
}
それぞれの使用しているブラグインに合わせて入力してください。
AMPでの表示の際にheader内に出力されていたCSSが出力されなくなります。
これが一番四苦八苦・試行錯誤しました。
その他もかなりですが・・・・・・。
またこれだけでは、かなりのエラーが出ると思われます。
そのデバックモードでエラーと表示された部分をひとつずつ以下の条件分岐コードで、分岐していきます。
その際に、分岐条件を使用するテンプレートファイルの一番上に以下のコードを記載します。
<?php
$myAmp = false;
if(check_amp()){
$myAmp = true;
}
?>
<?php if($myAmp): // AMP対応ページの場合 ?>
(AMP時に表示させる部分)
<?php else: // 通常ページの場合 ?>
(通常表示時に表示させる部分)
<?php endif; // AMP分岐終了 ?>
こんな感じでひとつずつエラー部分を囲ってはデバックモードで確認して、さらに、通常表においても確認しておいた方が懸命だと思います。
とりあえずは、こんな感じまででまた後日追記します。
プラグインの中をみてheaderに出力する直書きのスクリプト(SCRIPT)があったので、
これは、出力場所がしっかりとwp header となっていた為、headerをfooterに変更しました。
もうひとつは、同じプラグインから記述を変更してwp_enqueueの第4引数をfalseではなく「true」にして、footer内にjsを出力するようにしました。
まだまだその他もろもろ、
停止の仕方は以下の通りです。
add_action( 'after_setup_theme', 'my_remove_custom_background', 100 );
function my_remove_custom_background() {
remove_theme_support( 'custom_background' );
}
そうすると、カスタム背景の機能が使えなくなります。
しかし、このままですと<body>タグ内に.custom-backgroundというclassという属性が残ります。
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;
}
今日はここまで…。
他にもなんかしましたがウル覚え…。
なので、上記コード?無効化する方法は必要ありません。
えー、あれから僕たちは何かを信じてこれたかなぁ…。
↑
どこかで聞いたことのあるキャッチフレーズです。(o*。_。)oペコッ
やっとやっと、AMP化成功しました。AMP対応・AMP完全対応しました。
えー何度も言わせてください。はいm(__)m。
でもですね…。
正直、どこまで何をやったかどこをどういじったのか完全には覚えていないのです。
前回の記事のあとにもかなり修正しましたから。
しかも、
投稿記事のみのページだけになっていますのであしからずです。
一時は、AMP用に別のテンプレートを作成して分岐条件にてAMPの場合にはそのテンプレートを読み込ませるという方法もあるなぁ。と思いAMP用のテンプレートファイルを作成してみたり・・・・。
だけれども、なんとなくうまくいかなく(本当ならこの方法のほうが後々何かあった場合には楽だと思われます。)、
そして、元に戻って現在ある限りのもの(テンプレートファイル)をイジったり修正したりしてみました。
若干、無理矢理感がぬぐえませんが一応ブログカード風のリンクがあったりする投稿ページ以外はAMPに対応しています。
(していると思います。)
ただ、AMP用のCSSを未設定なので結構無様なAMP対応ページになっております。
WordPressが勝手に吐き出すヘッダー内のタグ(いろいろありますが)をなんとかかんとか分岐条件でできないかと四苦八苦し、試行錯誤し、暗中模索し・・・・。
結局、簡単な解決方法ですが以下のようにWordPressが吐き出すヘッダー要素を分岐条件を使って無効化して対応してしまいました。
そ
れ
は
、
<?php if ( ! $myAmp ) { wp_head(); } ?>
たったのこれだけです。
現在はフッターを読み込まないようにしていますが、
後々を考えて一応フッター内の<?php wp_footer(); ?>も以下のように分岐条件を使用して対応しておいてあります。
<?php if ( ! $myAmp ) { wp_footer(); } ?>
忘れないようにするためのメモです。
現在フッターの右下にあるのです。(スマホだと表示位置が異なりますが)
それも解決できたので忘れないように残して(メモって)おきます。
以下のフェイスブック用のコードがあると思います。(使っている人は)
<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対応もですがSSL対応(SSL化)もかんがえないとですよね…。無料サービスブログでAMP化(なんちゃってAMP対応)はできましたが、SSL化はどうなんでしょうね。というのと、本当に個人の運営するサイトやブログでSSL化は必要なのでしょうか・・・・。
Feedlyは、Googleリーダーがサービスを終了してから言わずと知れたRSSリーダーかと思われます。そのRSSリーダーの記事内下部などによく設置されているfeedlyボタンを押すと自分のサイトをf...
以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。 ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。 しかし、最近ではそのナ...
今月初頭に(上旬)アドセンスの広告表示方法に通常のコンテンツ連動型広告にプラスで、インフィード広告と記事内広告が解禁されました。 以前に、トップページの記事一覧にきれいにアドセンス広告を挿入する方法を...
昨今、寒くなってきました。 そうなってくると一番メジャーな病気としてはインフルエンザ(ノロウイルスも)ですが、他にも意外と帯状疱疹(ヘルペス)も多くなってきてしまいます。 なぜかは寒くなった為に抵抗力...
Multiplex 広告
人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」
あなたが訪問してから
⏰ 0 秒経過 🎉ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ10
アドセンス336pxPC閲覧記事下表示1つ目コード
よろしかったらシェアよろしくお願いします。
-WordPress, カスタマイズ, 伝えたいこと, 備忘録
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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.
The tracking opt-out feature requires cookies to be enabled.
This site is protected by reCAPTCHA and the GooglePrivacy PolicyandTerms of Serviceapply.
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
新着コメント