Twitterフォロワー数

いいね!ボタン

【WING-AFFINGE5】3分で出来るAMPエラー直し方

投稿日:

AMPアイキャッチ画像

https://virtual-space.co.jp

今まで使っていたAFFINGER4から、AFFINGE5【WING】に変えました。変更後は、毎日が快適で記事制作がより楽しくなりました。もちろん、収益もアクセスも引き続き増加中。そんな順調過ぎる毎日でしたが、ある日サチコ(Googleサーチコンソール)からエラー通知が届きました。

サーチコンソールAMPエラーのお知らせ画像

石川 貴彦
なんじゃこりゃ!!
AFFINGER4の時はこんなのなかったワン。
ころちゃん
石川 貴彦
きっと、AFFINGE5に変えたから変更が必要な個所が出たのかも。
クンクン探って見つけ出すワン!
ころちゃん
おすすめ
テーマとASPについて公開
【初公開】長年ずっと愛用してる有料テーマと提携ASPについて

僕自身、こんなの初めてです。自分で使っているテーマや提携しているASP(アフィリエイトサービスプロバイダー)をまとめて公開するなんて。そもそも、この記事を書こうと思ったのには理由があります。 さかのぼ ...

まとめ
アフィリエイトの始め方アイキャッチ画像
アフィリエイトを始めるために準備するもの総まとめ

アフィリエイトをこれから始める方へ。最初の準備から運営に必要なものについて、一挙にご紹介していきます。この記事は、初めての方が読んでも内容を把握しやすいように、なるべく専門用語は避けるように仕上げてい ...

スポンサーリンク

アドセンスPC

AMPページのエラー原因を確認

参考リンクAFFINGER4のAMP対応について

石川 貴彦
最初に、AMPページが表示されているのか確認しましょう。

参照リンクAMPテスト

AMPテストページの見本

投稿ページのURLを入れて、最後に「/amp」を付けましょう。入力ができたら「テストを実行」をクリックしてください。

下図のような表示が出なかった場合は、エラーの修正が必要になります。

有効なAMPページの表示見本

AMPタグに無効なレイアウトプロパティーがある場合

ヘッダーとフッターに表示しているロゴ画像がエラーになっているので、お使いのAFFINGE5(親テーマ)のファイルから以下のファイルを取り出してください。

  • st-header-logo-amp.php
  • st-footer-content-amp.php

上記2つのファイルを、デスクトップにダウンロード。FTPなどで、AFFINGE5-Childに追加保存してください。

※デスクトップでなくても構いません。任意の場所にダウンロードしてください。

WordPress内にある「外観」→「テーマの編集」を選択

テーマ編集見本

WING-AFFINGE5 Child」に選択されていることを確認

  • st-header-logo-amp.php
  • st-footer-content-amp.php

追加した上記2つのファイルを1つずつ編集していきます。

layout="fixed"の後に、width="300"height="40"を追加します。

見つけやすい方法

参考

まずは、layout="fixed"をコピーしてください。

続いて「Ctrl」+「F」を押して、「Ctrl」+「V」を押しlayout="fixed"をペースト。

st-header-logo-amp.php」内にlayout="fixed"3箇所あるので、layout="fixed"のすぐ後に「width」と「height」を追加します。

※編集作業の前に、必ずバックアップを取ってから行ってください。

st-header-logo-amp.php

+ クリックして下さい

<?php if ( trim( $GLOBALS['stdata102'] ) !== '' ) : //ディスクリプションが無ければ ?>
<!-- ロゴ又はブログ名 -->
<?php if ( trim( $GLOBALS['stdata101'] ) === '' ) : //サイト名非表示でなければ ?>
<?php if ( is_front_page() ) : ?>
<h1 id="minih" class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>"
<?php amp_image_size( get_option( 'st_logo_image' ), array(PHP_INT_MAX, 80) ); ?> layout="fixed" width="300" height="40"></amp-img>
<?php else: //ロゴ画像が無い時 ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php endif; ?>
</a></h1>
<?php else : ?>
<p id="minih" class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>"
<?php amp_image_size( get_option( 'st_logo_image' ), array(PHP_INT_MAX, 80) ); ?> layout="fixed" width="300" height="40"></amp-img>
<?php else: //ロゴ画像が無い時 ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php endif; ?>
</a></p>
<?php endif; ?>
<?php endif; ?>

<?php else: ?>
<!-- キャプション -->
<?php if ( is_front_page() ) : ?>
<h1 class="descr">
<?php bloginfo( 'description' ); ?>
</h1>
<?php else : ?>
<p class="descr">
<?php bloginfo( 'description' ); ?>
</p>
<?php endif; ?>

