ACTION

アフィンガー5のサイトロゴによるAMPエラーの修正方法

初心ちゃん
アフィンガー5にサイトロゴを設置したらAMPエラーが出ちゃったんだけどどうしたらいい?

そんな疑問を解決します。

せっかくサイトロゴ作ったのにAMPエラーで困ってる方、この記事のとおりに設定すれば大丈夫です!

AMPテストを実行してみよう

まずはサイトロゴを設置した後にAMPテストページでテストを実行してみましょう。

テストをするサイトのURL/amp/と入力してテストを実行します。

私の場合はこんなエラー表示が出てしまいました。

 

このエラーはヘッダーとフッターに表示したロゴが原因ですのでそれを修正します。

修正するファイルはこの2つになります。

ファイル名

st-header-logo-amp.php

st-footer-content-amp.php

 

修正の前に必ずバックアップを取っておきましょう!

修正方法

修正の手順

  1. アフィンガー5の親テーマからファイルをダウンロード
  2. チャイルドテーマにファイルをアップロード
  3. チャイルドテーマの2つのファイルを修正
管理人
それでは順を追って修正してみましょう。

修正ファイルをダウンロード

アフィンガー5の親テーマからFTPソフトでst-header-logo-amp.phpとst-footer-content-amp.phpの2つのファイルを任意の場所(デスクトップ等)に保存します。

2つのファイルははwp-content/themes/affinger5の中にあります。

チャイルドテーマに修正ファイルをアップロード

保存したst-header-logo-amp.phpとst-footer-content-amp.phpをチャイルドテーマにアップロードします。

アップロードする場所は wp-content/themes/affinger5-child です。

st-header-logo-amp.phpを修正

次はチャイルドテーマにアップロードしたst-header-logo-amp.phpを修正します。

「外観」>「テーマエディター」を開きます。右上のドロップダウンリストから「WING-AFFINGER5 Child」を選択します。

st-header-logo-amp.phpを選択して修正を行います。

修正箇所は3箇所あり、layout=“fixed”のすぐ後ろに「width」と「height」の要素を追加してあげます。

修正の前に必ずバックアップを取っておきましょう!

修正が終わったら「ファイルを更新」をクリックします。

st-footer-content-amp.phpを修正

同様にst-footer-content-amp.phpを修正します。

修正箇所は2箇所あり、layout=“fixed”のすぐ後ろに「width」と「height」の要素を追加してあげます。

修正の前に必ずバックアップを取っておきましょう!

修正が終わったら「ファイルを更新」をクリックします。

最後にもう一度AMPテストで修正を確認

修正が終わったらもう一度AMPテストを実行してみましょう。

このような画面が出ればOKです。

せっかくのアフィンガー5です。サイトロゴを使ってカッコよくしましょう。

 

 

ブログランキングに参加しています。よろしければクリックお願いします。

にほんブログ村 小遣いブログ マイレージへ
にほんブログ村

-ACTION
-