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

引数名	型	説明	デフォルト	必須
$args	array	ウィジェットエリアに必要な配列	なし

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

キー	型	デフォルト	説明
name	string	sprintf(__(‘Sidebar %d’), $i )	サイドバータイトル
id	string	sidebar-$i	サイドバーID
description	string	なし	サイドバーの説明
class	string	なし	ウィジェットに追加するclass属性
before_widget	string	<li id=”%1$s” class=”widget %2$s”>	ウィジェットの前のテキスト
after_widget	string	</li>\n	ウィジェットの後のテキスト
before_title	string	<h2 class=”widgettitle”>	ウィジェットのタイトルの前のテキスト
after_title	string	</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()の追加を紹介しました。後半のテーマにウィジェットエリアを表示するところは次回やります。

タグ : ウィジェットエリア