ウィジェットエリアを追加する方法

WordPressにウィジェットエリアを追加する方法です。

ウィジェットエリアとは下記画像の赤枠の部分。

多くのテーマは、独自のウィジェットエリアがいくつか実装されていますが、それに加えてさらにエリアを追加することが出来ます。
また、オリジナルテーマを作成する場合は、自分でウィジェットエリアを用意する必要があります。

オリジナルテーマを作成すると、最初はウィジェットメニューが表示されていません。

ウィジェットエリアを追加することによって、ウィジェットメニューが表示されるようにもなります。

ちなみに、ウィジェット自体を作る場合は下記の記事の方へ。

これで作れる！オリジナルウィジェットの作り方

では、ウィジェットエリアの説明を続けます。

ウィジェットエリアの追加

functions.php に下記コードを追加します。

functions.php

add_action(
	'widgets_init', 
	function(){
		register_sidebar(array(
			'id' => 'widget_id001',
			'name' => 'ウィジェットのエリア名',
			'description' => 'ウィジェットエリアについての説明を書きます',
		));
	}
);

widgets_initアクションフックのタイミングで、register_sidebar関数を実行することでウィジェットエリアを登録できます。
これをウィジェットエリアが一つもないオリジナルテーマに記述すると、このようになります。

複数のウィジェットエリアを追加する場合は、こんな感じです。

functions.php

add_action(
	'widgets_init', 
	function(){
		register_sidebar(array(
			'id' => 'widget_id001',
			'name' => 'ウィジェットのエリア名',
			'description' => 'ウィジェットエリアについての説明を書きます',
		));
		
		register_sidebar(array(
			'id' => 'second_widget',
			'name' => 'セカンドエリア',
			'description' => '2つ目のウィジェットエリアです',
		));
	}
);

複数ウィジェットエリアの追加には、
register_sidebars( $number, $args );
という専用関数が用意されていますが、nameやdescriptionが共通になってしまうので、使いどころとしては多くないかなと思います。

ウィジェットエリアが既にあるテーマの子テーマに記述すると？

例えばテーマ「SANGO」には最初から複数のウィジェットエリアがあります。
テーマをカスタマイズする場合、当然、子テーマを実装し編集していくものですが…、子テーマのfunctions.php に記述するとどうなるのか。
上書き？追加？エラーになる？

追加される

「SANGO」の子テーマ側のfunctions.phpに記述した結果。

元のウィジェットエリアも残しつつ、単純に追加されましたね。

register_sidebar詳細

name
　サイドバーの名前。ウィジェット管理画面に表示される。
id
　サイドバーの ID（すべて小文字の半角英数字）。
description
　サイドバーの説明テキスト。ウィジェット管理画面に表示される。
class
　サイドバーに割り当てられるCSS クラス。指定したクラス値の前に "sidebar" が付きます。例えば "tal" を指定すると "sidebar-tal" が出力されます。
before_widget
　ウィジェットの直前に出力する HTML テキスト。
after_widget
　ウィジェットの直後に出力する HTML テキスト。
before_title
　タイトルの直前に出力する HTML テキスト。
after_title
　タイトルの直後に出力する HTML テキスト。

各項目を省略した場合のデフォルト値はこのようになっています。
※WordPress 4.9.4

コード

$defaults = array(
            'name' => sprintf(__('Sidebar %d'), $i ),
            'id' => "sidebar-$i",
            'description' => '',
            'class' => '',
            'before_widget' => '<li id="%1$s" class="widget %2$s">',
            'after_widget' => "</li>\n",
            'before_title' => '<h2 class="widgettitle">',
            'after_title' => "</h2>\n",
    );

注目すべきは、デフォルトだとウィジェット要素は<li>要素で囲まれていること、タイトルは<h2>要素で囲まれていることですね。

ウィジェットを出力する

ウィジェットエリアに追加しただけでは、そこにウィジェットを載せても画面に表示されません。
dynamic_sidebar関数を使ってウィジェットエリアを任意の位置に出力させます。
殆どのケースはsidebar.php、header.php、footer.phpあたりになるかと思います。

例えば、下記コードをsidebar.phpに記述します。

sidebar.php

<aside>
	<?php if(is_active_sidebar('widget_id001')) : ?>
		<ul id="my_sidebar_widget">
		<?php dynamic_sidebar('widget_id001'); ?>
		</ul>
	<?php endif; ?>
</aside>

is_active_sidebarで id のウィジェットがアクティブになっているかを調べた上で、dynamic_sidebarでウィジェットを出力します。
<ul>要素で囲っているのは、デフォルトだとbefore_wiget, after_widgetを省略した場合は、<li>要素でウィジェットが囲われるためです。

ウィジェットエリアにウィジェットを載せて…

dynamic_sidebarで出力。

<li>要素、<h2>要素を取り外したい場合

register_sidebar関数に渡しているパラメータで、before_widget, after_widget、before_title, after_titleを省略しないことで、デフォルト値として<li>要素、<h2>要素がセットされないようにします。

functions.php

add_action(
	'widgets_init', 
	function(){
		register_sidebar(array(
			'id' => 'widget_id001',
			'name' => 'ウィジェットのエリア名',
			'description' => 'ウィジェットエリアについての説明を書きます',
			'before_widget' => '',
			'after_widget' => '',
			'before_title' => '',
			'after_title' => '',
		));
	}
);

sidebar.php

<aside>
	<?php
		if(is_active_sidebar('widget_id001')){
			dynamic_sidebar('widget_id001');
		}
	?>
</aside>

before_widget, after_widget, before_title, after_titleを空文字にしています。
<li>要素が無くなったので、sidebar.phpに記述していた<ul>要素も外しました。

これでウィジェットエリアの登録、出力は完成です。

これで作れる！オリジナルウィジェットの作り方

参考
register_sidebarCodex

参考
is_active_sidebarCodex

参考
dynamic_sidebarCodex

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル