ウィジェット機能を有効にし、複数のウィジェットエリアを定義します。register_sidebars()

ウィジェットエリアの設定を工夫する事で、サイト管理を簡単にできるようになります。
Content Width / Theme Setup / CSS&JS に並ぶfunctions.php4大設定の一つです。

仕様

register_sidebars()の仕様

<?php register_sidebars( $number, $args ); ?>

パラメータ/配列	初期値	説明
$number	1	作成するサイドバーの数
$args	（なし）
$args(name)	Sidebar %d	サイドバー名
$args(id)	sidebar	サイドバーのid
$args(description)	（空）	管理画面上のサイドバー名に説明が表示されます。
$args(class)	（空）	ウィジェットのHTMLに割り当てるCSSクラス名
$args(before_widget)	<li id=”%1$s” class=”widget %2s”>	ウィジェットの前に入る文字列 %1$s : ウィジェットの名前+番号 %2$s : ウィジェットの名前
$args(after_widget)	</li>	ウィジェットの後に入る文字列
$args(before_title)	<h2 class=”widgettitle”>	タイトルの前に入る文字列
$args(after_title)	</h2>	タイトルの後に入る文字列

初期値

<?php
	register_sidebars( 1, array(
		'name'          => __( 'Sidebar %d', 'textdomain' ),
		'id'            => 'sidebar',
		'description'   => '',
		'class'         => '',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget'  => '</li>',
		'before_title'  => '<h2 class="widgettitle">',
		'after_title'   => '</h2>',
	);
?>

※サイドバーの数が1の場合、2行目の%dが不要です。

sがつかない、register_sidebar()関数について

こうなります。

<?php register_sidebar( $args ); ?>

sがつく、register_sidebars()との違いは、$numberが無くなります。
表示の方のコードは変わりません。

基本的な使い方と出力内容

使い方

functions.phpに書く事で、ウィジェット機能を有効にします。

function wpqw_widgets_init() {
	register_sidebars();
}
add_action( 'widgets_init', 'wpqw_widgets_init' );

表示させたい箇所に、下記のコードを追加します。

<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar() ) : ?><?php endif; ?>

出力されるHTML

<li id="widget_name-(連番)" class="widget widget_name">
	<h2 class="widgettitle">ウィジェットのタイトル</h2>
	*** ウィジェットによって異なる内容が表示されます。 ***
</li>

ウィジェットをウィジェットエリアに追加時にタイトルを設定しなかった場合、ウィジェットによってウィジェット名が入る場合と、何も入らずh2タグも出力されない場合があります。

装飾用CSSクラス

.widget {}
.widget_name {} /* ウィジェットによって異なる */
.widgettitle {}
/* 追加でウィジェット毎に異なるクラスが必要です */

カスタム例

※翻訳関数は省略しています・・・

1つだけ設定する場合

1つだけ設定する場合、nameの%dが不要です。


function wpqw_widgets_init() {
	register_sidebars( 1, array(
		'name'          => 'サイドバー',
		'id'            => 'sidebar',
		'description'   => '説明が入ります',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
add_action( 'widgets_init', 'wpqw_widgets_init' );

表示用のコード
sidebar.phpなどで使用できます。

<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'sidebar' ) ) : ?><?php endif; ?>

出力内容

<div id="widget_name-(連番)" class="widget widget_name">
	<h3 class="widget-title">ウィジェットのタイトル</h3>
	*** ウィジェットによって異なる内容が表示されます。 ***
</div>

ウィジェットエリアを複数設定します

function wpqw_widgets_init() {
	register_sidebars( 2, array(
		'name'          => 'サイドバー %d',
		'id'            => 'sidebar',
		'description'   => '表示はサイドバー1は上部・サイドバー2は下部に表示されます。',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
	register_sidebars( 3, array(
		'name'          => 'フッター %d',
		'id'            => 'footer',
		'description'   => '表示はフッター1から順に左から表示されます。',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'wpqw_widgets_init' );

表示用のコード
sidebar.phpやfooter.phpなどで使用できます。

<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'sidebar' ) ) : ?><?php endif; ?>
<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'sidebar-2' ) ) : ?><?php endif; ?>
<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'footer' ) ) : ?><?php endif; ?>
<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'footer-2' ) ) : ?><?php endif; ?>
<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'footer-3' ) ) : ?><?php endif; ?>

ウィジェットエリアそれぞれにクラスを設定する方法

is_active_sidebar()を使用します。

<?php if ( function_exists( 'dynamic_sidebar' ) && is_active_sidebar( 'sidebar' ) ) : ?>
	<div class="sidebar sidebar-1">
		<?php dynamic_sidebar( 'sidebar' ); ?>
	</div>
<?php endif; ?>
<?php if ( function_exists( 'dynamic_sidebar' ) && is_active_sidebar( 'sidebar-2' ) ) : ?>
	<div class="sidebar sidebar-2">
	<?php dynamic_sidebar( 'sidebar-2' ); ?>
	</div>
<?php endif; ?>

仕様