WelcartBasicのトップページにウィジェットエリアを設置する方法

ワードプレステーマ「Welcart Basic」のトップページにウィジェットエリアを設置する方法の備忘録。

ウィジェットエリアを設置する順番

1. functions.php にウィジェットエリア追加用コードを記述
2. front-page.phpにウィジェットエリア出力用コードを記述

functions.php に記述するコード

※子テーマで運用している場合は子テーマのfunctions.php に記述。

functions.php に下記コードを追加。

add_action(
	'widgets_init', 
	function(){
		register_sidebar(array(
			'id' => 'top_widget_001',
			'name' => 'トップページ',
			'description' => 'トップページウィジェットエリア1',
		));
	}
);

このコードを追加した時点でワードプレスの「外観」→「ウィジェット」を開くと以下のウィジェットエリアが追加されている、はず。

これだけではウィジェットエリアが表示されないので、ウィジェットエリアを表示させたい箇所に以下のコードを記述する。

front-page.phpに記述するコード

トップページ（front-page.php）にウィジェットを表示させたい箇所に以下のコードを記述。

<atop>
	<?php if(is_active_sidebar('top_widget_001')) : ?>
		<ul id="my_frontpage_widget">
		<?php dynamic_sidebar('top_widget_001'); ?>
		</ul>
	<?php endif; ?>
</atop>

これでトップページの任意の場所にウィジェットエリアが追加できる。

トップページに複数のウィジェットエリアを追加する場合

以下のコードをfunctions.php に記述する。

add_action(
	'widgets_init', 
	function(){
		register_sidebar(array(
			'id' => 'top_widget_001',
			'name' => 'トップページ1',
			'description' => 'トップページ1のウィジェットエリア',
		));
		
		register_sidebar(array(
			'id' => 'top_widget_002',
			'name' => 'トップページ2',
			'description' => 'トップページ2のウィジェットエリア',
		));
	}
);

あとはトップページ（front-page.php）にウィジェットを表示させたい箇所に以下のコードを記述。

「1箇所目」

<atop>
	<?php if(is_active_sidebar('top_widget_001')) : ?>
		<ul id="my_frontpage_widget">
		<?php dynamic_sidebar('top_widget_001'); ?>
		</ul>
	<?php endif; ?>
</atop>

「2箇所目」

<atop>
	<?php if(is_active_sidebar('top_widget_002')) : ?>
		<ul id="my_frontpage_widget">
		<?php dynamic_sidebar('top_widget_002'); ?>
		</ul>
	<?php endif; ?>
</atop>

これでトップページの任意の場所にウィジェットエリアが複数追加できる。