<!-- ロゴ又はブログ名 -->
<?php if ( trim( $GLOBALS['stdata101'] ) === '' ) : //サイト名非表示でなければ ?>
<p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>"
<?php amp_image_size( get_option( 'st_logo_image' ), array(PHP_INT_MAX, 80) ); ?> layout="fixed" width="300" height="40"></amp-img>
<?php else: //ロゴ画像が無い時 ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php endif; ?>
</a></p>
<?php endif; ?>
<!-- ロゴ又はブログ名ここまで -->
<?php endif; ?>

編集できたら、「ファイルを更新」をクリックしてください。

※編集作業の前に、必ずバックアップを取ってから行ってください。

続いて、「st-footer-content-amp.php」内にlayout="fixed"2箇所あるので、layout="fixed"のすぐ後に「width」と「height」を追加します。

st-footer-content-amp.php

+ クリックして下さい

<!-- フッターのメインコンテンツ -->
<h3 class="footerlogo">
<!-- ロゴ又はブログ名 -->
<?php if ( ! is_home() || ! is_front_page() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php endif; ?>

<?php if ( get_option( 'st_footer_logo' ) ) : //フッター用ロゴ画像がある時 ?>
<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_footer_logo' ) ); ?>"
<?php amp_image_size( get_option( 'st_footer_logo' ), array(PHP_INT_MAX, 80) ); ?> layout="fixed" width="300" height="40"></amp-img>
<?php else: //フッター用ロゴ画像が無い時 ?>

<?php if ( get_option( 'st_logo_image' ) && ( st_headerfooter_logo() ) ) : //ヘッダーロゴ画像があり併用する時 ?>
<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>"
<?php amp_image_size( get_option( 'st_logo_image' ), array(PHP_INT_MAX, 80) ); ?> layout="fixed" width="300" height="40"></amp-img>
<?php else : //ロゴ画像が無い時 ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php endif; ?>
<?php endif; ?>

<?php if ( ! is_home() || ! is_front_page() ) : ?>
</a>
<?php endif; ?>
</h3>

<p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
</p>
<?php if ( false ): // [未対応] 通常ページ用 ?>
<?php get_template_part( 'st-header-widget', 'amp' ); //電話番号とヘッダー用ウィジェット ?>
<?php endif; ?>

編集できたら、「ファイルを更新」をクリックしてください。

最後にAMPテストをする

編集ができたら、最後にAMPテストしましょう。

参照リンクAMPテスト

AMPテストページの見本

URLを入れて、最後に「/amp」も入れてください。

この画面になったら、完了です。

有効なAMPページの表示見本

おすすめ
テーマとASPについて公開
【初公開】長年ずっと愛用してる有料テーマと提携ASPについて

僕自身、こんなの初めてです。自分で使っているテーマや提携しているASP(アフィリエイトサービスプロバイダー)をまとめて公開するなんて。そもそも、この記事を書こうと思ったのには理由があります。 さかのぼ ...

まとめ
アフィリエイトの始め方アイキャッチ画像
アフィリエイトを始めるために準備するもの総まとめ

アフィリエイトをこれから始める方へ。最初の準備から運営に必要なものについて、一挙にご紹介していきます。この記事は、初めての方が読んでも内容を把握しやすいように、なるべく専門用語は避けるように仕上げてい ...

アドセンスPC

アドセンスPC

Twitterフォロワー数

いいね!ボタン

  • この記事を書いた人
  • 最新記事
石川 貴彦

石川 貴彦

出身:栃木県/住所:埼玉県/生年月日:1987.02.15/学歴:中卒/ペット:柴犬(女の子)/友達申請:大歓迎/職業:Web制作・ブログライター

人気記事ランキング

素人が2万PV軽く超えたので無料のやり方5つを紹介 1

あなたも経験していると思いますが、自分のブログ記事を検索ページの上位に表示させるのは、容易ではありませんよね。特に、ブログを始めたばかりの頃って、SEOって言われてもなんのこっちゃって話だったと思いま ...

Webページを最適化する施策内部対策 2

Webページを検索の上位に表示させることは、ブロガーにとって一番重要な事だと思います。Googleの検索アルゴリズムがパンダアップデートにより、コンテンツの品質を評価するようになって以来、PR(ページ ...

月間1万PVのまとめ 3

どうも、石川貴彦(いしかわたかひこ)です。この記事のタイトルを見てサイトに訪れてくれたあなたは、僕と似たような活動をしてるんじゃないかと思っています。 まずはじめに、僕の簡単な自己紹介をさせてください ...

3分でわかる301リダイレクトについて 4

GoogleがSSL対応(https://)のドメインを優先的に検索結果の上位に表示する話は知っていると思います。そこで今回は、スタートがSSL非対応(http://)だった方が、SSL対応にした後に ...

Amazonアソシエイトアイキャッチ画像 5

ナレーション:それは、2017年3月。一人の男が存在した。その男は、過去に何度もアフィリエイトを実践するも無残な結果を叩き出してきた。もうダメだ…。男は何度もそう思った。しかし、ここで引き下がるわけに ...

-ブログノウハウ
-

Copyright© バーチャルスペース , 2018 All Rights Reserved.