WP QUADSとAdd QuickTagを使って簡単に広告を設置する

ここではアドセンスのサイトで生成した広告コードを、
WP QUADSを使って簡単にサイト内に設置する方法を解説します。

WP QUADSを使って出来ること

WP QUADSを使わなくても、
アドセンスのサイトで生成した広告コードをそのまま貼り付ければ、
サイト内にアドセンス広告を表示させることができます。

ですが、毎回毎回こんなに長いコードを打ち込むのは非常に手間です。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- あなたが設定した広告名 -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-個別の番号"
 data-ad-slot="個別の番号"
 data-ad-format="auto"
 data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

WP QUADSでは10個の広告コードを登録することができ、
「ショートコード」で記事内に挿入することが可能になります。

更にはそのショートコードをAdd QuickTagに登録すれば、
ボタン一つで記事内の任意の場所に広告を設置することが可能になります。

つまりWP QUADSはめちゃくちゃ長い広告コードを、
最終的にはボタン一つで記事内に挿入させるためのプラグイン。

https://pj-freestyle.com/shortcode-about/

https://pj-freestyle.com/plugin-addquicktag/

WP QUADSの使い方

では実際にWP QUADSに広告コードを登録していきましょう。

WP QUADSの設定画面に進む

WP QUADSの設定は、
WP管理画面のWP QUADS→Ad Settingsから行います。

Ad Settingsに進んだらAD CODEのタブをクリックします。

するとAd1〜Ad10までのそれぞれのタブが表示されるので、
Ad1から順番に使っていきましょう。

Ad1を開いたら「Plain Text/HTML/JS」を選択します。

広告コードを登録する

それではAd1に広告コードを登録しましょう。

空欄のコード記述箇所に、
アドセンスのサイトで作成した広告コードをコピペします。

基本的にはこちらの記事にある、
カスタマイズした広告コードを使っていきます。

https://pj-freestyle.com/adsense-responsive/

アドセンスを中央寄せにする&スポンサーリンク表記

デバイス別に最適なサイズの広告が表示されるように
広告コードのカスタマイズを行ったら、

• その広告を中央寄せに表示させる
• 広告に「スポンサーリンク」の表記をつける

さらにこの２つのカスタマイズを行っていきます。

①アドセンスを中央寄せで表示する

まずはアドセンス広告を中央寄せで表示するための
コードの追記方法です。

こちらは広告コードを<center></center>のタグで囲えばOKです。

<center>
<style>
.レスポンシブ { width: 300px; height: 250px; }
@media(min-width: 340px) { .レスポンシブ { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ -->
<ins class="adsbygoogle レスポンシブ"
 style="display:block"
 data-ad-client="ca-pub-個別の番号"
 data-ad-slot="個別の番号"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>

②スポンサーリンクの表記をつける

アドセンス広告の前に読者が「これは広告だ」、
と認識できるようにするための一文を追記します。

Googleはこのラベル表記を推奨してはいますが必須ではなく、
明記する場合は「スポンサーリンク」もしくは「広告」の2種類のみ許可されています。

広告のラベル表示

ここでは「スポンサーリンク」のラベルを追記します。

先ほどの広告コードの一番先頭に以下のコードを追記します。

<center>Sponsored Link</center>

• デバイス別に最適なサイズの広告を表示させ
• その広告を中央寄せで表示させ
• その広告の手前にスポンサーリンクの表記をさせる

この3つのカスタマイズを完了した、
最終的なレスポンシブ広告のコードは以下の通りです。

<center>スポンサーリンク</center> 
<center>
<style>
.レスポンシブ { width: 300px; height: 250px; }
@media(min-width: 340px) { .レスポンシブ { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ -->
<ins class="adsbygoogle レスポンシブ"
 style="display:block"
 data-ad-client="ca-pub-個別の番号"
 data-ad-slot="個別の番号"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>

ここまで出来たら「変更を保存」をクリックしましょう。

コードの記入箇所以下にある、に
Layoutなどの項目は特に変更する必要はありません。

WP QUADSへのコード登録完了

これでWP QUADS側での、
広告コードの設定・登録は完了しました。

これで以下の箇所にあるショートコードで、
登録した広告コードを記事内に挿入することが可能になりました。

このショートコードを記事作成画面にコピペすると、
このようにアドセンス広告が表示されます↓

自動挿入は好みで

ちなみにWP QUADSのGENERAL&POSITION画面では、
指定した箇所に自動的に登録した広告を表示させるための設定ができます。

高いクリック率をキープするための広告表示箇所は
こちらの記事で紹介したとおりです。

https://pj-freestyle.com/adsense-layout/

このうち、見出し1の後と記事下は
以下の2つにチェックを入れれば自動で広告が表示されるようになります。

とても便利で広告挿入の手間が省ける機能なのですが、
実は私はこの自動挿入は使っていませんでした。

理由は例外的にその場所に広告を表示させたくない場合でも、
広告が表示されてしまうからです。例えば…

などなど。

次に紹介するAdd QuickTagを使えば広告挿入もボタン一つで終わるので、
特に自動挿入の機能を使わなくても面倒くささを感じることはありませんでした。

上記を踏まえて自動挿入を使うかどうかは個人の好みで判断してください。

Add QuickTagに登録する

WP QUADSに広告コードを登録して、
そのコードを表示させるためのショートコードを取得したら、
続いてそのショートコードをAdd QuickTagに登録しておきましょう。

そうすると毎回ショートコードを記述する必要がなく、
記事作成画面内のボタン一つでショートコードが呼び出せるようになります。

以下の記事を参考に、
WP QUADSのショートコードをAdd QuickTagに登録しておきましょう。