【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

14May2012

[WordPress]ウィジェットエリアを好きな場所に追加するカスタマイズ

ウィジェットエリアを追加するカスタマイズを紹介します。

どんな時に使うのか?と言われると、

1, ヘッダー、フッターにもブラウザから手軽に変更できる場所が欲しい
2, 間違えて重要なサイドメニューを変更しないよう、ウィジェットエリアを分けたい

こんな使い方があります。

2番の方法は、WordPress制作を請け負うときに大活躍します。

サイトの重要なサイドメニューを「ウィジェットエリア名:変更しないで下さい」に入れておき、クライアントが自由に使えるウィジェットエリアを上下に作ります。
こうすることで、重要なサイドメニューを間違えて変更・削除してしまうリスクを激減できます。

ウィジェットはドラッグの位置を間違えるだけで消えてしまいますので、運営経験の浅いクライアントに対して親切な設計だと言えます。

1. ウィジェットエリアを定義する

デフォルトテーマのTwentyTenを例に、登録作業を行なってみます。

(TwentyTenは最初から6つもウィジェットエリアが用意されていますが・・・)

functions.phpの中に、以下の記述があります。
(行番号はバージョンによって異なる可能性があります)

function twentyten_widgets_init() {
	// Area 1, located at the top of the sidebar.
	register_sidebar( array(
		'name' => __( 'Primary Widget Area', 'twentyten' ),
		'id' => 'primary-widget-area',
		'description' => __( 'The primary widget area', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
~~以下、省略~~

これがウィジェットエリアを登録するスクリプトです。
TwentyTenでは、これが6つ並んでいます。

それでは、register_sidebarのarray内の値の意味を調べてみましょう!

WordPress Codexによると

name – サイドバー名
id – サイドバー id
description – サイドバーの説明 (2.9以降)
before_widget – ウィジェットの前のテキスト
after_widget – ウィジェットの後のテキスト
before_title – タイトルの前のテキスト
after_title – タイトルの後のテキスト

となっています。

2. 実際にやってみる

実際にウィジェットエリアを定義してみます。

function twentyten_widgets_init() {

	// サイドバー上部のウィジェットエリアを定義
	register_sidebar( array(
		'name' => __( '一番上のウィジェットエリア' ),
		'id' => 'top',
		'description' => __( 'サイドバーの一番上に表示されるウィジェットエリアです' ),
		'before_widget' => '<div id="side_top">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// サイドバー中央のウィジェットエリアを定義
	register_sidebar( array(
		'name' => __( '二番目のウィジェットエリア' ),
		'id' => 'middle',
		'description' => __( 'サイドバーの真ん中に表示されるウィジェットエリアです' ),
		'before_widget' => '<div id="side_middle">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// サイドバー下部のウィジェットエリアを定義
	register_sidebar( array(
		'name' => __( '最下部のウィジェットエリア' ),
		'id' => 'bottom',
		'description' => __( 'サイドバーの最下部に表示されるウィジェットエリアです' ),
		'before_widget' => '<div id="side_bottom">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}

functions.phpでウィジェット定義の箇所を上に書き換えました。
(ゼロからテーマを自作する場合は、functions.phpファイルを制作して追加します。)

すると、[管理画面 – 外観 – ウィジェット ] の右側に、自分で定義したウィジェットエリアが表示されます。

ウィジェットエリアを定義するとウィジェット管理画面に表示されます。

※各エリアには、ブラウザから表示位置を確認するためにテキストウィジェットを配置しました。

次にテーマ内でウィジェットエリアを呼び出す関数を書きます。

今回はサイドバーに表示するのでsidebar.phpを編集します。


          <?php dynamic_sidebar( '一番上のウィジェットエリア' ) ; ?>
          
          <?php dynamic_sidebar( '二番目のウィジェットエリア' ) ; ?>
          
          <?php dynamic_sidebar( '最下部のウィジェットエリア' ) ; ?>
      

dynamic_sidebar()の中には、functions.phpで定義したウィジェットエリアのnameを書きます。
nameを日本語で定義しても正常に動作します。

この時点で一度ブラウザから確認してみると、以下の様に表示されています。

定義したウィジェットエリアが表示されます

スタイルを何も指定していないので、3つのウィジェットエリアがくっついちゃってます^^;

あとはCSSで好みのデザインに整えたら完成です!

【あとがき】

今回は3つともサイドバーに設置したので、あまり意味はないかもしれません。
ヘッダーやフッターにもウィジェットエリアを設置すると、より効果的ですね。

僕はWordPressの運営スキルの浅いクライアントからウィジェットのカスタム依頼を頂いた際は、サイトのコアとなる重要メニューなどを「重要なメニューが入っています」という注意を喚起するウィジェット名のエリアに格納しています。その上下に自由に使える「上部ウィジェット」「下部ウィジェット」を設置します。
こうすることで、誤作動によるメニュー削除などを起きにくくしています。

関連記事