WordPressで同一エリアのウィジェットエリア表示に応じたClassを出力する

えー、タイトルだけだとなんのこっちゃって感じですが、WordPressで登録されているウィジェットの数に応じたclassを出力するが、１つのウィジェットエリアに登録されているウィジェット数のclassを出力するのに対し、今回は、連続したウィジェットエリアにおいて、出力されるウィジェットエリアに応じたclass出力を行ってみようというものです。

例で言うと、Twenty Tenのフッターには、「フッターウィジェットエリア１」から「フッターウィジェットエリア４」までが存在していますが、全エリアになんらかのウィジェットを登録しておかないと、スペースができてしまい、バランスが悪い。これを、ウィジェットの登録状態に応じて自動的にウィジェットエリアの幅が変わるようにしてみます。

参考になるものとして、Twenty Ten のフッターウィジェットを表示する sidebar-footer.php に

is_active_sidebar( 'second-footer-widget-area' )

という記述があります。
これは version2.8 から利用できる関数で、引数で指定したウィジェットエリアの出力の有無を判定できます。この関数を用い、同一エリア内のウィジェットエリアの出力がある場合をカウントし出力するようにすれば、もう出来上がりです。

CODE 1

function wp_area_widget_num_class( $widgets, $prefix = 'area-widgets-', $suffix = '', $echo = true ) {
	
	if ( ! is_array( $widgets ) || ! count( $widgets ) ) {
		return false;
	}

	$widgets_in_area = 0;
	foreach ( $widgets as $index ) {
		if ( is_active_sidebar( $index ) ) {
			$widgets_in_area++;
		}
	}

	if ( $widgets_in_area ) {
		$area_widget_num_class = $prefix . $widgets_in_area . $suffix;
	} else {
		return false;
	}

	if ( $echo ) {
		echo $area_widget_num_class;
	} else {
		return $area_widget_num_class;
	}
}

これをテーマのfunctions.phpに記述し、テンプレートのウィジェットエリアのラッパー要素のclassに

<?php wp_area_widget_num_class( $area_widgets ); ?>

と記述すれば、classの出力がなされるようになります。

一応、これでテーマのテンプレートに wp_area_widget_num_class を追加すれば、ウィジェットエリアの表示に応じたclass出力はなされるようになりますが、Twenty Tenの場合、最後のウィジェットだけ margin-right: 0; が設定されており、幅調整をするときにも同じようにしないと、マージン分の空きができてしまうか、段落ちが発生しています。

#footer-widget-area #fourth {
	margin-right: 0;
}

そこで、各ウィジェットに最後のウィジェット出力だったら、tailというcssのclassを出力するようにしてみます。

CODE 2

function tail_class( $widgets, $current_widget, $class = 'tail' ) {
	if ( ! is_array( $widgets ) || ! count( $widgets ) ) {
		return false;
	}

	foreach ( $widgets as $index ) {
		if ( is_active_sidebar( $index ) ) {
			$tail = $index;
		}
	}
	
	if ( $tail == $current_widget ) {
		echo ' ' . esc_attr( $class );
	}
}

これも、テーマのfunctions.php に追加して、下記のように、テンプレートファイルの各ウィジェットエリアのclassとして追加します。

class="widget-area<?php tail_class( $area_widgets, 'first-footer-widget-area' ); ?>"

※ tail_classの第１引数は、エリアの出力順である必要があります。

あとはstyle.cssに、こんな感じで追加してみると、、

#footer .area-widgets-1 .widget-area {
    float: none;
    width: 940px;
}

#footer .area-widgets-2 .widget-area {
    width: 460px;
}

#footer .area-widgets-3 .widget-area {
    width: 300px;
}

#colophon #footer-widget-area .tail {
    margin-right:0;
}

ご覧の通り、エリアの表示数によって、自動的に幅が変わるようになります。

３エリア登録

２エリア登録

最後に変更したTwenty Tenのsidebar-footer.php の全ソースを載せておきます。

<?php
/**
 * The Footer widget areas.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>

<?php
	/* The footer widget area is triggered if any of the areas
	 * have widgets. So let's check that first.
	 *
	 * If none of the sidebars have widgets, then let's bail early.
	 */
	if (   ! is_active_sidebar( 'first-footer-widget-area'  )
		&& ! is_active_sidebar( 'second-footer-widget-area' )
		&& ! is_active_sidebar( 'third-footer-widget-area'  )
		&& ! is_active_sidebar( 'fourth-footer-widget-area' )
	)
		return;
	// If we get this far, we have widgets. Let do this.
	$area_widgets = array( 'first-footer-widget-area', 'second-footer-widget-area', 'third-footer-widget-area', 'fourth-footer-widget-area' );
?>

			<div id="footer-widget-area" role="complementary" class="widgets <?php wp_area_widget_num_class( $area_widgets ); ?>">

<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) : ?>
				<div id="first" class="widget-area<?php tail_class( $area_widgets, 'first-footer-widget-area' ); ?>">
					<ul class="xoxo">
						<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
					</ul>
				</div><!-- #first .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) : ?>
				<div id="second" class="widget-area<?php tail_class( $area_widgets, 'second-footer-widget-area' ); ?>">
					<ul class="xoxo">
						<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
					</ul>
				</div><!-- #second .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) : ?>
				<div id="third" class="widget-area<?php tail_class( $area_widgets, 'third-footer-widget-area' ); ?>">
					<ul class="xoxo">
						<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
					</ul>
				</div><!-- #third .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
				<div id="fourth" class="widget-area<?php tail_class( $area_widgets, 'fourth-footer-widget-area' ); ?>">
					<ul class="xoxo">
						<?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?>
					</ul>
				</div><!-- #fourth .widget-area -->
<?php endif; ?>

			</div><!-- #footer-widget-area -->