【ワードプレス】テーマの作り方⑤：ページにウィジェットを表示する

このページにはプロモーションが含まれています

ウィジェットはワードプレスにおいてウェブサイトのカスタマイズをするのに非常に便利な仕組みですよね。プログラムを変更することなくウィジェットを登録するだけでウェブサイトをカスタマイズすることができます。

このページでは、自作テーマでそのウィジェットを表示する手順とその具体的方法について解説したいと思います。

これにより、自作テーマで下の図のようにウィジェットの設定を行うことができ、

設定したウィジェットを下の図のようにページに表示できようになります。

Contents

自作テーマにウィジェットを表示する手順
ウィジェットエリアの作成
ウィジェットエリアの表示
まとめ

自作テーマにウィジェットを表示する手順

自作テーマにウィジェットを表示する手順は下記となります。

ウィジェットエリアを作成
ウィジェットエリアを表示

まずは、この２つの手順が必要である理由を説明したいと思います。

日頃みなさんが使っているテーマであれば、ワードプレスの管理画面から「外観」メニューをクリックすると、おそらく下のような「ウィジェット」が表示されると思います。

そして、この「ウィジェット」をクリックすると、下の図のようなウィジェットの設定画面に移ります。

この画面の左側に表示されているのが「ウィジェット」です。さらに、右側に表示されているのが「ウィジェットエリア」というエリアの一覧になります。

この「ウィジェットエリア」はウィジェットを表示するのに非常に重要なものです。この「ウィジェットエリア」に対し、ワードプレス本体（ワードプレスコア部・管理画面生成部）は下記の機能を提供してくれています。

ウィジェットエリアにウィジェットを登録する機能
ウィジェットエリアを表示すると、一緒に登録されているウィジェットが表示する機能

ワードプレス本体が上記の機能を提供してくれているので、ウィジェット設定画面で「ウィジェットエリア」に「ウィジェット」をドラッグ＆ドロップするだけで「ウィジェットエリア」に「ウィジェット」が登録することが可能です。

さらに、この「ウィジェットエリア」を表示することで、登録された「ウィジェット」が、その「ウィジェットエリア」の表示部分に一緒に表示することができます。

しかし、その一方で、ワードプレス本体は下記の処理は行ってくれません。

ウィジェットエリアを作成する（用意する）
ウィジェットエリアを表示する

つまり、これらの処理はテーマから行う（テーマ開発者が上記を行うようにプログラミングする）必要があります。

ですので、０から自作テーマを開発する場合、最初はウィジェットエリアは一つもありません。

その証拠に、０からテーマを開発している場合は、外観メニューに「ウィジェット」が表示されず、ウィジェットの設定ができないはずです。これはテーマにウィジェットエリアが一つも用意されていないためです。

またウィジェットエリアを作成し、ウィジェットを登録したとしても、ウィジェットの表示は行われません。これは０からテーマを開発している場合、ウィジェットエリアの表示を行う処理が行われないためです。

例えばサイドバーにウィジェットを表示するためには、サイドバー表示を行う sidebar.php に、ウィジェットエリアを表示する処理を行わせる（ウィジェットエリアを表示するプログラムを記述する）必要があります。

ですので、ウィジェットを表示するためには、ワードプレスが行なってくれない下記の２つの手順をテーマから行うようにテーマ開発する必要があります。

ウィジェットエリアを作成
ウィジェットエリアを表示

ウィジェットエリアの作成

それでは、具体的にウィジェットを表示する方法について解説していきたいと思います。

まずは「ウィジェットエリアを作成する」方法について解説します。

ウィジェットエリアを作成する方法

ウィジェットエリアは下記の３つの手順により作成することが可能です。

ウィジェットエリアを作成する関数を作成
その関数の中で register_sidebar 関数を実行
その関数をアクションフック “widgets_init” にフック

これらの処理を、テーマを構成する PHP ファイルの一つである functions.php に記載します。

ウィジェットエリアの作成に使用する関数

まずは上記手順で使用する関数について解説しておきます。ウィジェットエリアの作成に使用する関数は「register_sidebar 関数」です。

register_sidebar 関数

register_sidebar 関数はウィジェットエリアを作成する関数です。

register_sidebar 関数の使い方は下記のようになります。

<?php register_sidebar( $args ); ?>

register_sidebar 関数の引数 $arg は配列であり、各要素に下記のものを指定します。

‘name’：ウィジェットエリアの名前
‘id’：ウィジェットエリアの ID
‘description’：ウィジェットエリアの説明文
‘class’：管理画面のウィジェット設定ページのウィジェットエリアに適用されるクラス
‘before_widget’：各ウィジェットの前に記述する HTML
‘after_widget’：各ウィジェットの後ろに記述する HTML
‘before_title’：各ウィジェットタイトルの前に記述する HTML
‘after_title’：各ウィジェットタイトルの前に記述する HTML

