サイドバー（Sidebars）

サイドバーとは

サイドバーは、テーマのウィジェット化されたエリアのことです。ウィジェットエリアは、ユーザーが独自のウィジェットを追加できるテーマ内の場所です。テーマにサイドバーを含める必要はありませんが、サイドバーを含めることで、ユーザーはカスタマイザーやウィジェット管理パネルを通じてウィジェットエリアにコンテンツを追加できます。

ウィジェットは、最近の投稿をリストすることからライブチャットを行うことまで、さまざまな目的で使用できます。

「サイドバー」という名前は、ウィジェットエリアが通常、ブログの左側または右側に長いストリップとして作成されていた時代から来ています。今日、サイドバーはその元の名前を超えて進化しました。サイドバーは、ウェブサイトのどこにでも含めることができます。サイドバーをウィジェットを含む任意のエリアと考えてください。

サイドバーの登録

サイドバーを使用するには、functions.phpで登録する必要があります。

まず、register_sidebar()には、オプションとしてマークされているかどうかに関係なく、常に定義されるべきいくつかのパラメータがあります。これにはx、y、zが含まれます。

• name – サイドバーの名前。これは、ユーザーがウィジェットパネルで見る名前です。
• id – 小文字でなければなりません。これは、dynamic_sidebar関数を使用してテーマ内で呼び出します。
• description – サイドバーの説明。これは、管理ウィジェットパネルにも表示されます。
• class – ウィジェットのHTMLに割り当てるCSSクラス名。
• before_widget – 各ウィジェットの前に配置されるHTML。
• after_widget – 各ウィジェットの後に配置されるHTML。before_widgetからのタグを閉じるために使用されるべきです。
• before_title – 各ウィジェットのタイトルの前に配置されるHTML、例えばヘッダータグのようなものです。
• after_title – 各タイトルの後に配置されるHTML。before_titleからのタグを閉じるために使用されるべきです。

サイドバーを登録するには、register_sidebarとwidgets_init関数を使用します。

<?php
function themename_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
    register_sidebar( array(
        'name'          => __( 'Secondary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-2',
        'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li></ul>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}

サイドバーを登録することは、WordPressに新しいウィジェットエリアを外観 > ウィジェットに作成していることを知らせます。サイドバーを登録するための2つの関数があります：

• register_sidebar()
• register_sidebars()

最初の関数は1つのサイドバーを登録し、2番目の関数は複数のサイドバーを登録します。

サイドバーを個別に登録することをお勧めします。これにより、各サイドバーにユニークで説明的な名前を付けることができます。

例

ヘッダーとフッターのウィジェットエリアには、「ヘッダーウィジェットエリア」と「フッターウィジェットエリア」と名付けるのが理にかなっています。「サイドバー1」や「サイドバー2」（デフォルト）ではなく、これはサイドバーの位置を示す有用な説明を提供します。

以下のコードは、functions.phpに追加されるとサイドバーを登録します：

<?php
add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
    /* Register the 'primary' sidebar. */
    register_sidebar(
        array(
            'id'            => 'primary',
            'name'          => __( 'Primary Sidebar' ),
            'description'   => __( 'A short description of the sidebar.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    /* Repeat register_sidebar() code for additional sidebars. */
}

このコードは次のことを行います：

• register_sidebar – WordPressにサイドバーを登録していることを知らせます。
• 'name' => __( 'Primary Widget Area', 'mytheme' ), – 外観 > ウィジェットに表示されるウィジェットエリアの名前です。
• 'id' => 'sidebar-1' – サイドバーにIDを割り当てます。WordPressは「id」を使用してウィジェットを特定のサイドバーに割り当てます。
• before_widget/after_widget – サイドバーに割り当てられたウィジェットのラッパー要素です。「%1$s」と「%2$s」は、プラグインが利用できるようにidとclassに常に残しておく必要があります。デフォルトでは、WordPressはこれらをリストアイテムとして設定しますが、上記の例ではdivに変更されています。
• before_title/after_title – ウィジェットのタイトルのラッパー要素です。デフォルトでは、WordPressはこれをh2に設定しますが、h3を使用するとより意味的になります。

サイドバーが登録されると、テーマ内で表示できます。

テーマ内でのサイドバーの表示

サイドバーが登録されたので、テーマ内で表示したいと思うでしょう。これを行うには、2つのステップがあります：

• 1. sidebar.phpテンプレートファイルを作成し、dynamic_sidebar関数を使用してサイドバーを表示します。
• 2. get_sidebar関数を使用してテーマに読み込みます。
  

サイドバーテンプレートファイルの作成

サイドバーテンプレートには、サイドバーのコードが含まれています。WordPressはsidebar.phpファイルとsidebar-{name}.phpという名前の任意のテンプレートファイルを認識します。これにより、各サイドバーを独自のテンプレートファイルに整理できます。

例：

1. sidebar-primary.phpを作成します。

2. 次のコードを追加します：

<div id="sidebar-primary" class="sidebar">
    <?php dynamic_sidebar( 'primary' ); ?>
</div>

 <a name="load-your-sidebar"></a>
### サイドバーの読み込み
テーマ内でサイドバーを読み込むには、`````get_sidebar`````関数を使用します。これは、サイドバーを表示したいテンプレートファイルに挿入する必要があります。デフォルトの`````sidebar.php`````を読み込むには、次のようにします：  
``````bash
<?php get_sidebar(); ?>
`

プライマリサイドバーを表示するには、関数に$nameパラメータを渡します：

<?php get_sidebar( 'primary' ); ?>

サイドバーのカスタマイズ

サイドバーをカスタマイズする方法はたくさんあります。以下はそのいくつかの例です：

デフォルトのサイドバーコンテンツの表示

ユーザーがまだサイドバーにウィジェットを追加していない場合、コンテンツを表示したいかもしれません。これを行うには、is_sidebar_active()関数を使用してサイドバーにウィジェットがあるかどうかを確認します。これは、確認したいサイドバーのIDである$indexパラメータを受け入れます。

このコードは、サイドバーがアクティブかどうかを確認し、そうでない場合はコンテンツを表示します：

<div id="sidebar-primary" class="sidebar">
    <?php if ( is_active_sidebar( 'primary' ) ) : ?>
        <?php dynamic_sidebar( 'primary' ); ?>
    <?php else : ?>
        <!-- Time to add some widgets! -->
    <?php endif; ?>
</div>

デフォルトウィジェットの表示

サイドバーにデフォルトでいくつかのウィジェットを配置したいかもしれません。たとえば、検索、アーカイブ、メタウィジェットを表示します。これを行うには、次のようにします：

<div id="primary" class="sidebar">
    <?php do_action( 'before_sidebar' ); ?>
    <?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?>
        <aside id="search" class="widget widget_search">
            <?php get_search_form(); ?>
        </aside><!-- #search -->
        <aside id="archives" class"widget">
            <h3 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h3>
            <ul>
            <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside><!-- #archives -->
        <aside id="meta" class="widget">
            <h3 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h3>
            <ul>
            <?php wp_register(); ?>
            <li><?php wp_loginout(); ?></li>
            <?php wp_meta(); ?>
            </ul>
        </aside><!-- #meta -->
    <?php endif; ?>
</div><!-- #primary -->