ウィジェットのエリアを作る方法

WordPressの「ウィジェット」機能にエリアを作成して
任意の編集を行う方法について紹介します。

WPのウィジェット

WP管理画面のメニューから「外観→ウィジェット」と選択するとサイトで利用するウィジェットを設定することができます。

使用しているテーマによってウィジェット機能が使えないものや、自作のテーマの場合は機能を有効にする必要があります。

管理画面から見るとこんな感じ。

ここに、新しくウィジェットのエリアを追加していきます。

ウィジェットを定義する

まずは、テーマファイルの functions.php に作成するウィジェットの定義を追加していきます。

function my_widgets_init() {
	register_sidebar(
		array(
			'name'          => 'New widgets area 1',
			'id'            => 'area-1',
			'description'   => '',
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => '</li>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
}
add_action( 'widgets_init', 'my_widgets_init' );

必要なコードはこのようになります。

必要なのは add_action( 'widgets_init', '任意の名前' ); と、register_sidebar() の設定になります。

それぞれの詳しい仕様については以下の公式ドキュメントから確認することができます。

https://developer.wordpress.org/reference/hooks/widgets_init/
https://developer.wordpress.org/reference/functions/register_sidebar/

パラメータ

register_sidebar() 内で設定できるパラーメータの一覧です。

テーマ内にウィジェットエリアを表示する設定を追加する

ウィジェットエリアの定義が完了したら、ウィジェットを設置したいテンプレートの任意の個所に呼び出しを記述します。

例えば、先ほど定義した area-1 を呼び出したい場合は次のように記述します。

<ul>
	<?php dynamic_sidebar( 'area-1' ); ?>
</ul>

デフォルトの設定でウィジェットの各要素は <li></li>で囲まれているため
呼び出しの前後で<ul></ul> を記述しています。

パラメーターで別の要素を設定した場合はそちらの合わせて適宜書き換えます。

管理画面からウィジェットを設定する

テーマの設定が完了したら、管理画面からウィジェットを設定しています。

WPのブロック要素を組み合わせて表示たい内容を作成します。

複数のウィジェットエリアを定義したい場合

複数のウィジェットエリアを定義したい場合は functions.php に次のように書きます。

function my_widgets_init() {
	register_sidebar(
		array(
			'name'          => 'New widgets area 1',
			'id'            => 'area-1',
			... 省略
		)
	);
	register_sidebar(
		array(
			'name'          => 'New widgets area 2',
			'id'            => 'area-2',
			... 省略
		)
	);
}
add_action( 'widgets_init', 'my_widgets_init' );

register_sidebar() を複数個設定し、それぞれのパラーメータを設定するようにします。