IT知識の貯蔵庫

ここからが本番！まずはトップページであるindex.phpのメインコンテンツ部分を編集していきます。 htmlで作成したトップページのコンテンツ部分のコードはこんな感じになっています。

<div id="contents">
<h2>コンテンツ名</h2>
 <ul>
 <li>
 <a href="#">
 <img src="images/the_post_thumbnail_default.png" alt="デフォルト画像" />
 </a>
 <h3><a href="#">記事見出し</a></h3>
 <p>
 <span><a href="#">日付</a></span>
 <span><a href="#">カテゴリー</a></span>
 </p>
 </li>
 </ul>
 </div>

ブラウザで見るとこんな感じですね。（完成形と少し違いますが…）

記事の一つの枠がソースの<li>〜</li>に囲まれた部分となります。 ここでは出力する記事が存在するかどうかの判定、また、記事が存在するだけ<li>〜</li>の部分を繰り返し出力する設定を行います。

出来上がりはこんな感じになります。

 <div id="contents">
 <?php if ( have_posts()): ?>
 <h2>コンテンツ名</h2>
 <ul>
 <?php while ( have_posts() ) : the_post(); ?>
 <li>
 <a href="#">
 <img src="images/the_post_thumbnail_default.png" alt="デフォルト画像" />
 </a>
 <h3><a href="#">記事見出し</a></h3>
 <p>
 <span><a href="#">日付</a></span>
 <span><a href="#">カテゴリー</a></span>
 </p>
 </li>
 <?php endwhile; ?>
 </ul>
 <?php endif; ?>
 </div>

まずはif文とhave_posts関数を使用して、記事がある場合に出力する設定にします。

ソースの2行目

<?php if ( have_posts()): ?>

18行目に

<?php endif; ?>

と記述します。 次にwhile文とthe_post関数を使用して、記事の回数分ループ処理して出力します。

ソースの5行目

<?php while ( have_posts() ) : the_post(); ?>

と16行目

<?php endwhile; ?>

で囲まれた部分ですね。

これで<li>〜</li>が記事の数だけ出力されます。

カテゴリー:WordPress タグ: index.php, PHP, WordPress, テーマ, テンプレートタグ, トップページ