【AFFINGER4】通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法

※こちらの記事は、下記ページ内の「アイキャッチ画像の下にアドセンスを追加する方法」を参考にしてくださった方にのみ該当するカスタマイズ方法となります。

上記のカスタマイズでは、AFFINGERのアイキャッチ画像を呼び出すテーマファイル「st-eyecatch.php」の最下部にアドセンスコードを追加していますが、このテーマファイルはAMPページ表示でも呼び出されるため、このように、使用不可の通常ページ用のアドセンスコードが表示されてしまうんですね...。
参考にしていただいていた方、申し訳ありません。

上記のように表示されてしまうアドセンスコードをAMPページのみ非表示に。最終的にはAMP用に作成したコードを追加して、下記のように正しく広告を表示する方法を順を追って説明していきたいと思います。
見本ページhttps://kanamii.jp/1514/amp/

※通常ページのみ同じ位置への広告表示方法として、WordPressダッシュボード→外観→ウィジェット→「投稿記事の上に一括表示」を利用して、レスポンシブサイズのアドセンスコードを追加する方法もありますが、広告サイズが一律で表示されないこともあるため、ここでは当ブログで実践しているカスタマイズ方法をお伝えしています。

ファイル名の変更と子テーマの作成

今回のカスタマイズは「st-eyecatch.php」と「single-amp.php」を編集します。

AFFINGERのアップデート時にカスタマイズ内容が消えてしまわないように子テーマを作成する作業にプラスして、今回はファイル名の変更作業があります。

1. ご自身のパソコンにあるAFFINGERの親テーマ内の「st-eyecatch.php」（アドセンスコードが入っていないもの）と「single-amp.php」の2つのファイルを右クリック→コピー→任意の場所（デスクトップなど）にペーストしてください。
2. 任意の場所にペーストしたファイルの「st-eyecatch.php」を右クリック→名前の変更→ファイル名の最後の拡張子の前に「-2」を追加して「st-eyecatch-2.php」に変更します。
3. 2つのファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
   作業終了後は、任意の場所にペーストした2つのファイルは削除してくださいね。

single-amp.phpの編集

WordPressダッシュボード→外観→テーマ→テーマの編集→「single-amp.php」（子テーマ）を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「アイキャッチ」と入力してマークされる下記部分を探してください。

AFFINGER4

AFFINGER5「WING」

上記コード内の 「st-eyecatch」の部分を「st-eyecatch-2」に変更してカスタマイズ完了です。

変更後のコードです。

AFFINGER4

AFFINGER5「WING」

簡単にカスタマイズ内容の解説

「single-amp.php」内でアイキャッチ画像の呼び出しに指定されていた「st-eyecatch.php」には、あらかじめカスタマイズで追加した通常ページのアドセンスコードが入っていました。

アドセンスコードが入っていない「st-eyecatch-2.php」というファイルを新規に作成して指定することで、カスタマイズ前のアイキャッチ画像のみの状態で表示されるようになります。

通常ページのスマホ表示と同じように、AMPページのアイキャッチ画像の下にアドセンス広告を表示するカスタマイズ方法は、別ページにて説明しています。

以上、AFFINGER4の通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法をご紹介しました。

いつも記事を参考にしてくださりありがとうございます。

関連記事