これらの引数がどのようにウィジェットエリアに影響されるかをもう少し詳しく説明します。

‘name’、’description’、’class’ はウィジェット設定画面のウィジェットエリア表示時に適用される引数になります。

‘name’、’before_widget’、’after_widget’、’before_title’、’after_title’ はウィジェットエリア表示時に適用される引数になります。

‘before_widget’、’after_widget’、’before_title’、’after_title’ に各要素に対してクラス名を設定すれば、CSS でそのクラスにスタイルを設定することで見た目を自分好みのものに変更することが可能です。

‘id’ に関しては、後述するようにプログラム内でウィジェットエリアを表示するために使用します。’id’ は数字でも指定できますが、どのようなウィジェットエリアであるかが直ぐにわかるような文字列で指定しておく方が、プログラムの可読性も上がるのでオススメです。

ウィジェットエリアを作成するプログラム

以下にウィジェットエリアを作成するプログラムの例を示します。functions.php に下記を記述します。

functions.php

<?php
/**
 * Summary.
 *  Widget Area を作成する関数
 */
function create_widget_area() {
	register_sidebar(
		array(
			'name'          => 'サイドバーウィジェット',
			'id'            => 'sidebar_widget',
			'description'   => 'サイドバーに表示するウィジェットです',
			'class'         => '',
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => '</li>',
			'before_title'  => '<h2 class="widgettitle">',
			'after_title'   => '</h2>',
		)
	);

	register_sidebar(
		array(
			'name'          => 'フッターウィジェット',
			'id'            => 'footer_widget',
			'description'   => 'フッターに表示するウィジェットです',
			'class'         => '',
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => '</li>',
			'before_title'  => '<h2 class="widgettitle">',
			'after_title'   => '</h2>',
		)
	);

}

// widgets_init にフック.
add_action( 'widgets_init', 'create_widget_area' );

このプログラムを記述した状態で管理画面を表示することで、下記が確認できると思います。

外観メニューに「ウィジェット」が表示され、クリックすることでウィジェット設定画面に遷移する
ウィジェット設定画面から作成したウィジェットエリアのにウィジェットの登録ができる

前述の各手順に対応する部分は下記の通りです。

1. ウィジェットエリアを作成する関数を作成

まずはウィジェットエリアを作成する関数を作成します。

/**
 * Summary.
 *  Widget Area を作成する関数
 */
function create_widget_area() {
/* 略 */
}

2. その関数の中で register_sidebar 関数を実行

そしてウィジェットエリアを作成する関数の中で register_sidebar 関数を実行します。このプログラムでは id がそれぞれ ‘sidebar_widget’ と ‘footer_widget’ の２つのウィジェットを作成しています。

register_sidebar(
	array(
		'name'          => 'サイドバーウィジェット',
		'id'            => 'sidebar_widget',
		/* 略 */
	)
);

register_sidebar(
	array(
		'name'          => 'フッターウィジェット',
		'id'            => 'footer_widget',
		/* 略 */
	)
);

3. その関数をアクションフック “widgets_init” にフック

最後に作成した関数を widgets_init フックにフックします。これによりフックした create_widget_area 関数がワードプレス起動の途中で実行され、そこでウィジェットエリアが作成されることになります。

add_action( 'widgets_init', 'create_widget_area' );

フックについては詳しく知りたい方は是非下のページも読んでみてください。

ワードプレスのフックとは？使い方は？初心者向けに分かりやすく解説します！

ウィジェットエリアの表示

ウィジェットエリアは作成しただけでは表示されません。次はそのウィジェットエリアの表示方法について解説します。

ウィジェットエリアを表示する方法

ウィジェットエリアは下記の２つの手順により表示することが可能です。

is_active_sidebar 関数を実行してウィジェットエリアが有効かを確認
dynamic_sidebar 関数を実行してウィジェットエリアを表示

実質的にウィジェットエリアを表示するのに必要なのは手順 2. の dynamic_sidebar 関数の実行のみです。

ただし無効な id のウィジェットエリアを表示するとエラーとなってしまうため、安全なページ表示を行うために手順 1. も行なった方が無難です。

ウィジェットエリアの表示に使用する関数

ウィジェットエリアの表示に使用する関数は「dynamic_sidebar 関数」と「is_active_sidebar 関数」です。

dynamic_sidebar 関数

dynamic_sidebar 関数はウィジェットエリアを表示する関数です。

dynamic_sidebar 関数の使い方は下記の通りです。

<?php dynamic_sidebar( $index ); ?>

dynamic_sidebar 関数の引数は下記の通りです。

$index：ウィジェットエリアの id もしくは name を指定（より具体的には、register_sidebar 関数に指定した id もしくは name を指定）

