WordPressテーマを自作しよう（4）記事一覧を表示する

前回までに、いくつかの情報を表示してそれをスタイルシートで調整できるようになりました。

　
今回は記事の内容を表示できるようにしてみましょう。

index.phpでループを使う

このシリーズの記事を順番に実践してくださっている方でしたら、現在の見た目はこんな具合かと思います。

index.phpの状態はこんなかんじですね。

<?php get_header(); ?>
ここにいろいろ表示する
<?php get_footer(); ?>

「ここにいろいろ表示する」と表示されているのは、上のようにそのまま書かれているからですよね。ここを編集して、投稿済みの記事が一覧で表示されるようにしてみましょう。
WordPressループという処理を使います。

<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
  <!-- 記事を探し、1つずつデータを拾って処理を繰り返すループ -->
  <?php while ( have_posts() ) : the_post(); ?>
  <!-- ループ内処理　ここから -->

  <!-- ループ内処理　ここまで -->
  <?php endwhile;?>
<?php else : ?>
  <!-- 記事が1件も見つからなかった時に表示される -->
  お探しの記事は見つかりませんでした。<br/>
<?php endif; ?>
<?php get_footer(); ?>

get_header と get_footer の間に処理を追加しています。
2行目で「公開済みの記事があるか？」を調べ、見つかったら4行目で1つずつピックアップして、最後の記事まで処理を繰り返します。
見つけた記事ごとに実行する処理は、5〜7行目に記入します。

この部分に関しては魔法の呪文だと思ってそのままにして大丈夫です！！

試しに、記事タイトル・投稿日時・記事本文を表示する処理を書いてみました。

  <article class="contents-list">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    （投稿日時：<?php echo get_the_date(); ?>） <?php the_time(); ?>）<br/>
    <?php the_content(); ?>
  </article>

2行目で記事名にリンクを貼り、3行目で投稿日時の情報を取得。4行目は記事本文です。

ループ内で表示できる情報は他にもいろいろあります。
よく使われるものを、この記事の最後にまとめますね。

• 投稿記事・記事一覧を表示する－WordPressループ
• WordPressで記事タイトルを表示する「the_title」と「the_title_attribute」の違い

記事1つ1つの境がわかりやすいよう、style.css にも処理を追加しました。

.contents-list{
  background-color: #fff;
  margin: 1em;
}

適当な記事をいくつか公開してから、実際に表示してみましょう。

基本的に本文は一言だけにしたんですが、「サンプル２」だけ more を入れたので「さらに…」と表示されていますね。
「サンプル２」または「さらに…」のリンク先には、全文表示されますよ。

ひとまずこれで、記事一覧が表示できました。
次以降の記事で表示内容を整えていきましょう。

手始めに投稿日時の部分を変えてみます。

まとめ

記事を表示するにはループを使います。

<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
  <!-- 記事を探し、1つずつデータを拾って処理を繰り返すループ -->
  <?php while ( have_posts() ) : the_post(); ?>
  <!-- ループ内処理　ここから -->

  <!-- ループ内処理　ここまで -->
  <?php endwhile;?>
<?php else : ?>
  <!-- 記事が1件も見つからなかった時に表示される -->
  お探しの記事は見つかりませんでした。<br/>
<?php endif; ?>
<?php get_footer(); ?>

ループ内では、例えば次の情報を取得・表示する事ができます。

記事タイトル	the_title(); （投稿者がタグを記入していることがある）
	the_title_attribute(); （タグを除去したもの）
記事URL	the_permalink();
投稿した日	echo get_the_date();
投稿した時間	the_time();
更新した日	the_modified_date();
更新した時間	the_modified_time();
記事本文	the_content();
記事が属するカテゴリー	the_category();
記事に付与したタグ	the_tags();