WordPress備忘録 ウィジェットエリアの追加
WordPressの便利な機能にウィジェットがある。僕は縦メニューなんかもウィジェットを使ってしまっている。このサイトでは今のところ使っていないけど、ページによって縦メニューを変えたい場合など、複数のウィジェットエリアが必要になってくるのだ。
まず、大前提としてウィジェットを利用するには、ウィジェットエリアが有効になっていないといけない。まあ、普通、有効になっていないテーマなんて、ほとんど、無いとは思うのだけれど・・・。(^^;
とりあえず、function.phpに以下の記述がないとウィジェットエリアが使えないのだ。
if ( function_exists('register_sidebar') )
//ここから
register_sidebar(array(
'name' => 'ウィジェット名',
'id' => 'ウィジェットのID',
'description' => 'ウィジェットの説明',
'before_widget' => 'ウィジェットを囲む開始タグ',
'after_widget' => 'ウィジェットを囲む終了タグ',
'before_title' => 'ウィジェットのタイトルを囲む開始タグ',
'after_title' => 'ウィジェットのタイトルを囲む終了タグ'
));
//ここまで
}
これだけだと、１つのウィジェットエリアしか使えない事になるので、上の「ここから」～「ここまで」のパターンをコピーして増やすのだ。下の例はテーマwsc7で、３つのウィジェットエリアを使用可能にしてみたものでやんす。
if ( function_exists('register_sidebar') )
register_sidebar(array(1,
'name' => __('side-widget', 'wsc7'),
'id' => 'side-widget-area',
'description' => __( 'side-widget', 'wsc7'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<p class="widget-title">',
'after_title' => '</p>',
));
register_sidebar(array(2,
'name' => __('footer-widget', 'wsc7'),
'id' => 'footer-widget-area',
'description' => __( 'footer-widget', 'wsc7'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<p class="widget_title">',
'after_title' => '</p>',
));
register_sidebar(array(3,
'name' => __('mobile-widget', 'wsc7'),
'id' => 'mobile-widget-area',
'description' => __( 'mobile-widget', 'wsc7'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<p class="widget_title">',
'after_title' => '</p>',
));
ちなみに、before_widgetの「%1$s」は、追加したウィジェットの名前+番号で「％2$s」が追加したウィジェットの名前になり、カスタマイズしやすくなりやす。
この状態で、ダッシュボード、外観からウィジェットを見てもらうと、３つのウィジェットエリアが表示されているはずです。この要領で、ウィジェットエリアを必要な数だけ増やせます。
ウィジェットエリアを追加したら、次に、テンプレートファイルの表示させたい場所に次のコードを記述します。
<?php dynamic_sidebar(); ?>
()の中には、上で指定した、それぞれのウィジェットエリアのIDを記述します。これで、ウィジェットが表示されます。
例えば、上の３番目のウィジェットエリアなら、こんな感じです。
<?php dynamic_sidebar( 'mobile-widget-area' ); ?>
基本はコピペの作業なので、個人的にはウィジェットエリアの追加は、悩まずに、スッとできたのだ。(^^)
