WordPressでウィジェットエリアにウィジェットがなかったらウィジェットエリア自体を非表示にする

WordPressのウィジェットは様々な機能を管理画面上でドラッグアンドドロップで登録したり解除したりできるので便利ですよね。

最近では当たり前のようにテーマのいろんな場所にウィジェットエリアが設けてあったりして手軽に情報を載せたり外したりできます。

呼び出しも簡単で、ウィジェットエリア（ウィジェットを複数登録してある１セット）を呼び出すdynamic_sidebar(); という関数を書くだけです。

ただ、この関数はその中に入っているウィジェットを書き出すだけですので、通常はその外枠になるラッパーのDIVなどを予め書いておいてその中にこの関数を書きます。

ということは、そのエリアにウィジェットが１つもなかった場合は空のDIVがぽつんと存在することになりますね。

あまり気にする人は居ないかもしれませんが、その外側のDIVに対してマージンなどをセットしてレイアウトしている場合は変な空白だけがそこに存在することになります。

そこで、もしも指定したウィジェットエリアにウィジェットが１つも登録されていなかったらラッパー自体も表示しない…というよりもウィジェットエリアにウィジェットが１つ以上あるときだけラッパーも含めて出力させる、そんな方法があったら便利かもしれないかな？と思い調べてみました。

仕組みを考える

ウィジェットエリアにウィジェットがあるかどうかは呼び出されてるウィジェットの数を数えればよさそうですので、その路線で検索してみたところ、早速みつけました。

WordPressで登録されているウィジェットの数に応じたclassを出力する | Simple Colors

こちらで紹介されている方法ですと、ウィジェットの数を数えてその数をクラス名にして返す関数を作っていますので、これをほんの数ミリ改造すればよさそうです。

作ってみる

というわけで早速出来上がった関数部分コードがこちら。

function wp_isset_widets($index = 1,$echo = false) {
	global $wp_registered_sidebars;
	if (is_int($index)) {
		$index = "sidebar-$index";
	} else {
		$index = sanitize_title($index);
		foreach((array)$wp_registered_sidebars as $key => $value) {
			if (sanitize_title($value['name']) == $index) {
				$index = $key;
				break;
			}
		}
	}
	$sidebar_widgets = wp_get_sidebars_widgets();
	if (empty($wp_registered_sidebars[$index]) || !array_key_exists($index,$sidebar_widgets) || !is_array($sidebar_widgets[$index]) || empty($sidebar_widgets[$index])) return false;
	$result = count($sidebar_widgets[$index]);
	if ($echo) {
		echo $result;
	} else {
		return $result;
	}
}

function wp_isset_widets($index = 1,$echo = false) {

global $wp_registered_sidebars;

if (is_int($index)) {

$index = "sidebar-$index";

} else {

$index = sanitize_title($index);

foreach((array)$wp_registered_sidebars as $key => $value) {

if (sanitize_title($value['name']) == $index) {

$index = $key;

break;

}

$sidebar_widgets = wp_get_sidebars_widgets();

if (empty($wp_registered_sidebars[$index]) || !array_key_exists($index,$sidebar_widgets) || !is_array($sidebar_widgets[$index]) || empty($sidebar_widgets[$index])) return false;

$result = count($sidebar_widgets[$index]);

if ($echo) {

echo $result;

} else {

return $result;

}

殆どやってることは一緒ですね。文章を書くのが下手な自分が解説するより元記事読んだほうが100倍分かりやすいと思いますのでそちらにお任せします←

参考にしたコードではクラスとして書きだすために接頭辞や接尾辞をつけていますが、今回は純粋に数字だけ返すようにしています。そのほうが融通利きそうですので。

使い方

wp_isset_widetsの第一引数はサイドバーのIDまたは名前で、第二引数はechoするかreturnで返すかです。

具体的にはこんなかんじで使います。

<?php if (wp_isset_widets('Sidebar',false)): ?>
<div id="sidebar">
	<?php dynamic_sidebar('Sidebar'); ?>
</div>
<?php endif; ?>

<?php if (wp_isset_widets('Sidebar',false)): ?>

<?php dynamic_sidebar('Sidebar'); ?>

</div>

<?php endif; ?>

といってもサイドバーで使うことはあまりないかもしれませんが…ｗ

ウィジェットになにも入ってない場合は false が返るので、そのまま IF 文にぶちこんであげればウィジェットエリアに何かあるときは式が成立しラッパーとウィジェットエリアが出力されます。

また、登録されているウィジェットの数を戻り値として返します。なので、これまたあまり使い道はありませんが、こんな使い方もできます

<?php if (wp_isset_widets('Sidebar',false)): ?>
<div id="sidebar">
	<?php dynamic_sidebar('Sidebar'); ?>
	<p>このサイドバーには<?php wp_isset_widets('Sidebar',true); ?>個のウィジェットがあります</p>
</div>
<?php endif; ?>

<?php if (wp_isset_widets('Sidebar',false)): ?>

<?php dynamic_sidebar('Sidebar'); ?>

<p>このサイドバーには<?php wp_isset_widets('Sidebar',true); ?>個のウィジェットがあります</p>

</div>

<?php endif; ?>

こうすると、ウィジェットが全部表示し終わったあとに、このサイドバーには何個ウィジェットが登録されているかを視覚化できます。多分使うことはないですがｗ

現在製作中のテーマでは、ブログ全体にウィジェットエリアとして通知領域を作っているので、そこで利用しています。

別の関数で試す

ところで、これ以外の方法にも、 is_active_sidebar() 関数を使う方法もあります。

こちらも引数で指定したサイドバーが有効なら true を、そうでないなら false を返すので、同様の使い方ができます。

というか、この関数を知ってCodex見たら、今回やりたかったコトもろそのまんまなコードが載ってましたｗ

&lt;?php if ( is_active_sidebar( 'left-sidebar' ) ) : ?&gt;
	&lt;ul id="sidebar"&gt;
		&lt;?php dynamic_sidebar( 'left-sidebar' ); ?&gt;
	&lt;/ul&gt;
&lt;?php endif; ?&gt;

<?php if ( is_active_sidebar( 'left-sidebar' ) ) : ?>

<?php dynamic_sidebar( 'left-sidebar' ); ?>

</ul>

<?php endif; ?>

Function Reference/is active sidebar « WordPress Codex

最初からこっち気付いてれば良かったｗ

折角作ってみたので自作関数の方も載せてありますが、好きなほうを使っていいと思います。

ただ、 is_active_sidebar() だと、ウィジェットの数は返りませんので、例にあげたような内包するウィジェットの数を数えるなんて場合には使えませんが…。あんま機会はないとおもうけど…