【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

16Dec2016

【WordPress】異なるマークアップのサイドバーを複数定義する方法 (制作メモ)

ちょっとど忘れして複数のサイドバーを定義する方法を調べた時に「知りたい情報がなかなか見つからなーーい!」となったので自分へのメモがてら書いておきます。

記事冒頭から余談ですが、最近は以前に増して様々な分野で「大量のコピー記事」が蔓延しているように感じます。。。検索結果の上から下まで全部同じ内容の記事ということもあります。
とはいえこのサイトでもWordPress関連の記事はオリジナルであるCodex(WordPressの公式マニュアル)からの抜粋(要はコピー記事)が多いので、まったくもって人のことは言えないのですが^^;
一応古くからインターネットに携わる人間として、すでに誰かが書いていて調べてサッと出て来る情報はその方におまかせして、まだ誰も書いていなかったり書いていても検索結果に埋もれてしまっている希少な情報を掘り起こせるように意識しています。ま、偽善です。

register_sidebars 関数

さて本題の「複数のサイドバー(ウィジェット)を定義する方法」ですが、普通に検索すると以下の方法が見つかります。

register_sidebars(  2, array(
  'name'          => __('Sidebar %d'),
  'id'            => 'sidebar',          
  'description'   => '',
  'class'         => '',
  'before_widget' => '<li>',
  'after_widget'  => '</li>',
  'before_title'  => '<h2>',
  'after_title'   => '</h2>'
));

上記コードをテーマのfunctions.phpに書くことで、サイドバーが2つ利用可能となります。1行目の「2」という箇所が作成するサイドバーの数です。

WordPress Codex [関数リファレンス/register sidebars]

この関数を使うと一気に複数のサイドバーを作成することができる点がメリットです。
その一方で、名前、説明、ウィジェットの構造(ソースコード)などをサイドバーごとに変えることができないことが問題になるケースもあります。

register_sidebar 関数

今回まさにサイドバーごとに丁寧な説明を加えたかったため、上述の方法ではダメでした。
そこでサイドバーを1個ずつ作成する方法を使います。

サイドバーを1つ作成するには「register_sidebar 関数」を使用します。
「ほぇっ!?」と思った、あなた。sidebars(複数形)ではありません。sidebar(単数形)です 笑

register_sidebar(array(
  'name' => __('投稿系サイドバー') ,
  'id' => 'posts_widget',
  'description' => __( '投稿系ページのサイドバーに表示するウィジェットをここに保存してください。' ),
  'before_widget' => '<li>',
  'after_widget' => '</li>',
  'before_title' => '<h3>',
  'after_title' => '</h3>',
));

WordPress Codexによると

サイドバーに一意の名前(”Right Sidebar” や “Left Sidebar”)を与えたり異なるマークアップが必要だったりするときは、register_sidebars() で一度に作るのではなくこの関数を使うとよいでしょう。名前は管理画面でのみ表示されますが、各サイドバーにはっきりと名前をつければ、どのサイドバーがどこに表示されるか管理者へヒントを与えることができます。参考: この名前はサイドバーの内容を保存するインデックスとしても使用されるので、サイドバーの内容は同じ名前を使用する別テーマを選択した時に再利用および上書きされます。
WordPress Codex [関数リファレンス/register sidebar]

とあります。要点をまとめると、サイドバーごとに異なる名前やマークアップが必要な時はこの関数を複数使いましょう。とのこと。
安心して複数使っていきましょう^^

register_sidebar(array(
  'name' => __('投稿系サイドバー') ,
  'id' => 'posts_widget',
  'description' => __( '投稿系ページのサイドバーに表示するウィジェットをここに保存してください。' ),
  'before_widget' => '<li>',
  'after_widget' => '</li>',
  'before_title' => '<h3>',
  'after_title' => '</h3>',
));

register_sidebar(array(
  'name' => __('固定ページ系サイドバー') ,
  'id' => 'pages_widget',
  'description' => __( '固定ページのサイドバーに表示するウィジェットをここに保存してください。' ),
  'before_widget' => '<li>',
  'after_widget' => '</li>',
  'before_title' => '<h3>',
  'after_title' => '</h3>',
));

こんな感じになります。

補足

functions.php内で万が一記述エラーが合った際にサイト全体が真っ白になってしまうことを防ぐために、予防線を張っておきましょう。
自作テーマで自分で使う場合は不要かもしれませんが、クライアント案件では必須だと思います。

if ( function_exists('register_sidebar') ) {

register_sidebar(array(
  'name' => __('投稿系サイドバー') ,
  'id' => 'posts_widget',
  'description' => __( '投稿系ページのサイドバーに表示するウィジェットをここに保存してください。' ),
  'before_widget' => '<li>',
  'after_widget' => '</li>',
  'before_title' => '<h3>',
  'after_title' => '</h3>',
));

register_sidebar(array(
  'name' => __('固定ページ系サイドバー') ,
  'id' => 'pages_widget',
  'description' => __( '固定ページのサイドバーに表示するウィジェットをここに保存してください。' ),
  'before_widget' => '<li>',
  'after_widget' => '</li>',
  'before_title' => '<h3>',
  'after_title' => '</h3>',
));

}

1行目を日本語に訳すと「もし(if)、register_sidebarという関数が(‘register_sidebar’)存在していたら(function_exists)」という意味です。改めて見ると、ほぼ英語そのままですね^^;
resgister_sidebar関数が正しく存在している場合は、if { } で囲われた部分が実行されます。記述ミスがあったりクライアント側の不慮の事故でregister_sidebar関数が正しく機能していない場合は、if { } 内は実行されないため、何も起こりません。(通常functions.php内に記述ミスがあるとサイト全体が真っ白になります)

関連記事