2013年09月06日 追記・変更
各パーツファイルの中身を編集していこう
ファイル分割が完了したと思うので、それでは次にそれぞれのファイルの中身を編集していく。今現在の状態では、まだWordPressの情報を出力出来ていない。
前回作成した、header.php、loop.php、sidebar.php、footer.phpを編集していこう。
サイト名をWordPressで設定したサイト名にWordPressテンプレートタグを使用して書き換えていこう。
テンプレートタグ全てを覚える必要はない。どのタグを使うかを把握していれば問題ない。
参考：覚えるべきWordPressテンプレートタグ
header.phpの書き換え
変更項目：上から順にUTF-8、サイト名、style.css、サイトの概要、サイトURL を書き換えていく。
具体的な記述
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<meta name="description" content="<?php bloginfo('description'); ?>">
</head>
<body>
<div id="container">
<!-- ヘッダー -->
<div id="boxA">
<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
</div>
<!-- /ヘッダー -->
loop.phpの書き換え
変更項目：（上から順に） カテゴリー名、記事１～５へのリンク、記事１～５タイトル、本文 今回は記事を1つ表示させるための表示内容を記述した後、ループ文で「表示しなければならない記事が存在する間」だけ回すといった条件にて処理を行う。 まずは1つの記事を表示させるための箇所を見ていこう。<div class="entry"> カテゴリー名：<a href="記事１へのリンク">記事1タイトル</a><br /> 本文本文本文本文本文本文本文本文本文本文本文本文<br /> </div>となっている。これをWordPressタグに変更しよう。
その後、上記をワードプレス条件分岐タグと、PHPのif文を併せて書き換える。
記事の一覧表示で使う、WordPress条件分岐タグとwhile文
<?php if(have_posts()) : while(have_posts()) : the_post(); ?> ここで、表示しなければならない記事がある分だけループするので the_content();などを使えば、各記事の内容が出力される。 <?php endwhile; else: ?> 記事がない場合に表示させる文章など。 <?php endif; ?>
具体的な記述
<div id="boxB"> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <div class="entry"> <?php the_category(); ?>：<a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a><br /> <?php the_content(); ?><br /> </div> <?php endwhile; else: ?> 記事がありません。 <?php endif; ?> </div>
sidebar.phpの書き換え
現在、相対パスでファイルを呼び出しているので、これをテーマのディレクトリまでの絶対パスと、画像ディレクトリ名とファイル名という形で書き換えなければいけない。具体的な記述
<!-- サイドバー -->
<div id="boxC">
<img src="<?php bloginfo('template_directory'); ?>/images/panda.jpg">
</div>
<!-- /サイドバー -->
footer.phpの書き換え
フッター部分のサイト名を変更しよう。具体的な記述
<!-- フッター -->
<div id="boxD">
Copyright © 2013 <?php bloginfo('name'); ?>
</div>
<!-- /フッター -->
</div>
</body>
</html>
