伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

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

投稿日:2017年3月14日 更新日:

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

【STINGER PLUS】アドセンスをアイキャッチ画像の下・見出し(h2)の前・記事下に設置する方法

STINGER8・AFFINGER4(AMPページへの対応を含む)でのカスタマイズ方法を追加しました。 無料WordPressテーマ「STINGER PLUS+」は、ウィジェットに各コードを追加するだ ...

続きを見る

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

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

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

スポンサーリンク

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

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

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

  1. ご自身のパソコンにあるAFFINGER4の親テーマ内の「st-eyecatch.php」(アドセンスコードが入っていないもの)と「single-amp.php」の2つのファイルを右クリック→コピー→任意の場所(デスクトップなど)にペーストしてください。
  2. 任意の場所にペーストしたファイルの「st-eyecatch.php」を右クリック→名前の変更→ファイル名の最後の拡張子の前に「-2」を追加して「st-eyecatch-2.php」に変更します。
  3. 2つのファイルをFTPで子テーマ内(affinger4-child)にアップロードして子テーマを作成してください。
    作業終了後は、任意の場所にペーストした2つのファイルは削除してくださいね。
WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...

続きを見る

今後のアップデートで、アイキャッチ画像とAMPに関わる部分の変更(親テーマのコードの変更)があった場合は、再度子テーマの作成とカスタマイズが必要になります。

single-amp.phpの編集

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

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

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

変更後のコードです。

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

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

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


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

【AFFINGER4】AMPページの記事タイトルの上(アイキャッチ画像の下)にアドセンスを追加する方法

WordPressテーマ「AFFINGER4」のAMPページの記事タイトル上(アイキャッチ画像の下)のファーストビューの位置に、高さを100pxに固定したレスポンシブサイズのアドセンス広告を追加するカ ...

続きを見る

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

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

関連記事

【AFFINGER4】AMP化方法の全手順をまとめました

WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...

続きを見る

【AFFINGER4】AMPページのアドセンスの中央寄せと「スポンサーリンク」のラベル追加方法

WordPressテーマ「AFFINGER4」のAMPページのアドセンス広告を中央寄せにする方法と「スポンサーリンク」のラベル表記を追加する方法をご紹介します。 WordPressダッシュボード→AF ...

続きを見る

【AFFINGER4】AMPページの最初の見出し(h2)の前にアドセンスを追加する方法

WordPressテーマ「AFFINGER4」のAMPページの最初の見出し(h2)の前にアドセンス広告を追加する方法をご紹介します。 見本ページhttps://kanamii.jp/1514/amp/ ...

続きを見る

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 AllRights Reserved Powered by AFFINGER4.