Googleアドセンス！広告の貼り方と場所は？コードはどこに書けばいい？小テーマを使う！

Googleアドセンス（AdSense）の審査に合格した嬉しさも束の間・・・

今度は、広告の表示のさせ方に苦戦中であります。

何故か、アドセンスの自動広告が上手く表示されない？
WordPressテーマ　Stinger8のウィジェット機能を使う！
問題は、ページトップと記事内（記事一覧内）に「Googleアドセンス広告」を表示させる方法？
子テーマを使う　header.php　itiran.php　style.css　を編集する！
「header.php」を編集する！
「itiran.php」を編集する！
プラグイン　Ad Inserter　の使い方！
まとめ

何故か、アドセンスの自動広告が上手く表示されない？

Googleアドセンスの管理画面にログインし、サイトに自動表示させる方法を選択しました・・・

が、何故かプレビュー通りに表示されません。

プレビューでは、下の図の様に表示されています。

自動広告用のコードの貼り付け場所は、プラグイン「Insert Headers and Footers」を利用しております。

Googleアドセンス登録申請時に「確認も取れている」ので、特に問題ない筈です・・・

インターネットで調べてみると、自動広告表示は、かなり高度なシステムであり、上手く表示されない場合があるとのことでした。

確かに、いくらGoogleの技術が凄いとは、他人が作った千差万別のブログ内に、「自動で広告を貼る」という技術は、難しそうな気がします。

ということで、止むを得ず手動でプレビュー画面の様に広告が表示される様に設定しましたので、その方法を記載します。

WordPressテーマ　Stinger8のウィジェット機能を使う！

私は、「Stinger8」を利用していますので、「Stinger8」のウィジェット機能を使います。

「Stinger8」のウィジェット機能では、サイドバートップとページ下に広告を貼ることができますので、まずはそこに貼り付けます。

ウィジェットの画面を開き、画面左の「カスタムHTML」を画面右の全ての「広告枠」にドラッグします。

ドラッグすると、「HTML」コードが、入力出来るようになりますので、手動用の「Googleアドセンスコード」（広告ユニット）を貼り付けます。

広告は、広告枠の上に「スポンサーリンク」を記載し、センタリングすることを忘れずに！

コードの書き方は、次のとおりです。スポンサーリンク

「Googleアドセンスコード」を貼り付ける際には、広告枠の上に「スポンサーリンク」と記載し、センタリングします。

<center>スポンサーリンク</center>
<center>

NNNNN　Googleアドセンスコード　NNNNNNNNNN

</center>

これで、サイドバートップとページ下（スマホ画面含む）に「Googleアドセンス広告」が表示されます。

問題は、ページトップと記事内（記事一覧内）に「Googleアドセンス広告」を表示させる方法？

「Stinger8」のウィジェット画面では、Googleアドセンス広告を「ページトップ」と「記事内（記事一覧内）」に表示させることができません。

しかし、ここは「どうしても貼りたい場所」です。

WordPressのテーマ「cocoon」であれば、割と自由に設定できる様です。

これから、ブログを始める方は、テーマを十分に吟味すると良いと思います。

止むを得ず、自力で解決します。

子テーマを使う　header.php　itiran.php　style.css　を編集する！

直接「WordPreess」のコードを触るのは、危険が伴いますので、「子テーマ」に必要なファイルをコピーして、そちらを編集します。

子テーマの作り方については、次の記事を参照してください。

「WordPressの「前へ」、「次へ」がはみ出る　直し方！

親テーマのフォルダ「Stinger8」から、子テーマのフォルダ「Stinter8-child」へ次のファイルをコピーします。

header.php

itiran.php

コピーの仕方については、「レンタルサーバーの管理画面」から、「ファイルマネージャ」を使って行うと安全です。

親テーマのフォルダは、次のとおり

ルートフォルダ　→　public_html　→　自分のドメイン名のフォルダ　→　wp-content　→　themes　→　親テーマ名のフォルダ

念の為、下図の様に「header.php」と「itiran.php」は、バックアップを作っておきましょう。

始めに、「ページトップ」に「Googleアドセンス広告」を表示させます。

「header.php」を編集する！

「header.php」を編集します。

「mixhost」の場合は、「ファイルマネージャ」から直接編集することができます。

「header.php」の一番下に、「Googleアドセンスコード」を追記します。

後から分からなくならない様に、追加したコードの前後に念の為に「コメントアウト」を記載しておきます。

<center>スポンサーリンク</center>
<center>

NNNNN　Googleアドセンスコード　NNNNNNNNNN

</center>

次に、「記事一覧」に「Googleアドセンス広告」を表示させます。

先ほど、「子テーマ」にコピーした、「itiran.php」を編集します。

「itiran.php」を編集する！

コードの一部を編集します。

場所は、「itiran.php」の最初の方です。

「the_post();」を「the_post() ; $loop_count++ ;」に変更します。

変更前

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

変更後

<?php if ( have_posts() ) : while ( have_posts() ) : the_post() ; $loop_count++ ; ?>

下のコードを、「itiran.php」の下の方に追加します。

後から分からなくならない様に、追加したコードの前後に念の為に「コメントアウト」を記載しておきます。

追加する場所は、「</dl>　～　<?php endwhile;>」の間です。

「$loop_count」の数字を、変えると記事一覧に挿入される広告の位置が変わります。

ブログランキングにご協力ください！

例では、記事一覧の1番目の下、4番目の下、7番目の下に表示されます。

<!-- ここから -->
<?php if ( $loop_count == 1 or $loop_count == 4 or $loop_count == 7) : ?>
<div class="itiran-ad">
<p>スポンサーリンク</p>
<!-- ここにアドセンスコード -->

NNNNNNNNNN　アドセンスコード　NNNNNNNNN

<!-- ここまで -->

「style.css」を編集します。

記事一覧内の広告のスタイルを統一する為に、「style.css」の最後に、次のコードを追記します。

/*--　記事内広告のスタイル　--*/
.itiran-ad { /* 広告用のボックス */
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #50C1A5;
}
.itiran-ad p { /* スポンサーリンクの文字 */
	font-size: 14px;
	line-height: 1em;
	color: #999;
	margin-bottom: 10px;
}