WordPressのウィジェットは簡単に追加・変更が出来てそれなりにスタイルも担保できるので便利ですよね。ただウィジェットを追加できるエリアがテーマに依存していて好きなエリアには登録できません。通常、ウィジェットが登録できるエリアはサイドバーとかフッターのあたりが多いでしょう。テーマを少し改造することで例にあげた場所以外にもウィジェットを登録できるエリアは増やすことができます。

WordPressのウィジェットエリアを追加するための関数するためにいくつかやることがあります。register_sidebar()をfunctions.phpに追加するのと追加したいエリアにdynamic_sidebar()を追加することです。今回は、register_sidebar()をfunctions.phpに追加するところまでをやります。

functions.phpにregister_sidebar()の追加

使用しているWordPressテーマのfunctions.phpにregister_sidebar()を追加します。register_sidebar()は、ウィジェットエリアを追加するための関数でウィジェットのタイトルやラッパーのHTMLタグ設定します。

またregister_sidebar()に登録されたものはDBに保存されていて、テーマを変更しても同じサイドバーIDであれば、追加してあるウィジェットの状態は維持されます。

register_sidebar()の仕様

register_sidebar( $args );
引数説明デフォルト必須
$argsarrayウィジェットエリアに必要な配列なし

register_sidebar()に必要な引数は$argsの1つですが、引数を指定するには配列である必要がありregister_sidebar()に指定できる配列の形は、以下の通りです。

キーデフォルト説明
namestringsprintf(__(‘Sidebar %d’), $i )サイドバータイトル
idstringsidebar-$iサイドバーID
descriptionstringなしサイドバーの説明
classstringなしウィジェットに追加するclass属性
before_widgetstring<li id=”%1$s” class=”widget %2$s”>ウィジェットの前のテキスト
after_widgetstring</li>\nウィジェットの後のテキスト
before_titlestring<h2 class=”widgettitle”>ウィジェットのタイトルの前のテキスト
after_titlestring</h2>\nウィジェットのタイトルの後のテキスト

descriptionは、管理画面のウィジェットの設定で表示されるテキストです。

register_sidebar()の使い方

Twenty Fifteenにregister_sidebar()を追加するサンプルです。以下のコードをfunctions.phpに追加してください。

functions.php
function twentyfifteen_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Widget Area', 'twentyfifteen' ),
        'id' => 'sidebar-1',
        'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
    /* 追加分 */
    register_sidebar( array(
        'name' => 'コンテンツウィジェット',
        'id' => 'content-widget',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}

add_action( 'widgets_init', 'twentyfifteen_widgets_init' );

上のサンプルの13〜20行目が追加したregister_sidebar()です。追加した分のregister_sidebar()は、descriptionやclassが配列にありませんが、配列の中身はすべてオプションなので大丈夫です。

before_widgetにある「%1$s」「%2$s」は、sprintf()にくっつくもので、「%1$s」が追加したウィジェットの名前+番号で「%2$s」が追加したウィジェットの名前になります。

まとめ

WordPressのウィジェットエリアを追加する方法の前半であるfunctions.phpのregister_sidebar()の追加を紹介しました。後半のテーマにウィジェットエリアを表示するところは次回やります。