Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /home/commitweb/infinityforest.net/public_html/home/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php on line 292
※ このブログは、ウィジェットを利用しておりません！
が、最近、ウィジェットを作成して何これ！！便利！！と改めて感動したのといろいろと書き方があるのだなぁと関心した備忘録
サイドバーウィジェットの設置
いろいろな所にこのウィジェットを追加すれば、カスタマイズの自由度は飛躍的に高まります。
例えば
ヘッダーとコンテンツの間に、ウィジェットで管理できるスペースを設置したり
幅の違うウィジェットをサイドバーに設置したり
と、いろいろなところに設置すれば、直接テンプレートに書きこむよりもカスタマイズしやすくなるかと思います。
それに、ウィジェットを使えば、ダッシュボードのウィジェット管理画面からいつでも自由に好きなようにコンテンツを入れ替えることができるので非常に便利です。
季節毎に入れ替えたい場合や、日替わりのものなどでも、ウィジェット管理画面からドラッグアンドドロップでおしまい！
サイドバーウィジェットの追加方法
ということで、早速使ってみましょう。
1. テーマにサイドバーウィジェットがない場合
functions.phpに、以下を追記します。
|
1 2 3 4 5 6 7 8 9 |
/* サイドバーウィジェット追加 */ register_sidebar( array( 'name' => __( 'Sidebar', 'infinityscope' ), 'id' => 'sidebar', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); |
続いて以下のコードをsidebar.php など、ウィジェットを追加したいテンプレートファイルに追記します。
|
1 2 3 4 5 |
/* 以下を新しいサイドバーとして追加 */ <div id="Sidebars" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar' ); ?> </div> <?php endif; ?> |
2. テーマにサイドバーウィジェットがある場合
テーマにもともとある場合は、新たに追加するのですが、まず、functions.phpを開き、nameとidを確認しておきます。
元のテーマのサイドバーウィジェットが、nameはSidebarとidがsidebarだったとします。
これにもうひとつ追加するには、functions.phpに、以下を追記します。
|
1 2 3 4 5 6 7 8 9 |
/* サイドバーウィジェット2個目追加 */ register_sidebar( array( 'name' => __( 'Sidebar-2', 'infinityscope' ), 'id' => 'sidebar-2', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); |
続いて以下のコードをsidebar.php など、ウィジェットを追加したいテンプレートファイルに追記します。
|
1 2 3 4 5 |
/* 以下を2個目のサイドバーとして追加 */ <div id="Sidebars" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-2' ); ?> </div> <?php endif; ?> |
これで、管理画面をみるとsidebar-1とsidebar-2というサイドバーウィジェットが完成していると思います。
3. 連番で登録する（シンプル）
また、ウィジェットエリアを同じ体裁かつ連番で登録する場合は1行で済みます。
|
1 |
register_sidebars(2, array('name'=>'Sidebars %d')); |
こうすると、"Sidebars 1" と "Sidebars 2" というサイドバーを作成します。
HTML タグも入れる場合は、functions.phpに
|
1 2 3 4 5 6 7 8 |
/* サイドバーウィジェット追加 */ register_sidebar(2, array( 'name' => __( 'Sidebars %d', 'infinityscope' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); |
続いて以下のコードをsidebar.php など、ウィジェットを追加したいテンプレートファイルに追記します。
|
1 2 3 4 5 |
/* 以下をサイドバーとして追加 */ <div id="Sidebars" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebars 2' ); ?> </div> <?php endif; ?> |
と、なります。
4. 連番で登録する（応用）
HTML タグをそれぞれ別にする方法は
functions.phpに、以下を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if ( function_exists('register_sidebar') ) register_sidebars(1,array( 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', )); register_sidebars(2,array( 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<span>', 'after_title' => '</span>', )); |
続いて以下のコードをsidebar.php など、ウィジェットを追加したいテンプレートファイルに追記します。
|
1 2 3 4 5 |
/* 以下をサイドバーとして追加 */ <div id="Sidebars" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebars 1' ); ?> </div> <?php endif; ?> |
と、なります。
5. 複数登録する場合
個別に名前をつけたり体裁を変えたい場合には、それぞれを記載します。
functions.phpに、以下を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* 複数サイドバーウィジェット追加 */ register_sidebar( array( 'name' => __( 'Left-Sidebar', 'infinityscope' ), 'id' => 'left-sidebar', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'Right-Sidebar', 'infinityscope' ), 'id' => 'right-sidebar', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); |
続いて以下のコードをsidebar.php など、ウィジェットを追加したいテンプレートファイルに追記します。
|
1 2 3 4 5 |
/* 以下をサイドバーとして追加 */ <div id="Sidebars" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'left-sidebar' ); ?> </div> <?php endif; ?> |
と、なります。
あとは、いつものCSSを使って、レイアウトを整えて、装飾すれば出来上がり！！です。
それでは！！素敵なサイドバーウィジェットライフを！！
