Twenty Nineteenのアドセンスを追加する方法【ウィジェットver.】

非常にシンプルなWordPressのテーマであるTwentyNineteen
シンプルであるがゆえに、使い方がわからない人にとっては不便なものになりえます。

前回こちらの記事でGoogle Adsenseを投稿記事の本文下に設置しました。

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

今回はこちらの記事のカスタマイズ結果は同じですが、ちょっと便利な機能を追加したうえで、記事本文下にアドセンスを追加する方法をご紹介します
その方法は「ウィジェットエリアを追加してアドセンスを設置する方法」です。

この方法でウィジェットエリアを追加すれば、アドセンス以外にも応用することができるので、おすすめします！
ちなみにGoogle Adsenseが利用できることを前提条件に説明しています。
基本コピペでできるので、初心者の方も身構えずに~
それではやっていきましょう~

子テーマを使いましょう~

functions.phpなどを編集するので、必ず子テーマを使用してください。
子テーマを使わないと、テーマのアップデートがあったときにカスタマイズが泡のように消えていきますよ~

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

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

ウィジェットエリアとは？

ウィジェットエリアはこんなものを指します。

WordPressの管理画面から【外観＞ウィジェット】でこちらの画面になります。
TwentyNineteenの場合はデフォルトの状態だと、フッターのみしか設定されていません。
ウィジェットエリアに「カスタムHTML」等のウィジェットを追加することで、手軽に広告や、テンプレートを設置することができます。

ちなみにTwentyNineteenに設定されているウィジェットエリアのフッターにウィジェットを追加すると、サイト上では以下の部分に追加されます。

この「フッター」のウィジェットエリアにウィジェットを追加していくことで、さまざまなコンテンツを手軽に表示させることができるのです。

今回はこのウィジェットエリアを投稿記事本文の下に追加し、GoogleAdsenseの広告ユニットを追加していきます。

ウィジェットエリアを追加する個所

今回のカスタマイズで、以下の個所にウィジェットエリアを追加していきます。

記事の本文下にある投稿日やカテゴリなどのメタ情報と前後の記事のナビゲーションの間に設置します。

ここにウィジェットエリアを追加することで、広告の他にも応用次第によって、関連記事やプロフィール等々簡単に載せることができるようになります。

ちなみに表示されるのは、「投稿」のみであり、「固定記事」では表示されないようになっています。

ウィジェットエリアを追加する

それでは実際にウィジェットエリアを追加していきます。
ウィジェットエリアを追加する流れはこんな感じです。

functions.phpにウィジェットエリアの詳細を入力
ウィジェットエリアを追加する個所のphpファイルにコードを追記
style.cssで見た目を整える

こんな流れです。

functions.phpにウィジェットエリアの詳細を入力

まずはfunctions.phpにウィジェットエリアの詳細を入力していきます。
複数のウィジェットエリアを追加することができるのですが、今回は投稿記事本文下に絞ったコードを例示します。

以下のコードをfunctions.phpにコピペしてください。

add_action(
	'widgets_init', 
	function(){
		register_sidebar(array(
			'id' => 'single_bottom',
			'name' => '投稿記事本文下',
			'description' => '投稿記事の本文直下にウィジェットを追加します',
			'before_widget' => '',
			'after_widget' => '',
			'before_title' => '',
			'after_title' => '',
		));
	}
);

ちなみに【’name’】がウィジェットの管理画面で表示されるウィジェットエリアの名前で、【description】がウィジェットエリアの説明文です。

この辺はお好みで変更してもかまいません。
エラーなく無事に編集できたらこのように、ウィジェットエリアが表示されます。

この状態でウィジェットを追加できますが、追加したところでまだ実際にサイト上に表示されません。
ちゃんと表示されるように表示させる個所のphpファイルを編集します。

ウィジェットエリアを追加する個所のphpファイルにコードを追記

今回は投稿記事本文下にウィジェットエリアを追加します。
投稿記事本文下にウィジェットエリアを追加するには、【content-single.php】というファイルを編集しますので、子テーマにファイルをアップデートしていない場合は、FTPソフトなどでアップロードしておきましょう。

ファイルを子テーマにアップロードする

【content-single.php】というファイルは親テーマの【template-parts/content/content-single.php】にあります。

アップロードする際の注意点として、親テーマのディレクトリ階層の通りにしたいので、必ず【template-parts/content /content-single.php】となるように、【template-parts】【content 】のフォルダも一緒にアップロードするようにしましょう。

無事にアップロードで来たら【外観＞テーマの編集】でこのような構造になっていることが確認できます。

コードを追記する

【content-single.php】のファイルをアップロードできたら、ファイルを編集していきます。

追加するコードはこちら

<aside class="add-widget-area single-undad">
	<?php
		if(is_active_sidebar('single_bottom')){
			dynamic_sidebar('single_bottom');
		}
	?>
</aside>

ちなみにコード上にsidebarと書かれていますが、サイドバーに追加しない場合もsidebarというコードを使用するので、気にしないでください。

このコードを【content-single.php】の下部にある、</article><!– #post-${ID}–>のすぐ上にコピペします。

以下【content-single.php】の下部のコード

		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; ?>
<!--以下が追加コード-->
<aside class="add-widget-area single-undad">
	<?php
		if(is_active_sidebar('single_bottom')){
			dynamic_sidebar('single_bottom');
		}
	?>
</aside>
<!--ここまで-->
</article><!-- #post-${ID}-->

コードを追記したら、ウィジェットを追加できるようになっています。

style.cssにコードを追記する

ちなみにウィジェットを追加した状態で広告を表示させると、こんな感じで、追加した箇所が荒れ狂っています。

これをstyle.cssにコードを追記して見た目を整えていきす。
style.cssに以下のコードをコピペしてください。

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

上記のコードを追記することで、ウィジェットエリアの横幅を記事本文の幅と同じにし、「スポンサーリンク」等の広告の標示文字を中央寄せにしています。