ゆるくはじめるWordPress.

ループを使って投稿を表示させる【WordPressテーマ作り STEP8】

the-loop-top

ループって何かって言うと、投稿を表示させるためのコードの事。普通投稿記事は複数あるものなので、投稿の数だけ繰り返して(ループ)処理されるようになってます。
これまで紹介してきたものよりちょっと複雑ですが、テーマを作るなら避けては通れないこのループ。今回はループ用のテンプレートタグの使い方なんかも含めながら、基本的な内容をまとめてみました。

ループの使い方

ループの構造

ループはテンプレートファイルの中で以下のように書いて使います。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- ここに投稿内容を表示させる処理(1) -->
<?php endwhile; else : ?>
    <!-- ここに投稿が無かった時の処理(2) -->
<?php endif; ?>

have_posts()は投稿があるかをチェックする関数。まずif文で投稿をチェック、表示できる投稿があればwhile(ループ)に進み、投稿をあるだけ全部(1)の形で表示。無ければelseに進んで(2)の処理を実行します。


処理を入れてみる

HTML

<div>
  <span>2016-01-01</span>
  <span>Category name</span>
  <span>tag01,tag02</span>
  <h1>記事のタイトル</h1>
    <img src="" alt="">
    <h2>記事の見出しh2</h2>
    <p>記事の文章。</p>
    <h3>小見出しh3</h3>
    <p>記事の文章。</p>
</div>

例えば上記のように記事部分をマークアップしている場合、画像や記事の文章は記事の本文としてまとめて出力されるので次のような形にします。

HTML

<div>
  <span>2016-01-01</span>
  <span>Category name</span>
  <span>tag01,tag02</span>
  <h1>記事のタイトル</h1>
  <p>記事本文</p>
</div>

これをさっきのループに入れてみます。
さらに、表示できる記事が無かった時「まだ記事がありません。」と表示されるようにしておきました。

テンプレートファイル

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div>
  <span>2016-01-01</span>
  <span>Category name</span>
  <span>tag01,tag02</span>
  <h1>記事のタイトル</h1>
  <p>記事本文</p>
</div>
<?php endwhile; else : ?>
    <p>まだ記事がありません。</p>
<?php endif; ?>

そして次はここにループ用のテンプレートタグを入れていきます。


ループで使えるテンプレートタグの一例

the_title() 投稿のタイトルを出力
the_content() 投稿の本文を出力
the_time() 投稿の時間を出力
the_category() 投稿が属するカテゴリー名をリンク付きで出力
the_tags() 投稿に付けられたタグをリンク付きで出力
the_permalink() 投稿のパーマリンクのURLを出力

これらはループ中でのみ使用できます。
投稿日時を出力するタグにthe_date()というのもありますが、こちらは同日の投稿があると最初の投稿でしか表示されない仕様だそうなので、the_time()を利用しておいた方がよいです。
その他のタグについて詳しくはこちらで:テンプレートタグ – WordPress Codex 日本語版


テンプレートタグを入れてみる

では先程のループにテンプレートタグを入れてみます。

テンプレートファイル

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div>
  <span><?php the_time(); ?></span>
  <span><?php the_category(); ?></span>
  <span><?php the_tags(); ?></span>
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
  <p><?php the_content(); ?></p>
</div>
<?php endwhile; else : ?>
    <p>まだ記事がありません。</p>
<?php endif; ?>

これで記事ごとに設定した内容が出力されるようになりました。
ですが例のごとくテンプレートタグには初期値が設定されているので、表示を調整して整えます。


the_time()

the_time()はデフォルトでは時間だけが表示されている状態なので、これを20XX-01-01の形式で出力されるようにするには次のように。

<?php the_time('Y-m-d'); ?>

Y(4桁の西暦)、m(月を先頭に0を付けた形で表示)、d(日を先頭に0を付けた形で表示)を-(ハイフン)で区切った形で出力します。
その他の詳しい日時の書式はこちら:日付と時刻の書式 – WordPress Codex 日本語版


the_category()

the_category()はデフォルトではリスト形式で出力されるので、区切り文字を指定しておけば横並びで出力されるようになります。下記は半角スペースで区切って表示させる例。

<?php the_category(' '); ?>

the_tags()

the_tags()はデフォルトで『タグ:tag1,tag2,tag3』と頭に文字付で表示されるのでこれを消したいと思います。

<?php the_tags('', ',', ''); ?>

(‘頭に付ける文字’,’区切り文字’,’後ろに付ける文字’)となっているので、上記のようにすれば前後の文字を削除して,(コンマ)で区切った形に出力できます。


the_content()

本文中に<!--more-->を入れておくと一覧ページなどではそれ以降の内容を表示させず、代わりに『(さらに…)』という続きを読むリンクが付きます。このリンクの文字を変えたい場合、以下のようにすると好きな表現に変える事ができます。

<?php the_content('続きを読む'); ?>

これでリンクの文字が『続きを読む』に変わります。
元々more-linkとクラスが付いているので、これを利用してCSSで装飾する事も可能。


index.phpに入れてみる

実際にこのループ文をindex.phpに入れて表示させてみるとわかるのですが、一覧ページと単一の記事ページとでは表示の仕方が変わります。
一覧ページでは<!--more-->までの内容が複数並んでいるのに対して、記事ページではその記事のみの全文が表示されています。
index.phpしか用意せず、その中に1つループが設置されているだけの状態でもページによって処理が変わってるんですね。良くも悪くもこうやってWordPressが勝手にやってくれる事って結構あったりします。1から作ってこういう事を知ってみると、今後新たにテーマを作る時にもすごく役立つなぁと思いました。
次回は条件文とページャーについてまとめたいと思います。完成まであとひといき!


スポンサーリンク

公開日: