WordPressテーマ「AFFINGER4」のAMPページのアドセンス広告を中央寄せにする方法と「スポンサーリンク」のラベル表記を追加する方法をご紹介します。
WordPressダッシュボード→AFFINGER4管理→Google連携に関する設定→「AMP用のアドセンスコード」に入力したコードが適用される部分ですね。
2018年4月現在では、記事下のアドセンスは中央寄せがデフォルトとなっていますが、当ブログではAMPページの最初の見出し(h2)の前にもアドセンスを自動追加するカスタマイズを行っていますので、その関係で以下のカスタマイズを行っています。
記事下とショートコードを使用しているアドセンス広告に反映されるカスタマイズです。
見本ページhttps://kanamii.jp/1514/amp/
スポンサーリンク
子テーマの作成
今回のカスタマイズは「st-ad-amp.php」と「st-amp-css.php」を編集します。
AFFINGERのアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の2つの該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は新たに作成する必要はありません。
-
-
WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】
前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...
st-ad-amp.phpの編集
WordPressダッシュボード→外観→テーマ→テーマの編集→「st-ad-amp.php」(子テーマ)を開きます。
下の方にあるこの部分を見つけてくださいね。
1 2 3 4 5 6 7 |
<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> |
上記コードに中央寄せのコードとラベル表記を追加します。
最後の</div>を忘れずに。
1 2 3 4 5 6 7 8 9 10 |
<div align="center"> <div class="label"><p>スポンサーリンク</p></div> <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> </div> |
※AFFINGER5「WING」、及びAFFINGER4の新しいVerは、あらかじめ広告が中央寄せとなっていますが、最初の見出し(h2)の前にアドセンス広告を自動追加するカスタマイズの関係で上記コードを追加しています。
st-amp-css.phpにコードを追加
次に、WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」(子テーマ)を開きます。
最下部に下記コードを追加してカスタマイズ完了です。
追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。
1 2 3 4 5 |
/*アドセンスラベル ここから*/ .label p { margin-bottom:0; font-size:12px; } |
- 「スポンサーリンク」の文字の下の余白をゼロに指定
- 文字サイズを12pxで指定(数値はお好みで変更可能です)
パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。
-
-
【AFFINGER4】AMP化方法の全手順をまとめました
WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...
以上、AFFINGER4のAMPページのアドセンス広告を中央寄せにする方法と「スポンサーリンク」のラベル表記を追加する方法をご紹介しました。
最後までお付き合いくださりありがとうございます。
関連記事
-
-
【AFFINGER4】AMPページの記事タイトルの上(アイキャッチ画像の下)にアドセンスを追加する方法
こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」のAMPページの記事タイトル上(アイキャッチ画像の下)のファーストビューの位置に ...
-
-
【AFFINGER4】AMPページの最初の見出し(h2)の前にアドセンスを追加する方法
コードの追加場所を「子テーマ」のfunctions-amp.phpに変更しました。(テーマのアップデートの際の再編集は必要なくなりました) こちらのカスタマイズは、AFFINGER5「WING」でも応 ...
-
-
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ
当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...