WordPressのウィジェットエリアを追加する dynamic

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 );

引数名	型	説明	デフォルト	必須
$number	int or string	名称、またはサイドバーのID	1

is_active_sidebar()の仕様

is_active_sidebar( $index );

引数名	型	説明	デフォルト	必須
$number	int or string	名称、またはサイドバーのID	1	○

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’ )で表示するといった形になります。

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