register_sidebar() で編集可能なウィジェットエリアを設置する【WordPress】

概要

ウィジェットとサイドバー（ウィジェットエリア）

カテゴリ一覧やアーカイブ、タグクラウド、ページリスト等の特定の機能を持った個々のブロックをウィジェットと呼び、サイト上でそれらが表示される領域をサイドバー、又はウィジェットエリアと言います。

テーマによってウィジェットエリアの位置や個数は異なります。

ウィジェット機能実装の流れ

管理メニューに「外観 > ウィジェット」が表示されている場合、使用中のテーマのウィジェット機能は有効になっています。

ウィジェットのメニューが表示されていない場合は次のような流れで有効にすることができます。

1. functsions.phpにregister_sidebar()関数でウィジェットを定義。
2. テンプレート側にdynamic_sidebar()で表示する。
3. 追加されたメニューからウィジェットの追加や削除、編集等の管理が可能に。

サイドバー（ウィジェットエリア）の設置手順

register_sidebar() でウィジェットエリアを定義

functions.phpにregister_sidebar()でサイドバーを定義することで、管理メニューに「外観 > ウィジェット」の項目が追加されます。ここでは主に表示に関する設定を行います。

見本の7～11行目はデフォルト値です。指定しなかった場合と同じ内容になります。

functions.php

<?php
function my_widgets_init() {
	register_sidebar(
		array(
			'name'          => 'ウィジェットエリア1',
			'id'            => 'sidebar-1',
			'description'   => '',
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => "</li>\n",
			'before_title'  => '<h2 class="widgettitle">',
			'after_title'   => "</h2>\n",
		)
	);
}
add_action( 'widgets_init', 'my_widgets_init' );
?>

指定可能なパラメータ

連想配列で以下のものを指定できます。

• name
  サイドバーの名称。分かりやすい名前を付けておくとサイドバーが複数になった場合に識別しやすくなります。
• id
  小文字半角英数で任意のIDを指定します。複数設置する場合は重複しないよう注意。
• description
  サイドバーの概要。管理画面で表示されます。
• before_widget
  ウィジェット直前のHTML。初期値：<li id="%1$s" class="widget %2$s">
• after_widget
  ウィジェット直後のHTML。初期値：</li>\n
• before_title
  ウィジェットタイトル直前のHTML。初期値：<h2 class="widgettitle">
• after_title
  ウィジェットタイトル直後のHTML。初期値：</h2>\n

ウィジェットエリアを表示するテンプレートファイルの編集

register_sidebar()で設定したIDを引数としてdynamic_sidebar()を実行します。

基本的な形

<?php
echo "<ul>\n";
dynamic_sidebar( 'sidebar-1' );
echo "</ul>\n";
?>

デフォルトでは<li>で書き出されるのでdynamic_sidebar()の前後に<ul>を追加する必要があります。

応用：状況に応じた書き方

ウィジェットが配置されている場合のみ表示

テンプレートファイル

<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
	echo "<ul>\n";
	dynamic_sidebar( 'sidebar-1' );
	echo "</ul>\n";
endif;
?>

is_active_sidebar()を使うとウィジェットが配置されているかどうかを判定できます。
この例ではIDがsidebar-1のウィジェットエリアにウィジェットが配置されている場合にのみ表示され、配置されていない場合は何も表示されません。

この書き方では<ul>が空になるのを防止できます。

常に表示したい箇所は分岐の外に

テンプレートファイル

<ul>
	<li>常に表示される要素</li>
	<li>常に表示される要素</li>
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
	dynamic_sidebar( 'sidebar-1' );
endif;
?>
</ul>

<ul>が空になることが無い場合はこのように書くこともできます。
2～3行目の<li>要素は常に表示され、ウィジェットの部分は状況に応じて表示されます。

<li>要素以外で書き出されるように変更する

functions.php

function my_widgets_init() {
	register_sidebar(
		array(
			'name'          => 'ウィジェットエリア2',
			'id'            => 'sidebar-2',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget'  => "</div>\n",
		)
	);
}
add_action( 'widgets_init', 'my_widgets_init' );

テンプレートファイル

<?php
if ( is_active_sidebar( 'sidebar-2' ) ) :
	dynamic_sidebar( 'sidebar-2' );
endif;
?>

before_widgetとafter_widgetを変更して<div>で出力されるようにした例です。
それに合わせてテンプレートファイルの<ul>を削除しています。

備考

register_sidebars()について

sidebar “s” とあるように複数のサイドバーを設定できる関数もありますが、私自身register_sidebars()を有効に使えていないこともあり、今回は紹介を見送りました。
効果的な使い方が分かればあらためて紹介したいと思います。

参考リンク

WordPress Codex 日本語版
register_sidebar() / register_sidebars() / dynamic_sidebar() / is_active_sidebar()