WordPressで投稿した記事の内容をループ文を使用して表示させる｜WordPressでビジネスサイトをつくろう【第10回】

前回作成するサイトのテンプレートファイルを確認しましたが、今回は実際に空のテーマを作成したものにWordpressのタグを使用して投稿した記事データを表示させるために使用するタグとループ文についてまとめてみたいと思います。

このループ文はWordpressでは非常に使用頻度が高いタグですが、一番初めにでてくるPHPのプログラム文のようなものでPHPを勉強していない人には一瞬戸惑いますが簡単ですので、その使い方を見て行きたいます。

WordPressの記事の新規投稿画面

WordPressでページを作成する際に使用する『投稿』や『固定ページ』などの入力欄でデフォルト状態で入力できるものを見ていきます。

※入力する欄はカスタマイズして増やすことも可能です。

記事の投稿には「タイトル」「本文」「抜粋」の3つのスペースをまず基本とします。

他に細かく入力欄を設定したい場合は「カスタムフィールド」という投稿スペースをカスタマイズする機能がありますがこちらについては別途解説予定です。

※入力スペースに「抜粋」欄が見えない場合は、右上の「オプション」をクリックし、抜粋のチェックをいれると入力欄が見えるようになります。

投稿毎のURLを設定するパーマリンク設定

また投稿した記事のURLになる部分は「パーマリンク」設定欄になります。

記事を新規投稿ボタンを押した段階ではタイトル入力欄の下には何もありませんが、文字を入力したり、カテゴリーを選択するなどすると下にパーマリンク設定欄がでてきます。

今回の作例ではカテゴリーを「サンプル」として、スラッグ名を「sample」としました。

こちらに表示されるのはカテゴリー名ではなく、スラッグ名になりますので、カテゴリー作成時にはスラッグ名を設定するのを忘れないようにしましょう。

その次にでてくるのが、投稿時の記事のURLとなる部分になります。

何も入力しない状態ですとタイトルに入力した内容が入るので注意が必要です。

こちらは日本語タイトルの場合はURLが日本語から変換されてしまうので必ず各記事に投稿毎に半角英数で名前設定しましょう。

このURLの部分はWordpressのデフォルトのものではなく、「設定」→「パーマリンク設定」で設定したものになります。

参考：第3回　WordPressでサイト構築前に行う設定をまとめる（一般設定編）にまとめた「パーマリンク設定

投稿時のパーマリンク設定について

投稿の記事毎のURLの設定は忘れず入力させましょう。

未入力のままですとタイトルが入るので自分で入力してOkで確定させます。

投稿時の内容を表示させるWordPressタグ

パーマリンク設定はURL部分なのでブラウザのアドレス部分に当たる部分なので実際に画面に表示させる情報をどのように引き出すかを見ていきます。

投稿画面の内容を出力させるWordPressタグ

それぞれの情報の出力には「<?php the_○○○(); ?>」となっていてわかりやすくなっています。

自分の中でよく使う表記をテキストエディタなどでメモしておくと毎回記述する必要がなくなり便利です。

ただし、これらのタグはそのまま記述するだけでは、複数の記事を表示させる際に常に最新の物が表示されてしまいます。

ループ文がない状態では複数の記事が表示されません。

そこで使用するのがループ文と呼ばれる書き方になります。

基本的なWordPressループ文

記事毎のデータを取得するには「ループ」と呼ばれるテンプレートタグを使用します。

ブログや通常サイトなどで投稿した記事を表示するために使われ、ループ内の条件によって表示を切り替えたりすることもできます。

この記述は毎回使える記述なのでコピペで使えるようにしておくと便利です。

コピー用ループのテンプレートタグ

<?php if(have_posts()): ?>
	<?php while(have_posts()): the_post(); ?>
	//投稿記事を表示
	<?php endwhile; ?>
<?php endif; ?>

上記のソースコードはまず「if(have_posts()) 」で投稿データがあるか調べています。

もし投稿記事がある場合は次の「while ( have_posts() ) : the_post();」 で投稿データを順にロードしてくれます。

「//投稿記事を表示」と書いてありますが、この箇所に投稿記事のどの内容を出力するのかを指定します。

それでは実際に記事のタイトルを表示してみましょう。

タイトルを表示させるには<?php the_title(); ?>タグを使用します。

存在する記事のタイトルが最新のものが上になり表示されます。

このようにして、サンプル投稿を2件にしてみました。

※ループ文自体はソースコードでは見えなくなります。

もし投稿記事がなかった場合

このようにループ文を使用しても、カテゴリーを初めから複数設定した場合に記事がない場合があります。そうした際には記事がなかった場合の処理をします。

これらはjavascriptの条件分岐文のif文の考え方になります。

if-else文がわからないという方でも、次の様に考えるとわかりやすいです。

『もし○○だったらAへ、それ以外だったらBへ』と考えるとよいです。

if-else文を使って記事がなかった場合の分岐を作成

elseを使いそれ以外（記事がなかった場合）は次にいれた内容を表示させます。

コピー用ループのテンプレートタグ（投稿がなかった場合の対応）

<?php if(have_posts()): ?>
	<?php while(have_posts()): the_post(); ?>
	/* 投稿情報を表示*/
	<?php endwhile; ?>
<?php else: ?>
	/*投稿記事がなかった場合の処理*/
<?php endif; ?>

タイトルと本文をループされる場合

2つの記事があり、本文とタイトルを表示させた例

記事をすべて消して確認した例

このようにすると表示させる部分は自由に呼び出すことができますので、まずはループ文の基本をいつでも使えるように用意しておきましょう。

またループ文は下記のようにまとめて記述してある場合もあります。

ループ文をまとめて記述した場合

コピー用ループのテンプレートタグ（まとめて記述した例）

<?php if(have_posts()) : while (have_posts()) : the_post();?>
//投稿記事を表示
<?php endwhile; endif; ?>

最後に本日でてきました投稿画面の入力欄を出力させてみました。

コピー用ループのテンプレートタグ（投稿画面の入力した情報を出力）

<?php if(have_posts()): ?>
　　<?php while(have_posts()): the_post(); ?>
   　　　 // 投稿した記事のタイトルを表示
    <h2><a href="<?php the_permalink(); ?>">
    <?php the_title(); ?></a></h2>
    　　　//投稿した記事の本文を表示
    <?php the_content(); ?>
    　　　//投稿した記事の抜粋を表示
    <?php the_excerpt(); ?>
    <p><?php the_date(); ?> <?php the_time(); ?></p>
    <?php the_category(); ?>
    <p><?php the_tags(); ?></p>
　　<?php endwhile; ?>
　　<?php else: ?>
　　<p>現在記事はありません。</p>
<?php endif; ?>

レイアウトの調整は必要に応じてclassやidの設定をしてCSSで調整します。

実際の表示とソース（サンプル投稿を1件に設定）

今回は以上になります。

ループの分岐文は少しHTMLとCSSとは馴染みがないものになっていますが、WordPressではこの書き方で記事を表示させることができると覚えてしまいましょう。

またそれぞれの出力するタグも毎回同じですのでWordPressでは少しづつこのようなタグを覚えていくことによって簡単にサイトを作っていき事ができますのでPHPが苦手という人でも大丈夫です。