WordPressで複数のウィジェットを使えるようにする
WordPressの大きな特徴のひとつに、ウィジェット機能があります。
独自テーマを作成するときなどに、このウィジェット機能をうまく利用できると、その後のユーザビリティやメンテナンス性が向上します。
よほどシンプルなレイアウトでない限り、ウィジェット機能を複数実装することがほとんどかと思います。
今回は、WordPressのウィジェットを複数使う方法についてご紹介したいと思います。
ウィジェットを有効にする
ウィジェットを使用するには、functions.phpを編集してWordPressテーマでウィジェット機能を有効にする必要があります。
functions.phpに下記のように記述します。
今回の例ではウィジェットを2つ有効にしていますが、3つ、4つ、…とさらに使用したい場合は同じ要領で下に追記してください。
- functions.php
-
/* ウイジェット追加 ---------------------------------------------------------- */ if ( !function_exists( 'bj_register_sidebars' ) ) { function bj_register_sidebars() { register_sidebar( array( 'id' => 'sidebar_1', //ウィジェットのID 'name' => 'サイドバー1', //ウィジェットの名前 'description' => 'ウィジェットをドラッグして編集してください。', //ウィジェットの説明文 'before_widget' => '<div>', //ウィジェットを囲う開始タグ 'after_widget' => '</div>', //ウィジェットを囲う終了タグ 'before_title' => '<h4>', //タイトルを囲う開始タグ 'after_title' => '</h4>', //タイトルを囲う終了タグ ) ); register_sidebar( array( 'id' => 'sidebar_2', //ウィジェットのID 'name' => 'サイドバー2', //ウィジェットの名前 'description' => 'ウィジェットをドラッグして編集してください。', //ウィジェットの説明文 'before_widget' => '<div>', //ウィジェットを囲う開始タグ 'after_widget' => '</div>', //ウィジェットを囲う終了タグ 'before_title' => '<h4>', //タイトルを囲う開始タグ 'after_title' => '</h4>', //タイトルを囲う終了タグ ) ); } add_action( 'widgets_init', 'bj_register_sidebars' ); }
これで、「サイドバー1」と「サイドバー2」というウィジェットが有効になりました。
上記ソースの「ウィジェットの名前」「ウィジェットの説明文は、WordPressダッシュボードのウィジェット編集画面にて表示されます。
「ウィジェットを囲う開始＆終了タグ」は、ダッシュボードにて追加したウィジェット1個ずつを囲うタグです。
「タイトルを囲う開始＆終了タグ」は、ウィジェットのタイトル(例：「人気記事一覧」「カテゴリー」など)を囲うタグです。
ウィジェットを表示させたい箇所のテンプレートファイルを編集する
ウィジェット機能が有効になりましたので、今度はウィジェットを表示させたい箇所のテンプレートファイル（sidebar.phpなど）に、ウィジェットを表示させるためのソースを追記します。
- sidebar.php
-
<div id="sidebar"> <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 'sidebar_1' ) ) : else : ?> <?php endif; ?> <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 'sidebar_2' ) ) : else : ?> <?php endif; ?> </div>
これでID名「sidebar」というdiv要素に「サイドバー1」と「サイドバー2」というウィジェットを表示することができました。
ウィジェットをうまく使えると、運営開始後のメンテナンス性がグッと向上しますし、なによりコーディングの知識のない人でも編集できるようになりますのでおすすめです。
是非いろいろ工夫して使ってみて頂ければと思います。
