サイドバーの登録と出力

サイドバーのイラスト

サイドバーをウィジェットで管理するには、register_sidebar という関数を使います。

サイドバーを登録する

register_sidebar を使いサイドバーをウィジェットで管理することができます。

この関数はパラメータが複数あり、functions.php の中に記述します。

文字列内容デフォルト値
nameサイドバーの名前サイドバー 番号という文字列
idサイドバーのIDsidebar-番号 という文字列
descriptionサイドバーの概要なし
class管理画面の 外観 > ウィジェットでサイドバーに割り当てられる CSS のクラス空文字列
before_widgetウィジェットの先頭に出力する文字列<li id=”%1$s” class=”widget %2$s”>
after_widgetウィジェットの最後に出力する文字列</li>\n
before_titleウィジェットのタイトルの前に出力する文字列<h2 class=”widgettitle”>
after_titleウィジェットのタイトルの後に出力する文字列</h2>\n

ウィジェットで管理するサイドバーを複数作るには、サイドバーの名前を指定して、ここを識別するようにします。

例えば sidebarAsidebarB の2つのサイドバーを登録する場合、functions.php へ以下のように記述します。

functions.php

register_sidebar( array( 'name' => 'sidebarA' ));
register_sidebar( array( 'name' => 'sidebarB' ));

HTMLを変更してサイドバーを登録

デフォルトの状態では、ウィジェットは以下のようなHTML構造で出力されます。

HTML

<li id="ウィジェットのID" class="widget-container widget_○○○"> 
  <h2 class="widgettitle">ウィジェットタイトル</h2>
  ウィジェットの内容
</li>

これ以外の関数で出力したい場合、register_sidebar 関数のパラメータの配列で、before_widget after_widget before_title after_titleの要素を指定します。

functions.php

register_sidebar(array(
'name'=>'ウィジェットエリアの名前',
'id' => 'ウィジェットエリアのID',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

登録したサイドバーを出力

register_sidebar 関数で登録したサイドバーは、dynamic_sidebar という関数で出力します。

サイドバーを1つしか登録していない場合は、パラメータを付けずにdynamic_sidehar 関数を実行し、サイドバーを複数登録した場合は、パラメータとしてサイドバーの名前(register_sidebar関数の name に渡した値を指定します。

たとえば、register_sidebar関数を実行して、SidebarASidebarB という名前のサイドバーを登録し、SidebarA のサイドバーを出力するには、以下のように書きます。

PHP

<?php dynamic_sidebar( 'sidebarA' ); ?>

個々のウィジェットは通常 li 要素で出力されるので、一般的にはdynamic_sidebar 関数の前後を <ul></ul> タグで囲み、
ul/li のリストが正しく出力されるように指定します。

PHP

<ul>
  <?php dynamic_sidebar( 'sidebarA' ); ?>
</ul>