記事一覧

ウイジェットを表示する

公開日：　 最終更新日： 　posted by suzu
テンプレート作成のススメ

今回は、サイドバー領域に、標準ウィジェットを表示できるよう、
組み込みをします。
WordPress 3.8 や 3.9 に標準でインストールされてある TwentyFourteen や
TwentyThirteen、TwentyTwelve なんかで、管理画面 [外観 - ウィジェット] から
自由にパーツを追加できるアレですね。

今回の作業対象は、ウィジェット表示用に用意した sidebar.php
(実際は左サイドバーである sidebar-left.php、右サイドバーである sidebar-right.php)
と function.php になります。

まず、function.php に以下のコードを追記します。

//--- ウイジェット追加
function sidebar_widgets_init() {
	// ウイジェット配置用サイドバー作成
	register_sidebar(array(
		'name'          => '左サイドバー',
		'id'            => 'sidebar-left',
		'description'   => '左側サイドバー領域に表示されます。',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	));
	register_sidebar(array(
		'name'          => '右サイドバー',
		'id'            => 'sidebar-right',
		'description'   => '右側サイドバー領域に表示されます。',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	));
}
add_action('widgets_init', 'sidebar_widgets_init');

ウィジェットは部品であり、サイドバーは部品であるウィジェットを
配置するための領域です。
ウィジェットを利用できるようにするためには
サイドバーを登録する必要があります。
一つ関数を作り、この中に register_sidebar 関数を使って
サイドバーを登録する処理を記述します。
複数サイドバーを用意する場合は、上記例のように
用意するサイドバーの分だけ記述しましょう。

register_sidebar 関数のパラメータには、サイドバーの属性情報を
連想配列で与えてやります。
id はサイドバーIDです。ユニークになるようにつけましょう。
name はサイドバー名、description はサイドバーの説明となります。
このあたりは管理画面の [外観 - ウィジェット] での表示に反映される部分ですので、
比較的分かりやすいでしょう。
before_widget と after_widget はウィジェットの前後に挿入されるタグ、
before_title と after_title はウィジェットタイトルの前後に挿入されるタグになります。

そして、この作成した関数を、add_action 関数を使って
WordPress にアクション関数として追加してやります。
第一パラメータは ‘widgets_init’ を、第二パラメータには作成した関数を指定して、
ウィジェットの初期化処理が走る際に、関数内の処理を走らせてやるようにします。
これで、管理画面 [外観 - ウィジェット] の画面でサイドバーが表示され、
ウィジェットが配置できるようになります。
 

実際にサイドバーを表示する箇所である、
sidebar-left.php と sidebar-right.php は以下のように記述します。

<?php
	if (is_active_sidebar('sidebar-left')) {
		dynamic_sidebar('sidebar-left');
	}
?>

<?php
	if (is_active_sidebar('sidebar-right')) {
		dynamic_sidebar('sidebar-right');
	}
?>

それぞれ2行目の is_active_sidebar 関数は、
パラメータで指定された名前もしくは ID のダイナミックサイドバーが
有効なものであるかどうか確認します。
有効 (true) であった場合、それぞれ3行目の dynamic_sidebar 関数で
ダイナミックサイドバーを表示しています。
これで、管理画面 [外観 - ウィジェット] の画面で配置されたウィジェットが
表示されるようになります。
 

では、ウィジェット用のスタイルを style.css に追記します。

