WordPressのウィジェットエリアを追加する前編(register_sidebarについて)の続きになります。WordPressのウィジェットエリアを追加するやり方のregister_sidebar()の追加について紹介しました。今回は、register_sidebar()に追加したウィジェットエリアを使用しているWordPressテーマに表示する方法を紹介します。

テーマを表示するためにサンプルとしてTwenty Fifteenを使います。テーマに表示するための関数としてdynamic_sidebar()を追加します。

dynamic_sidebar()をWordPressテーマに追加する

dynamic_sidebar()はウィジェットエリアを表示するために使用する関数です。dynamic_sidebar()でウィジェットエリアを表示するには、register_sidebar()で追加したidを指定します。またdynamic_sidebar()が動いているかをチェックするには、is_active_sidebar()を使います。dynamic_sidebar()とis_active_sidebar()の仕様は以下の通りです。

dynamic_sidebar()の仕様

dynamic_sidebar( $number );
引数名説明デフォルト必須
$numberint or string名称、またはサイドバーのID1

is_active_sidebar()の仕様

is_active_sidebar( $index );
引数名説明デフォルト必須
$numberint or string名称、またはサイドバーのID1

dynamic_sidebar()・is_active_sidebar()の使い方

dynamic_sidebar()・is_active_sidebar()の使い方は以下の通りです。Twenty Fifteenのfooter.phpを追加にします。前回、register_sidebar()で追加した’content-widget’を表示させます。

footer.php
<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>
    </div><!-- .site-content -->
    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="site-info">
            <?php /* 追加分 */ ?>
                <?php if ( is_active_sidebar( 'content-widget' ) ) : ?>
                    <div class="content-widget" role="complementary">
                        <?php dynamic_sidebar( 'content-widget' ); ?>
                    </div>
                <?php endif; ?>
            <?php /* 追加分おわり */ ?>
            <?php
            /**
             * Fires before the Twenty Fifteen footer text for footer customization.
             *
             * @since Twenty Fifteen 1.0
             */
            do_action( 'twentyfifteen_credits' );
            ?>
            <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>">
                <?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?>
            </a>
        </div><!-- .site-info -->
    </footer><!-- .site-footer -->
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>

Twenty Fifteenのfooter.phpをまるっと入れてますが、17〜23行目にdynamic_sidebar()・is_active_sidebar()を追加しただけです。is_active_sidebar( ‘content-widget’ )は、register_sidebar()で追加した’content-widget’のウィジェットリストがあるかどうかをチェックし、ウィジェットがあれば、dynamic_sidebar( ‘content-widget’ )で表示するといった形になります。

ちゃんと追加ができれば以下のような形でページに表示ができるはずです。

ウィジェットの表示

まとめ

2回にわけてWordPressのウィジェットエリアの追加方法を紹介しました。レスポンシブで見やすくなったTwenty Fifteenとかウィジェットがつかえる場所が1箇所しかないものでも簡単に追加することができます。ウィジェットが使える場所を増やしたいときにはぜひ活用してください。