sidebar.phpを見る [ゼロから作るWP3テーマ vol.4]

今回は「TwentyTen」のsidebar.phpを見てみます。

TwnetyTenはウィジェットに対応しているのでsidebar.phpの中身もウィジェット関係のコードです。

なので、どうやってテーマをウィジェットに対応させているかを見ていきます。

ウィジェットエリアの登録

ウィジェットエリアというのは管理ページでいうところの以下のところのこと。

このウィジェットエリアはfunctions.php内で定義されています。

function twentyten_widgets_init() {
  // Area 1, located at the top of the sidebar.
  register_sidebar( array(
  'name' => __( 'Primary Widget Area', 'twentyten' ),
  'id' => 'primary-widget-area',
  'description' => __( 'The primary widget area', 'twentyten' ),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) ); 

// Area 2, located below the Primary Widget Area in the sidebar. Empty by default.
  register_sidebar( array(
  'name' => __( 'Secondary Widget Area', 'twentyten' ),
  'id' => 'secondary-widget-area',
  'description' => __( 'The secondary widget area', 'twentyten' ),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );
// 中略
}
/** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'twentyten_widgets_init' );

register_sidebar()はウィジェットエリアを登録する関数です。(register_widget_area()とかにしたほうがわかりやすいような・・・)

詳細は以下を参照してください。

関数リファレンス/register sidebar – WordPress Codex 日本語版

引数は次の値を設定できます。

name
サイドバー名
id
サイドバーid
description
サイドバーの説明
before_widget
ウィジェットの前のテキスト
デフォルト:<li id=”%1$s” class=”widget %2$s”>
after_widget
ウィジェットの後のテキスト
デフォルト:</li>
before_title
タイトルの前のテキスト
デフォルト:<h2 class=”widgettitle”>
after_title
タイトルの後のテキスト
デフォルト:</h2>
add_action( 'widgets_init', 'twentyten_widgets_init' );

このtwentyten_widgets_init()をwidgets_initフックに引っ掛けると管理ページに表示されるようになるみたいです。

自分用で書くとしたらこんな感じでしょうね。

function original_widgets_init() {
  register_sidebar( array(
  'name' => 'ウィジェットエリア1',
  'id' => 'primary-widget-area',
  'description' => 'ウィジェットエリア1の説明',
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h2 class="widget-title">',
  'after_title' => '</h2>',
  ) ); 

ul要素でウィジェットを囲むのが嫌いなのでdiv要素でマークアップする方向で。あと翻訳も苦手です。

ウィジェットエリアの表示

さて、これでウィジェットエリアの登録までができたので次はそれを表示します。ようやくsidebar.phpに戻ります。

if( !dynamic_sidebar('primary-widget-area')):

dynamic_sidebar()は呼び出した場所にウィジェットを表示する関数です。

関数リファレンス/dynamic sidebar – WordPress Codex 日本語版

引数にはどのウィジェットエリアを表示するかを指定し、ここでは “primary-widget-area” のウィジェットを表示するということになります。

if文の内容はこのウィジェットエリア1になにもなかったときにサイドバーが表示されないのを防ぐために書かれているようです。

<?php
 if ( is_active_sidebar( 'secondary-widget-area' ) ) :  ?>
  <div id="secondary" class="widget-area" role="complementary">
    <ul class="xoxo">
    <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
    </ul>
  </div>
<?php endif; ?>

is_active_sidebar()は引数で指定したウィジェットエリアになにかウィジェットが追加されているかどうかを調べる条件分岐タグです。

Function Reference/is active sidebar « WordPress Codex

ウィジェットエリアが使用中の場合、真を返します。

dynamic_sidebar()もis_active_sidebar()も真偽を返す関数なのでどちらの書き方をするかは自由かなと思います。

4

  • リオ

    ありがとうございます。
    WPを始めたばかりの私にとってはいろいろとためになることばかりでした。

    まずテンプレートを開いて、インクルードされているのを見て、サイドバーにたどり着き、dynamic_sidebar で呼び出されているのを知り、それを管理画面で設定できることまでたどり着いた状態です。あとはこの設定がファイルに保存されているのかDBに保存されているのかをこれから突き止めます。

    • お役に立てたようで嬉しいです。

      楽しいWPライフを! ^ ^

そうのひとりごと

© 2017 PAOLOG