前の記事 「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 での
仕込みも必要になりますので、それは後々の記事で・・・
SmartStyle