WordPressで複数のウィジェットを使えるようにする

2016.06.28 WordPress
WordPressで複数のウィジェットを使えるようにする

WordPressの大きな特徴のひとつに、ウィジェット機能があります。独自テーマを作成するときなどに、このウィジェット機能をうまく利用できると、その後のユーザビリティやメンテナンス性が向上します。

よほどシンプルなレイアウトでない限り、ウィジェット機能を複数実装することがほとんどかと思います。本日は、WordPressのウィジェットを複数使う方法についてご紹介したいと思います。

functions.phpを編集してウィジェットを有効にする

ウィジェットを使用するには、functions.phpを編集してWordPressテーマでウィジェット機能を有効にする必要があります。

functions.phpに下記のように記述します。今回の例ではウィジェットを2つ有効にしていますが、3つ、4つ、…とさらに使用したい場合は同じ要領で下に追記してください。

/* ウイジェット追加
---------------------------------------------------------- */
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個ずつを囲うタグです。「タイトルを囲う開始&終了タグ」は、ウィジェットのタイトル(例:「人気記事一覧」「カテゴリー」など)を囲うタグです。

ウィジェットを表示させたい箇所のテンプレートファイルを編集する

ウィジェット機能が有効になりましたので、今度はウィジェットを表示させたい箇所のテンプレートファイルに、ウィジェットを表示させるためのソースを追記します。

<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」というウィジェットを表示することができました。

ウィジェットをうまく使えると、運営開始後のメンテナンス性がグッと向上しますし、なによりコーディングの知識のない人でも編集できるようになりますのでおすすめです。是非いろいろ工夫して使ってみて頂ければと思います。

photo credit: Twins, Mommy, and Baby Brother Bean via photopin (license)

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら