Twenty Nineteenの記事下にアドセンスを追加する方法【直接設置Ver】

今回はTwentyNineteenにアドセンス広告を設置する方法です。
第一弾としてまずは、記事本文の下にアドセンスを設置していきたいと思います。

アドセンスを設置するためには、2通りの方法があります。

ウィジェットエリアを追加してアドセンスを設置する方法
設置したい個所に関するphpファイルに直接広告コードを入力する方法

今回は「phpファイルに直接広告コードを入力する方法」についてご紹介していきます。

ウィジェットエリアを追加してアドセンスを設置する方法についてはまた後日ご紹介したいと思います。

子テーマ必須です！

ファイルを編集していきますので、毎度のことですが、子テーマを導入してからカスタマイズしていきましょう！

TwentyNineteenの子テーマの作り方はこちら

子テーマがどのような機能かわからない場合はこちら

設置する個所

今回のカスタマイズで以下の個所にGoogle Adsenseの広告を設置します。

本文最後にある日付等のメタ情報のすぐ下です！
ここにアドセンスを追加します。

使用するphpファイル

ウィジェットエリアを追加して広告を設置する方法と、phpファイルに直接広告コードを設置する方法のどちらの方法も「content-single.php」というファイルのみを使用します。

content-single.phpは親テーマファイルの【TwentyNineteen/template-parts/content/content-single.php】にありますので、FTPソフトなどを使用してアップロードしておきましょう。
なお、content-single.phpをアップロードする際には、「content-single.php 」のファイルの他にその途中にある「template-parts」と「content」のファルダも一緒にアップロードするように注意しましょう。

このように【外観＞テーマの編集】で以下のような階層になっていれば問題ないです。

このcontent-single.phpに広告コードを追加します。

phpファイルに直接広告コードを設置する方法

基本的にはコピペですることができ、広告コードを取得したらすぐに設置できる方法です。

メリットとして設置が簡単であるということが言えますが、一方デメリットとしてはアドセンスの広告ユニット変更する場合は、いちいちそのファイルを編集しなければいけないという手間があります。

広告コードを設置する

こちらに設置する広告ユニットとしていくつか考えられますが、今回は例として「記事内広告」のユニットを追加したいと思います。

基本的にどの広告ユニットでも大丈夫ですので、自分が設置したい広告ユニットのコードを取得しましょう。

アドセンスから広告コードをコピーします。

コピーしたコードを content-single.php にペーストします。
設置する個所ですが、 content-single.php の最下部にある、</article><!– #post-${ID} –>の上に広告コードをペーストしてください。

		wp_link_pages(
			array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
				'after'  => '</div>',
			)
		);
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php twentynineteen_entry_footer(); ?>
	</footer><!-- .entry-footer -->

	<?php if ( ! is_singular( 'attachment' ) ) : ?>
	<?php get_template_part( 'template-parts/post/author', 'bio' ); ?>
	<?php endif; ?>
<!--ここにアドセンス広告コードをペーストする-->
</article><!-- #post-${ID} -->

ここで注意したいのがアドセンスを表示させる場合は、広告であることを表示しなければ規約違反になってしまいます。
そのため、その表示を付けるため、上記で設置したコード上下に以下のようなコードを追記してください。

<div class="underad">
<p>スポンサーリンク</p>
<!--ここが設置した広告コード-->
</div>

完成形としてはこのようになります。

		wp_link_pages(
			array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
				'after'  => '</div>',
			)
		);
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php twentynineteen_entry_footer(); ?>
	</footer><!-- .entry-footer -->

	<?php if ( ! is_singular( 'attachment' ) ) : ?>
	<?php get_template_part( 'template-parts/post/author', 'bio' ); ?>
	<?php endif; ?>
<div class="underad">
<p>スポンサーリンク</p>
<!--ここに広告コード-->
</div>
</article><!-- #post-${ID}-->

うまくいったらこのように表示されます。

このままでもいいですが、見た目があまり美しくない…
cssで見た目を整えていきます。

style.cssを編集する

当記事では、style.cssを編集して以下の個所を整えていきます。

広告の横幅を記事本文の幅と同じにする
「スポンサーリンク」の文字を中央に寄せる

コード公開

当記事のカスタマイズを適用させるには、以下のコードをstyle.cssにコピペしてください。

.underad{
	margin:calc(2 * 1rem) 1rem;
	text-align:center;
}
@media screen and (min-width: 481px){
.underad{
	margin:1rem calc(10% + 60px) calc(3 * 1rem);
	max-width:calc(8 * (100vw / 12) - 28px);
}
}
@media screen and (min-width:1168px){
.underad{
	max-width:calc(6 * (100vw / 12) - 28px);
}
}

このようになります。