AFFNIGER5のAMPページに「記事内広告」を表示させ、さらに横幅をレスポンシブに変更する方法をご紹介します。
AMPページに「記事内広告」を表示させる方法
AFFNIGER5のAMPページに「記事内広告」を表示させるには、記事内広告をオリジナルショートコードにセットし、「functions-amp.php」ファイルの「adsense」を「originalsc」に書き換えます。
あとは、コンテンツ内の「記事内広告」を表示させたい位置に、オリジナルショートコードをセットするだけです。
詳しくは、以下の記事を参考にしてください。
-
-
AFFINGER5で好きな場所にAdSense「記事内広告」を表示する方法
続きを見る
-
-
AFFNIGER5のAMPページに「記事内広告」を表示させるカスタマイズ
続きを見る
AMPページの「記事内広告」をレスポンシブに変更する方法
「originalsc」にセットした記事内広告は、300×250サイズに固定されているので、この横幅をレスポンシブに変更します。
横幅をレスポンシブに変更するには、ファイル「st-ad-amp.php」の幅を変更します。
手順は以下の通り。
- サーバーのファイルマネージャーにログイン
- st-ad-amp.phpに移動
- 「width="300"」を書き換える
サーバーのファイルマネージャーにログイン
ファイルを書き換えるので、サーバーのファイルマネージャーにログインしてください。
st-ad-amp.phpに移動
ファイルマネージャーログインしたら、AFFINGER5の「st-ad-amp.php」ファイルに移動します。
場所は、「public_html」>「wp-content」>「themes」>「affinger5」>「st-ad-amp.php」です。
「width="300"」を書き換える
st-ad-amp.phpの中に、
<amp-ad type="adsense" data-ad-client="ca-pub-<?php echo esc_js( $ad_client ); ?>" data-ad-slot="<?php echo esc_js( $ad_slot ); ?>" width="300" height="250"> </amp-ad>
があるので、
<amp-ad type="adsense" data-ad-client="ca-pub-<?php echo esc_js( $ad_client ); ?>" data-ad-slot="<?php echo esc_js( $ad_slot ); ?>" layout="fixed-height" height="250"> </amp-ad>
に変更します。
横幅(width)が300に固定されているのをレスポンシブに変えました。
まとめ
AFFNIGER5のAMPページに「記事内広告」を表示させるには、まずは、記事内広告をオリジナルショートコードにセットし、「functions-amp.php」ファイルの「adsense」を「originalsc」に書き換えます。
次に、コンテンツ内の「記事内広告」を表示させたい位置に、オリジナルショートコードをセットします。
さいごに、ファイル「st-ad-amp.php」のコードをレスポンシブに変更します。
ちなみに、このカスタマイズはAdSenseヘルプの「レスポンシブ AMP 広告コードを修正する方法」に基づきましたが、ポリシー違反にならないという保証はありません。
-
-
AFFINGER5のAMPページに3種類のAdSense広告ユニットを表示させる方法
続きを見る