※こちらの記事は、下記ページ内の「アイキャッチ画像の下にアドセンスを追加する方法」を参考にしてくださった方にのみ該当するカスタマイズ方法となります。
-
-
【STINGER PLUS】アドセンスをアイキャッチ画像の下・見出し（h2）の前に設置する方法
STINGER8・AFFINGER4（AMPページへの対応を含む）でのカスタマイズ方法を追加しました。 無料WordPressテーマ「STINGER PLUS+」は、ウィジェットに各コードを追加するだ ...
上記のカスタマイズでは、AFFINGERのアイキャッチ画像を呼び出すテーマファイル「st-eyecatch.php」の最下部にアドセンスコードを追加していますが、このテーマファイルはAMPページ表示でも呼び出されるため、このように、使用不可の通常ページ用のアドセンスコードが表示されてしまうんですね...。
参考にしていただいていた方、申し訳ありません。
上記のように表示されてしまうアドセンスコードをAMPページのみ非表示に。最終的にはAMP用に作成したコードを追加して、下記のように正しく広告を表示する方法を順を追って説明していきたいと思います。
見本ページhttps://kanamii.jp/1514/amp/
※通常ページのみ同じ位置への広告表示方法として、WordPressダッシュボード→外観→ウィジェット→「投稿記事の上に一括表示」を利用して、レスポンシブサイズのアドセンスコードを追加する方法もありますが、広告サイズが一律で表示されないこともあるため、ここでは当ブログで実践しているカスタマイズ方法をお伝えしています。
スポンサーリンク
ファイル名の変更と子テーマの作成
今回のカスタマイズは「st-eyecatch.php」と「single-amp.php」を編集します。
AFFINGERのアップデート時にカスタマイズ内容が消えてしまわないように子テーマを作成する作業にプラスして、今回はファイル名の変更作業があります。
- ご自身のパソコンにあるAFFINGERの親テーマ内の「st-eyecatch.php」（アドセンスコードが入っていないもの）と「single-amp.php」の2つのファイルを右クリック→コピー→任意の場所（デスクトップなど）にペーストしてください。
- 任意の場所にペーストしたファイルの「st-eyecatch.php」を右クリック→名前の変更→ファイル名の最後の拡張子の前に「-2」を追加して「st-eyecatch-2.php」に変更します。
- 2つのファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
作業終了後は、任意の場所にペーストした2つのファイルは削除してくださいね。
-
-
WordPressのカスタマイズ ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】
前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...
single-amp.phpの編集
WordPressダッシュボード→外観→テーマ→テーマの編集→「single-amp.php」（子テーマ）を開きます。
パソコンの「Ctrlキー」+「F」で表示される検索欄に「アイキャッチ」と入力してマークされる下記部分を探してください。
AFFINGER4
|
1 |
<?php amp_get_template_part( 'st-eyecatch', 'amp' ); //アイキャッチ画像を挿入 ?> |
AFFINGER5「WING」
|
1 |
<?php if(trim($GLOBALS['stdata217']) === ''){ amp_get_template_part( 'st-eyecatch', 'amp' ); } //アイキャッチ画像を挿入 ?> |
上記コード内の 「st-eyecatch」の部分を「st-eyecatch-2」に変更してカスタマイズ完了です。
変更後のコードです。
AFFINGER4
|
1 |
<?php amp_get_template_part( 'st-eyecatch-2', 'amp' ); //アイキャッチ画像を挿入 ?> |
AFFINGER5「WING」
|
1 |
<?php if(trim($GLOBALS['stdata217']) === ''){ amp_get_template_part( 'st-eyecatch-2', 'amp' ); } //アイキャッチ画像を挿入 ?> |
簡単にカスタマイズ内容の解説
「single-amp.php」内でアイキャッチ画像の呼び出しに指定されていた「st-eyecatch.php」には、あらかじめカスタマイズで追加した通常ページのアドセンスコードが入っていました。
アドセンスコードが入っていない「st-eyecatch-2.php」というファイルを新規に作成して指定することで、カスタマイズ前のアイキャッチ画像のみの状態で表示されるようになります。
通常ページのスマホ表示と同じように、AMPページのアイキャッチ画像の下にアドセンス広告を表示するカスタマイズ方法は、別ページにて説明しています。
-
-
【AFFINGER4】AMPページの記事タイトルの上（アイキャッチ画像の下）にアドセンスを追加する方法
こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」のAMPページの記事タイトル上（アイキャッチ画像の下）のファーストビューの位置に ...
以上、AFFINGER4の通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法をご紹介しました。
いつも記事を参考にしてくださりありがとうございます。
関連記事
-
-
【AFFINGER4】AMP化方法の全手順をまとめました
WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...
-
-
【AFFINGER4】AMPページのアドセンスの中央寄せと「スポンサーリンク」のラベル追加方法
こちらのカスタマイズは、AFFNGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」のAMPページのアドセンス広告を中央寄せにする方法と「スポンサーリンク」のラベル表 ...
-
-
【AFFINGER4】AMPページの最初の見出し（h2）の前にアドセンスを追加する方法
コードの追加場所を「子テーマ」のfunctions-amp.phpに変更しました。（テーマのアップデートの際の再編集は必要なくなりました） こちらのカスタマイズは、AFFINGER5「WING」でも応 ...
-
-
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ
当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...
