ストークにアドセンスのインフィード広告を表示する方法

こんにちは、龍一です!

 

Googleアドセンスにてインフィード広告を設置できるようになったので、設置する方法を解説していきたいと思います。

HTML・CSS・PHPなど全く分からない自分でもできたので、記事通り進めて行くと簡単にできると思います。

作業内容はコピペだけなので、安心してください。ただ、ストークを使って設置方法を解説していくので、他のテーマは少し違うかもしれません。

 

インフィード広告の作成

赤枠内の「広告ユニット」をクリックします。

 

赤枠内の「新しい広告ユニット」をクリックします。

 

赤枠内の「インフィード広告」をクリックします。

 

広告のデザインは、「上部の画像」・「横の画像」・「上部のタイトル」・「テキストのみ」の4種類あります。

ブログのレイアウトに合わせて選んでください。

 

青枠内の「広告ユニット名」は、どこに広告を貼っているかが分かるような名前を付けた方がいいと思います。

緑枠内の「グローバルオプション」は、文字の色やフォントの大きさなどが変更できるので、広告のデザインを変更したい方は調整してください。

ユニット名・デザインの変更が終わったら、赤枠内の「保存してコードを取得」をクリックします。

 

赤枠内にコードが作成されたと思いますが、コピーはまだしません。このコードをテーマファイル内のPHPに設置するのですが、まだPHPの編集をしていないので先に編集をします

コードの画面は表示しておくか、「作業完了」をクリックして画面を閉じます。閉じた場合は、使用するときに広告ユニットからコードを取得して使用できます。

 

PHPの編集

外観から、赤枠内の「テーマの編集」をクリックします。

[aside]PHPファイルを編集するので、念のために編集前にバックアップしておいた方がいいと思います。自分はめんどくさかったので、バックアップはしませんでした(笑) [/aside]

 

編集するテーマを「stork」にして、赤枠内の「選択」をクリックします。

 

ストークは、「シンプル」・「ビッグ」・「マガジン」・「カード」の4種類のレイアウトがあります。

使用しているレイアウトをクリックしてください。

[aside type=”boader”]シンプル:parts_archive_simple.php

カード:parts_archive_card.php

マガジン:parts_archive_magazine.php

ビッグ:parts_archive_big.php [/aside]

 

ここでは、シンプルを使って解説していきます。

赤枠内の「<?php if (have_posts()) : while (have_posts()) : the_post(); ?>」と書かれたコードがファイルの上の方にあると思います。このコードの上に以下のコードをコピペしてください。

[aside type=”boader”]<?php
$ads_infeed = ‘4’; //何番目に表示したいか
$ads_infeed_count = ‘1’;
?> [/aside][aside]「$ads_infeed = ‘4’; //何番目に表示したいか」は何番目に表示するかなので、4の数字を変更すると表示させたい位置に変えることができます [/aside]

 

次に先ほどの「<?php if (have_posts()) : while (have_posts()) : the_post(); ?>」コードの下に以下のコードをコピペしてください。

[aside type=”boader”]<?php
if($ads_infeed_count == $ads_infeed){
?>

<!– ここに取得した広告コードをいれる –>

<?php
}
$ads_infeed_count++;
?> [/aside][aside]「<!– ここに取得した広告コードをいれる –>」の下にアドセンスのコードをコピペします [/aside]

 

こんな感じになると思います。

 

表示確認

問題なく設置できたら、このように表示されます。

[aside]初めて設置した場合は、30分~1時間くらい空白になると思います。表示されるまで待ちましょう。 [/aside]

 

もちろん、スマホにも表示されます。

 

インフィード対応した広告がない場合は、レクタングルなどの広告が表示されます。