先日、こちらの記事で、WordPressに独自ウィジェットを追加する方法について書きましたが、アドセンスの管理をするなら、広告専用のウィジェットがあれば、より便利かなと思ったので、実際に作ってみました。
公式テーマのTwenty Seventeen をカスタマイズしていますが、他のテーマでも応用が効くと思うので、参考になさってください。
広告専用ウィジェットを自作する
広告専用ウィジェットを自作する前に、まずは、Twenty Seventeenのレイアウトを確認しておきましょう。以下は、パソコンで見たときのレイアウトです。
右サイドバー・２カラムのオーソドックスなレイアウトですね。こちらのレイアウトに広告専用のウィジェットをふたつ加えていきます。
コンテンツ（本文）の最下部とサイドバーの最上部の二箇所にウィジェットを追加します。
作業の手順は、
- functions.php でウィジェットを追加登録する
- 登録したウィジェットを呼び出す
これだけで実装可能です。それでは初めてみましょう。
functions.php でウィジェットを登録
まずは、ウィジェットの追加登録から始めます。
ウィジェット機能を新たに追加するため、fuctions.phpに以下を追記してください。
register_sidebar( array(
'name'=>'アドセンス/Bottom',
'id' => 'adsence',
'description' => '本文末尾にアドセンスを設置するウイジェット。',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<div>',
'after_title' => '</div>',
));
register_sidebar( array(
'name'=>'アドセンス/Sidebar',
'id' => 'adsence02',
'description' => 'サイドバーTopにアドセンスを設置するウイジェット。',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<div>',
'after_title' => '</div>',
));この記述だけで、すでにウィジェットはふたつ追加されています。しかし、どこで表示するか指定してあげないと、ちゃんと機能してくれません。
コンテンツ最下部に一つ目のウィジェットを設置
ウィジェットを機能させるためには、表示する場所を二箇所指定してあげます。
まずは、コンテンツ（本文）の最下部にウィジェットエリアを指定していきましょう。
Twenty Seventeen の場合、single.php の23行目にある
get_template_part( ‘template-parts/post/content’, get_post_format() );
の次に、ウィジェットを呼び出すコード、
dynamic_sidebar(‘adsence’);
を加えます。
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/post/content', get_post_format() );
/*アドセンスのためのウィジェットです*/
dynamic_sidebar('adsence');
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
the_post_navigation( array(
'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
) );
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
</div><!-- .wrap -->
<?php get_footer();
サイドバー最上部にウィジェットを追加
次に、サイドバーの最上部にウィジェットを追加します。
今度は、sidebar, php を開いてください。
<aside id=”secondary” class=”widget-area” role=”complementary”> と
<?php dynamic_sidebar( ‘sidebar-1’ ); ?> の間に
<?php dynamic_sidebar(‘adsence02’); ?> を追記します。
<?php
/**
* The sidebar containing the main widget area
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<!--アドセンスのためのウィジェットです-->
<?php dynamic_sidebar('adsence02'); ?>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
以上で、広告専用ウィジェットエリアの自作完了です！
管理画面で、ちゃんと機能が追加されているか確認してみましょう。
うまくいきました！思った通りウィジェットスペースを追加できたら、テキストウィジェットをドラッグ＆ドロップして広告コードを書き込みます。
これで、アドセンス広告の管理がスッキリいけそうです。