お知らせ
このページで紹介している機能はこれまで Nishiki Pro 製品版のみ利用可能でしたが「よりテーマの機能や便利さを知ってもらい、ワードプレスを使ったブログやウェブサイト運営を楽しみながら継続できるきっかけにして欲しい」という思いから、お試し版でも利用可能といたしました。
もし、お試し版をご使用いただき、気に入っていただけましたら、継続的なアップデートやサポートのサービスが利用できる「製品版」のご利用を検討ください。
Nishiki Pro は AMP 対応のテーマです。AMP ページにも Google AdSense などの広告コードを入れることができます。
以下に方法を書きましたのでご参考ください。
AMP ページに Google AdSense など広告コードを入れる方法
まず、ワードプレスの管理画面から「外観」→「カスタマイズ」を選択します。
次に「[Nishiki Pro]オプション」のパネルの選択します。
次に「AMP」のパネルの選択します。
下の画像のように AMP の設定項目が表示されます。必ず「テンプレート適用」にチェックが入っていることを確認してください。チェックが入っていないと動作しません。
広告の表示枠は、コンテンツ本文の前後 1 箇所ずつです。
また、この設定は上級者向けです。
amp-ad のページにサンプルコードが掲載されていますが、ある程度 HTML や AMP を理解されている方向けです。
以下にサンプルを掲載しましたので、ご参考ください。サポートが必要な場合は ユーザーコミュニティ までお寄せください。
サンプル設定例
1.AdSense のコードを入れる場合
「amp-ad を読み込む」にチェックを入れて、以下のようにサンプルコードを書きます。
サンプルコード（サイズ固定）
<amp-ad width=300 height=250
type="adsense"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxxxx">
</amp-ad>サンプルコード（レスポンシブ）
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxxxx"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>「data-ad-client（サイト運営者 ID）」と「data-ad-slot（広告ユニット ID）」は、以下のリンクを参考にして、ご自身の AdSense アカウントに合わせて数値を入れてください。
2.AdSense のコードを入れる場合（フライングカーペット）
「amp-fx-flying-carpet を読み込む」にチェックを入れて、サンプルコードを書きます。
サンプルコード
<amp-fx-flying-carpet height="300px">
<amp-ad width=300 height=600
type="adsense"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxxxx">
</amp-ad>
</amp-fx-flying-carpet>「<amp-fx-flying-carpet>〜<amp-fx-flying-carpet>」の中に amp-ad のコードを入れるイメージです。
3.AdSense のコードを入れる場合（フッター固定）
「amp-sticky-ad を読み込む」にチェックを入れて、以下のようにサンプルコードを書きます。
サンプルコード
<amp-sticky-ad layout="nodisplay">
<amp-ad width=320 height=50
type="adsense"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxxxx">
</amp-ad>
</amp-sticky-ad>「<amp-sticky-ad>〜<amp-sticky-ad>」の中に amp-ad のコードを入れるイメージです。
WordPress テーマ Nishiki Pro
「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。
ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。
ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。
