アフィンガー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つのファイルを任意の場所（デスクトップ等）に保存します。

２つのファイルはは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」の要素を追加してあげます。

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

<?php if ( trim( $GLOBALS'stdata102' ) !== '' ) : //ディスクリプションが無ければ ?>

<!-- ロゴ又はブログ名 -->

<?php if ( trim( $GLOBALS'stdata101' ) === '' ) : //サイト名非表示でなければ ?>

<?php if ( isfrontpage() ) : ?>

<h1 id="minih" class="sitename"><a href="<?php echo escurl( homeurl( '/' ) ); ?>">

<?php if ( getoption( 'stlogoimage' ) ): //ロゴ画像がある時 ?>

<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo escurl( getoption( 'stlogoimage' ) ); ?>"

<?php ampimagesize( getoption( 'stlogoimage' ), array(PHPINTMAX, 80) ); ?> layout="fixed" width="500" height="125"></amp-img>

<?php else: //ロゴ画像が無い時 ?>

<?php echo escattr( getbloginfo( 'name' ) ); ?>

<?php endif; ?>

</a></h1>

<?php else : ?>

<p id="minih" class="sitename"><a href="<?php echo escurl( homeurl( '/' ) ); ?>">

<?php if ( getoption( 'stlogoimage' ) ): //ロゴ画像がある時 ?>

<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo escurl( getoption( 'stlogoimage' ) ); ?>"

<?php ampimagesize( getoption( 'stlogoimage' ), array(PHPINTMAX, 80) ); ?> layout="fixed" width="500" height="125"></amp-img>

<?php else: //ロゴ画像が無い時 ?>

<?php echo escattr( getbloginfo( 'name' ) ); ?>

<?php endif; ?>

</a></p>

<?php endif; ?>

<?php endif; ?>

<?php else: ?>

<!-- キャプション -->

<?php if ( isfrontpage() ) : ?>

<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 escurl( homeurl( '/' ) ); ?>">

<?php if ( getoption( 'stlogoimage' ) ): //ロゴ画像がある時 ?>

<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo escurl( getoption( 'stlogoimage' ) ); ?>"

<?php ampimagesize( getoption( 'stlogoimage' ), array(PHPINTMAX, 80) ); ?> layout="fixed" width="500" height="125"></amp-img>

<?php else: //ロゴ画像が無い時 ?>

<?php echo escattr( getbloginfo( 'name' ) ); ?>

<?php endif; ?>

</a></p>

<?php endif; ?>

<!-- ロゴ又はブログ名ここまで -->

<?php endif; ?>/

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

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

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

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

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

<!-- フッターのメインコンテンツ -->

<h3 class="footerlogo">

<!-- ロゴ又はブログ名 -->

<?php if ( ! ishome() || ! isfrontpage() ) : ?>

<a href="<?php echo escurl( homeurl( '/' ) ); ?>">

<?php endif; ?>

<?php if ( getoption( 'stfooterlogo' ) ) : //フッター用ロゴ画像がある時 ?>

<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo escurl( getoption( 'stfooterlogo' ) ); ?>"

<?php ampimagesize( getoption( 'stfooterlogo' ), array(PHPINTMAX, 80) ); ?> layout="fixed" width="500" height="125"></amp-img>

<?php else: //フッター用ロゴ画像が無い時 ?>

<?php if ( getoption( 'stlogoimage' ) && ( stheaderfooterlogo() ) ) : //ヘッダーロゴ画像があり併用する時 ?>

<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo escurl( getoption( 'stlogoimage' ) ); ?>"

<?php ampimagesize( getoption( 'stlogoimage' ), array(PHPINTMAX, 80) ); ?> layout="fixed" width="500" height="125"></amp-img>

<?php else : //ロゴ画像が無い時 ?>

<?php echo escattr( getbloginfo( 'name' ) ); ?>

<?php endif; ?>

<?php endif; ?>

<?php if ( ! ishome() || ! isfrontpage() ) : ?>

</a>

<?php endif; ?>

</h3>

<p>

<a href="<?php echo escurl( homeurl( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>

</p>

<?php if ( false ): // 未対応 通常ページ用 ?>

<?php gettemplatepart( 'st-header-widget', 'amp' ); //電話番号とヘッダー用ウィジェット ?>

<?php endif; ?>

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

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

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

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

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

 

 

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


にほんブログ村

  • B!