WordPress備忘録 ウィジェットエリアの追加

Pocket
LINEで送る

WordPressの便利な機能にウィジェットがある。僕は縦メニューなんかもウィジェットを使ってしまっている。このサイトでは今のところ使っていないけど、ページによって縦メニューを変えたい場合など、複数のウィジェットエリアが必要になってくるのだ。

まず、大前提としてウィジェットを利用するには、ウィジェットエリアが有効になっていないといけない。まあ、普通、有効になっていないテーマなんて、ほとんど、無いとは思うのだけれど・・・。(^^;

とりあえず、function.phpに以下の記述がないとウィジェットエリアが使えないのだ。

if ( function_exists('register_sidebar') )

//ここから 
register_sidebar(array(
 'name' => 'ウィジェット名',
 'id' => 'ウィジェットのID',
 'description' => 'ウィジェットの説明',
 'before_widget' => 'ウィジェットを囲む開始タグ',
 'after_widget' => 'ウィジェットを囲む終了タグ',
 'before_title' => 'ウィジェットのタイトルを囲む開始タグ',
 'after_title' => 'ウィジェットのタイトルを囲む終了タグ'
 ));
//ここまで
 
}

これだけだと、1つのウィジェットエリアしか使えない事になるので、上の「ここから」~「ここまで」のパターンをコピーして増やすのだ。下の例はテーマwsc7で、3つのウィジェットエリアを使用可能にしてみたものでやんす。

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」が追加したウィジェットの名前になり、カスタマイズしやすくなりやす。
この状態で、ダッシュボード、外観からウィジェットを見てもらうと、3つのウィジェットエリアが表示されているはずです。この要領で、ウィジェットエリアを必要な数だけ増やせます。

ウィジェットエリアを追加したら、次に、テンプレートファイルの表示させたい場所に次のコードを記述します。

<?php dynamic_sidebar(); ?>

()の中には、上で指定した、それぞれのウィジェットエリアのIDを記述します。これで、ウィジェットが表示されます。

例えば、上の3番目のウィジェットエリアなら、こんな感じです。

<?php dynamic_sidebar( 'mobile-widget-area' ); ?>

基本はコピペの作業なので、個人的にはウィジェットエリアの追加は、悩まずに、スッとできたのだ。(^^)

Pocket
LINEで送る

YASUKE YAMURA

コメントを残す

メールアドレスが公開されることはありません。

ツールバーへスキップ