dynamic_sidebar 関数の戻り値は下記の通りです。

true：ウィジェットエリアが表示できた場合
false：$index に対応するウィジェットエリアがない、そのウィジェットエリアにウィジェットが登録されていない場合

is_active_sidebar 関数

is_active_sidebar 関数はウィジェットエリアが有効かどうかを判断する関数です。

is_active_sidebar 関数の使い方は下記の通りです。

<?php is_active_sidebar( $index ); ?>

is_active_sidebar 関数の引数は下記の通りです。

$index：ウィジェットエリアの id もしくは name を指定（より具体的には、register_sidebar 関数に指定した id もしくは name を指定）

is_active_sidebar 関数の戻り値は下記の通りです。

true：引数で指定した id もしくは name のウィジェットエリアが有効な場合
false：上記以外の場合

下記のように is_active_sidebar 関数の戻り値が true の場合のみ dynamic_sidebar 関数を実行することで、無効なウィジェットエリアの表示を防ぐことが可能です。

<?php
if ( is_active_sidebar( 'sidebar_widget' ) ) {
	dynamic_sidebar( 'sidebar_widget' );
}
?>

ウィジェットエリアを表示するプログラム

ここからはウィジェットエリアを表示するプログラムの例を実際に示していきます。

サイドバーにウィジェットエリアを表示する

まずサイドバーにウィジェットエリアを表示します。

編集するファイルはテーマのテンプレートファイルの一つである sidebar.php になります。

もし作成しているテーマにサイドバーが無い（sidebar.php が無い）のであれば、まずは下記のページでサイドバーの作成を行ってから下記のプログラムを試していただければと思います（後に出てくる footer.php に関しても同様です）。

【ワードプレス】テーマの作り方②：ヘッダー・フッター・サイドバーを追加する

下記がウィジェットエリアを作成するプログラムで作成したウィジェット ‘sidebar_widget’ を表示するプログラムになります。

<div id = 'sidebar' role = 'complementary'>
<?php
/* ここからウィジェットエリア表示 */
if ( is_active_sidebar( 'sidebar_widget' ) ) {
	echo '<ul id="sidebar widget">';
	dynamic_sidebar( 'sidebar_widget' );
	echo '</ul>';
}
/* ウィジェットエリア表示ここまで */
?>
</div>

実際にウィジェットエリアの表示を行なっているのは下記部分になります。

/* ここからウィジェットエリア表示 */
if ( is_active_sidebar( 'sidebar_widget' ) ) {
	echo '<ul id="sidebar widget">';
	dynamic_sidebar( 'sidebar_widget' );
	echo '</ul>';
}
/* ウィジェットエリア表示ここまで */

ul タグの必要性

dynamic_sidebar 関数の実行前後に ul タグを付加しているのは、register_sidebar に指定する ‘before_widget’ と ‘after_widget’ でウィジェットをリスト形式で表示する（li タグを付加）ことを指定しているためです

‘before_widget’ と ‘after_widget’ でリスト形式で表示することを指定しないのであれば、この ul タグは不要です

あなたが適用したいスタイルに合わせて、この辺りは調整していただければ良いです

上記プログラムを記述したら、ページの表示をしてみてください。下の図のようにサイドバーにウィジェットエリアに設定したウィジェットが表示されれば成功です。

ウィジェットエリアにウィジェットが設定されていないと何も表示されませんので、表示されない場合は管理画面のウィジェットメニューから作成したウィジェットエリアにウィジェットを追加して再度ページ表示してみてください。

フッターにウィジェットエリアを表示する

ウィジェットの表示に使用する関数に “sidebar” が含まれているのでサイドバーにしか使用できないように感じてしまいますが、実は dynamic_sidebar 関数によりサイドバーだけでなくページのさまざまな箇所にウィジェットを表示することが可能です。

例えば footer.php に下記のように記述すれば、ページのフッター部分にウィジェットを表示することも可能です。下記はウィジェットエリアを作成するプログラムで作成したウィジェット ‘footer_widget’ を表示するプログラムになります。

// ウィジェットエリアを作成
<hr />
<div id="footer" role="contentinfo">
<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
	<p>
		<?php
		/* ウィジェットエリア表示ここから */
		if ( is_active_sidebar( 'footer_widget' ) ) :
			echo '<ul id="footer widget">';
			dynamic_sidebar( 'footer_widget' );
			echo '</ul>';
		endif;
		/* ウィジェットエリア表示ここまで */

		printf(
			/* translators: 1: blog name, 2: WordPress */
			__( '%1$s is proudly powered by %2$s' ),
			get_bloginfo( 'name' ),
			'<a href="https://wordpress.org/">WordPress</a>'
		);
		?>
	</p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

表示結果は下記のようになります。先ほど表示したサイドバーに加えフッターにもウィジェットが表示されていることが確認できると思います。