記事一覧

sidebar.php を作成する

 posted by suzu
テンプレート作成のススメ

前の記事 「header.php / footer.php を作成する」 では
index.php から 各ページ共通的な箇所になるであろう部分を
切り出し、header.php、footer.php を作成しました。
今回は同じように、ウィジェットを表示するエリアである
左右のサイドバー部分を切り出し、sidebar.php を作成します。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?></title>
	<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
	<div id="container">
		<div id="header">header</div>
		<div id="wrapper">
			<div id="side-left">side L</div>
			<div id="main">
			</div>
		</div>
		<div id="side-right">side R</div>
		<div id="footer">footer</div>
	</div>
<?php wp_footer(); ?>
</body>
</html>

サイドバーを表示 (しようと) している箇所をハイライト表示しています。

作成するテンプレートを整理する」 でも触れましたが、
get_sidebar 関数を呼び出すと sidebar.php
インクルードすることができます。
get_sidebar 関数は、「get_sidebar()」 としてパラメータなしで呼び出すと
sidebar.php をインクルードしてくれますが、
文字列パラメータを指定して 「get_sidebar(‘パラメータ‘)」 というふうに
呼び出すと、sidebar-[パラメータ].php をインクルードしてくれるので、
用途や配置場所によって複数用意することも可能です。
分かりやすい名前をつけておくとよいでしょう。
WordPress 3.8 や 3.9 のデフォルトテーマである TwentyFourteen は
左サイドバー → sidebar.php、
右サイドバー → sidebar-content.php、
フッターエリアサイドバー → sidebar-footer.php
としていますね。

SmartStyle の場合は、サイドバーを左右に用意しますので、
(分かりやすさを重視して)
左サイドバー → sidebar-left.php、
右サイドバー → sidebar-right.php
としています。これに沿って説明します。

【左サイドバー】

				side L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?></title>
	<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
	<div id="container">
		<div id="header">header</div>
		<div id="wrapper">
			<div id="side-left">
<?php get_sidebar('left'); ?>
			</div>
			<div id="main">

【右サイドバー】

			side R
			</div>
		</div>
		<div id="side-right">
<?php get_sidebar('right'); ?>
		</div>
		<div id="footer">footer</div>
	</div>
<?php wp_footer(); ?>
</body>
</html>

分割後は上記のようになります。
自作テーマ用のディレクトリへ、編集した header.php、footer.php と
新規に作成した sidebar-left.php、sidebar-right.php を配置して
確認してみてください。前回 header.php、footer.php を分割した時と同様、
表示上は何も変わっていません。
これは、get_sidebar 関数 がきちんとお仕事をしてくれている証拠です。

ただ、サイドバーには、ウィジェットを表示させる前提です。
これでは何の役にも立ちませんね (笑)
ですが、ウィジェットを表示させるためには、function.php での
仕込みも必要になりますので、それは後々の記事で・・・

関連記事

eyecatch_template

カスタムヘッダーを表示する – [1]

前回までの記事 「index.php を作成する – [1]」 「i...

記事を読む

eyecatch_template

home.php を作成する

今回は、ブログ投稿インデックス (一覧) ページである home.php を作成...

記事を読む

eyecatch_template

カスタム背景を使用する

前の記事までのシリーズ 「カスタムヘッダーを表示する – [1]」 ...

記事を読む

カレンダー

2019年7月
« 7月    
 123456
78910111213
14151617181920
21222324252627
28293031  
PAGE TOP ↑