/*-----------------------------
ウイジェット(左メニュー/右メニュー)
  一部冗長な記述になるが、後々のメンテナンス性を考慮し、ウイジェットごとに個別に指定しています
------------------------------*/
/* 基本指定 */
#side-left,
#side-right {
	font-size: 12px;
	line-height: 16px;
}
.widget a {
	color: #333333;
}
.widget a:hover {
	color: #cc0033;
}
/* ウイジェットタイトル */
.widget-title {
	font-size: 14px;
	font-weight: bold;
	line-height: 28px;
	vertical-align: middle;
	margin: 10px 0px 5px 0px;
	padding: 1px 0px 0px 30px;
	background-image: url(images/circle-gray.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.widget-title img {
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}
/* RSS */
.widget_rss .widget-title {
	vertical-align: top;
	margin: 10px 0px 5px 3px;
	padding: 1px 0px 0px 0px;
	background-image: none;
}
.widget_rss ul {
	list-style-type: none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_rss ul li {
	margin: 0px 0px 3px 0px;
	padding: 0px;
}
.widget_rss .rss-date {
	font-size: 10px;
	line-height: 12px;
}
.widget_rss rssSummary {
	font-size: 10px;
	line-height: 12px;
}
/* アーカイブ */
.widget_archive ul {
	list-style-type: none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_archive ul li {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
/* カスタムメニュー */
.widget_nav_menu ul {
	list-style-type: none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_nav_menu ul li {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
/* カテゴリ */
.widget_categories ul {
	list-style-type: square;
	list-style-position: outside;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_categories ul li {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
.widget_categories ul.children {
	list-style-type: circle;
	list-style-position: outside;
	margin: 0px 0px 0px 10px;
	padding: 0px;
}
.widget_categories ul.children li {
	margin: 5px 0px 0px 0px;
	padding: 0px;
}
/* カレンダー */
.widget_calendar table {
	line-height: 18px;
	width: 80%;
	margin: 0px auto 0px auto;
	padding: 0px;
	border-collapse: collapse;
	border: 1px solid #cccccc;
}
.widget_calendar caption {
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.widget_calendar thead th,
.widget_calendar tbody td {
	text-align: center;
	border: 1px solid #cccccc;
}
.widget_calendar thead th {
	background-color: #666666;
	color: #ffffff;
}
.widget_calendar tbody a {
	background-color: #ccffff;
	color: #0033cc;
	display: block;
}
.widget_calendar tbody a:hover {
	background-color: #66ccff;
	color: #0033cc;
}
.widget_calendar #prev {
	padding-left: 5px;
	text-align: left;
}
.widget_calendar #next {
	padding-right: 5px;
	text-align: right;
}
/* タグクラウド */
.widget_tag_cloud .tagcloud {
	line-height: normal;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
/* テキスト */
.widget_text .textwidget {
	line-height: normal;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
/* メタ情報 */
.widget_meta ul {
	list-style-type: none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_meta ul li {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
/* 固定ページ */
.widget_pages ul {
	list-style-type: none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_pages ul li {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
/* 最近のコメント */
.widget_recent_comments ul {
	list-style-type: none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_recent_comments ul li {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
/* 最近の投稿 */
.widget_recent_entries ul {
	list-style-type: none;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}
.widget_recent_entries ul li {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
/* 検索 */
.widget_search {
	margin: 10px 0px 20px 0px;
}
.widget_search .widget-title {
	margin: 0px 0px 5px 0px;
}
.widget_search #searchform {
	position: relative;
	margin: 0px;
	padding: 0px;
}
.widget_search #s {
	width: 156px;
	height: 24px;
	border: none;
	border-radius: 0px;
	color: #333333;
	font-size: 14px;
	padding: 4px 10px 4px 10px;
	background-color: #d7d7d7;
}
.widget_search #searchsubmit {
	position: absolute;
	top: 0;
	_top: 1px;
	left: 176px;
	border-radius: 0px;
}

ウィジェットごとにどんなタグや id、class が指定されているか
(ウィジェットのソースを全て読むのも大変だし) 分かりにくい
ところがありますので、少しずつ動きを見ながら指定していけば
いいかと思います。
 

如何でしたでしょうか？
では、また次回・・・

関連記事

eyecatch_template

page.php を作成する

前回の記事 「single.php を作成する – [1]」 「single.p...

記事を読む

eyecatch_template

HTMLタイトルを切り替える

前回までの記事で、index.php、header.php、footer.php...

記事を読む

eyecatch_template

作成するテンプレートを整理する

今回から、実際にテーマに必要なテンプレートの作成の準備に入ります。 先の記事 「...

記事を読む

Prev：
コピーライトを表示する
Next：
HTMLタイトルを切り替える

カレンダー

2025年11月
日 月 火 水 木 金 土
« 7月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  
PAGE TOP ↑