フッターやサイドバーにウィジェットを表示させる方法

カスタム

wpphp_widgets_view

WordPressにデフォルトで装備されているウィジェットをテーマの好きな場所に設置する
方法を紹介します。

ウィジェットの中にはカレンダー、カテゴリ一覧、固定ページ一覧などの
さまざまなデータがあり、これをテーマから呼び出すことで
長いテンプレートタグを書かずに簡単に好きなデータを表示することができます。

まずはテーマにウィジェットを追加しましょう。

functions.php を用意する

現在使用しているテーマファイル内の functions.php を用意します。
無い場合は同名ファイルを作成します。

テーマにウィジェットを追加する

例ではフッターにいくつかウィジェットを表示させようと思います。

以下のように好きな名前をつけます。(分かりやすい名前がおすすめです)
これでウィジェットが3つ作成されました。

<?php

register_sidebar(array('name' => 'フッター1'));
register_sidebar(array('name' => 'フッター2'));
register_sidebar(array('name' => 'フッター3'));

?>

ウィジェットに中身を追加する

これでウィジェットが追加されましたが、中身がまだからっぽです。
管理画面からウィジェットを編集します。

wpphp_widgets_view_sample01

管理画面左サイドバーの「外観」から「ウィジェット」を選択します。

wpphp_widgets_view_sample02

ウィジェット編集画面です。
上で追加したウィジェット3つが追加されていました。
開くとからっぽです。

wpphp_widgets_view_sample03

画面左側にたくさんのウィジェットがあるので、表示したいものをドラッグ&ドロップで追加していきます。
タイトルや設定はお好みで。変更後は「保存」ボタンを忘れずに押します。

これで完成です。

テーマにウィジェットを表示する

上でウィジェットが完成したので、これをテーマに組み込みます。

<?php dynamic_sidebar('フッター1'); ?>
<?php dynamic_sidebar('フッター2'); ?>
<?php dynamic_sidebar('フッター3'); ?>

ウィジェット表示するには一番始めに決めた名前を指定して呼び出します。
好きな場所に貼りつけます。

wpphp_widgets_view_sample04

表示されました!
例では見栄えのためにCSSを使用しました。

ウィジェットタイトルのリストマーク(・←これです)がいらない場合は
CSSで調整をします。

/* ウィジェットタイトルのリストスタイルをなくす */
li.widget {
	list-style: none;
}

ウィジェットを使うとコンテンツ内容の可変、並び替えが効きやすくなりますね。

カスタム

関連記事