前の記事 「index.php を作成する – [2]」 で、
メインコンテンツ部分に記事一覧を表示するところまで作成しました。
今回は、index.php から 各ページ共通的な箇所になるであろう部分を
切り出し、header.php、footer.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">
<!-- 一覧表示部分ここから -->
<h2 class="archive-title"><?php bloginfo('name'); ?></h2>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry hentry">
<h3 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<div class="entry-box">
<span class="entry-date">
公開：<time class="published" datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time>
</span>
<br /><?php the_category(', '); ?><?php the_tags('', ', '); ?>
</div>
<p class="entry-excerpt"><?php echo mb_substr(get_the_excerpt(), 0, 40); ?>...</p>
<p class="entry-more"><a href="<?php the_permalink() ?>">続きを見る</a></p>
</div>
<?php endwhile; else : ?>
<p>記事がありません</p>
<?php endif; ?>
<!-- 一覧表示部分ここまで -->
</div>
</div>
<div id="side-right">side R</div>
<div id="footer">footer</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
記事一覧を表示する部分がハイライト表示されています。
よくよく考えてみてください。まだ未完成とはいえ、index.php は
なんとなく形になってきています。
これから先、アーカイブ一覧ページ (archive.php) や
個別固定ページ (page.php) も作成していくわけですが、
大多数の場合、一覧ページであろうが投稿ページであろうが、
(細かい部分を除けば) 表示する内容が違うのは、メインコンテンツの
(ハイライト表示されている) 部分だけだと思います。
ほぼ同じ表示や処理を行う部分は共通化 (一つのファイルに記述) しておくと
後々の修正 (メンテナンス) が楽になります。
「作成するテンプレートを整理する」 でも触れましたが、
get_header 関数を呼び出すと header.php を、
get_footer 関数を呼び出すと footer.php を
インクルードすることができます。
そこで、メインコンテンツより上の共通的な部分を header.php に、
メインコンテンツより下の共通的な部分を footer.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>
index.php の header.php、footer.php へ切り出した内容が記述してあった
元々の部分には get_header 関数、get_footer 関数をそれぞれ記述してやります。
<?php get_header(); ?>
<!-- 一覧表示部分ここから -->
<h2 class="archive-title"><?php bloginfo('name'); ?></h2>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry hentry">
<h3 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<div class="entry-box">
<span class="entry-date">
公開：<time class="published" datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time>
</span>
<br /><?php the_category(', '); ?><?php the_tags('', ', '); ?>
</div>
<p class="entry-excerpt"><?php echo mb_substr(get_the_excerpt(), 0, 40); ?>...</p>
<p class="entry-more"><a href="<?php the_permalink() ?>">続きを見る</a></p>
</div>
<?php endwhile; else : ?>
<p>記事がありません</p>
<?php endif; ?>
<!-- 一覧表示部分ここまで -->
<?php get_footer(); ?>
自作テーマ用のディレクトリへ、編集した index.php と 新規に作成した
header.php、footer.php を配置して確認してみてください。
前回作成した index.php の時と表示上は何も変わっていません。
これは、get_header 関数、get_footer 関数 がきちんとお仕事をしてくれて、
header.php と footer.php がインクルードされている証拠ですね。
次回は同様にして、sidebar.php を分離します。
SmartStyle