非常にシンプルなWordPressのテーマであるTwentyNineteen
シンプルであるがゆえに、使い方がわからない人にとっては不便なものになりえます。
前回こちらの記事でGoogle Adsenseを投稿記事の本文下に設置しました。
今回はこちらの記事のカスタマイズ結果は同じですが、ちょっと便利な機能を追加したうえで、記事本文下にアドセンスを追加する方法をご紹介します
その方法は「ウィジェットエリアを追加してアドセンスを設置する方法」です。
この方法でウィジェットエリアを追加すれば、アドセンス以外にも応用することができるので、おすすめします!
ちなみに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); } }
上記のコードを追記することで、ウィジェットエリアの横幅を記事本文の幅と同じにし、「スポンサーリンク」等の広告の標示文字を中央寄せにしています。
アドセンスの広告コードを追記する。
これでウィジェットを快適に使うことができるようになりました。
実際にウィジェットを使ってアドセンス等の広告を表示させてみましょう。
WordPressの管理画面から【外観>ウィジェット】でウィジェットを追加してきます。
アドセンスを追加する場合は、今回新設した「投稿記事本文下」に「カスタムHTML」のウィジェットを追加します。

カスタムHTMLのウィジェットは以下のように入力していきます。

タイトルには、広告の標示として表示させるタイトルを入力し、内容にはGoogle Adsenseなどの広告コードをそのままコピペしてください。
ちなみに当ブログでは、Google Adsenseの「記事内広告」使用しています。
レスポンシブを試してみましたが、ちょっと不格好になったため…
今回のカスタマイズがうまくできていたらこんな感じで表示されます。

まとめ
前回はそのまま広告コードをファイルに追加する方法を紹介しました。
この方法でも十分使えますが、個人的には、当記事のウィジェットエリアを追加する方法の方が、管理が楽ですし、広告以外にも利用できるためオススメです。
ウィジェットエリアの追加方法が知っておけば、別の個所にも簡単に追加できるので、皆様もやってみてください~