サイドバー

2020.04.04 2020.04.04

TOPICS

翻訳元記事はこちらです。

サイドバーとは

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

ウィジェットは、最近の投稿を一覧表示したり、ライブチャットを行ったりと、様々な目的で利用することができます。

「サイドバー」という名前の由来は、通常、ブログの左端や右端に長い帯状にウィジェットエリアが作られていた時代に由来しています。今日では、サイドバーはその元の名前を超えて進化しています。サイドバーは、あなたのウェブサイトのどこにでも設置することができます。サイドバーは、ウィジェットを含むあらゆる領域と考えてください。

サイドバーの登録

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

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

name – サイドバーの名前です。これはウィジェットパネルでユーザーに表示される名前です。
id – 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 関数を使います。

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つの関数があります。

1つ目は1つのサイドバーを登録し、2つ目は複数のサイドバーを登録することができます。

サイドバーごとにユニークで説明的な名前をつけることができるので、サイドバーは個別に登録しておくことをおすすめします。

例

ヘッダーとフッターのウィジェットエリアについては、「サイドバー1」と「サイドバー2」（デフォルト）ではなく、「ヘッダーウィジェットエリア」と「フッターウィジェットエリア」という名前を付けるのが理にかなっています。これにより、サイドバーがどこにあるかの便利な説明が得られます。

functions.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 – サイドバーを登録する関数です。
'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つのステップがあります。

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

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

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

例

sidebar-primary.php ファイルを作成します。
以下のコードを追加します。

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

dynamic_sidebarは$indexという、サイドバーの名前またはIDの１つのパラメータを取ることに注意してください。

サイドバーを読み込む

テーマでサイドバーを読み込むには、get_sidebar関数を使用します。これは、サイドバーを表示させたいテンプレートファイルに挿入する必要があります。デフォルトのsidebar.phpを読み込むには、次のようにしてください。

<?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>
        <aside id="archives" class"widget">
            <h3 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h3>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
        <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>
   <?php endif; ?>
</div>