サイドバーを追加をする方法です。
クラスやIDの設定も簡単にすることができるので、カスタマイズを行う上で欠かせません。
スポンサードサーチ
ウィジェットの内容を設定する
まずは、ウィジェットの設定をします。
register_sidebar( )にウィジェットの設定を持った配列を引数に渡します。
・name・・・サイドバーの名前、ウィジェットの管理画面で表示されます
・id・・・サイドバーのID、ウィジェットを表示する時に使用します。
※sidebarというIDは使用することができません。
・description・・・サイドバーの説明のテキスト、ウィジェットの管理画面で表示されます
・before_widget・・・ウィジェットの直前に出力されるHTML
・after_widget・・・ウィジェットの直後に出力されるHTML
・before_title・・・タイトルの直前に出力されるHTML
・after_title・・・タイトルの直後に出力されるHTML
ウィジェットの設定を登録する
add_action( )で上記のサイドバーの設定を使用できるように登録をします。
|
1 2 3 4 5 6 7 8 9 10 11 |
//登録する add_action( 'widgets_init' , 'register_sidebar( array( 'name' => __( 'サイドバー', 'sidbar' ), 'id' => 'sidebar-1', 'description' => __( 'サイドバーの説明.', 'sidebar' ), 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', ) );' ); |
ただ、パラメータを持ったregister_sidebarを直接引数に指定するとソースコードが見づらくなるので、新たに関数を作成した方が可読性がいいと思います。
こんな感じで、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//可読性を上げるためのラッパー関数 function sidebar_widgets_init() { register_sidebar( array( 'name' => __( 'サイドバー', 'sidbar' ), 'id' => 'sidebar-1', 'description' => __( 'サイドバーの説明.', 'sidebar' ), 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', ) ); } //登録する add_action( 'widgets_init' , 'sidebar_widgets_init') |
HTMLに出力する
上記で設定したサイドバーのIDを使用して、表示します。
|
1 |
<?php dynamic_sidebar('sidebar-1'); ?> |
使用例
以下はこのブログのサイドバーの設定です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function prokatsu_widgets_init() { register_sidebar( array( 'name' => __( 'サイドバー', 'prokatsu' ), 'id' => 'sidebar-1', 'description' => __( 'サイドバーの説明', 'prokatsu' ), 'before_widget' => '<div class="side-wrapper">', 'after_widget' => '</div>', 'before_title' => '<h3 class="side-title">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'prokatsu_widgets_init' ); |
|
1 2 |
//サイドバーの表示 <?php dynamic_sidebar('sidebar-1'); ?> |
|
1 2 3 4 5 6 |
<div class="side-wrapper"> //before_widget <h3 class="side-title"> //before_title 設定したタイトル </h3> //after_title 内容 </div> //after_widget |
