WordPressで投稿した記事の内容をループ文を使用して表示させる

テクノロジー

2017.5.12 FRI

第10回 WordPressで投稿した記事の内容をループ文を使用して表示させる

前回作成するサイトのテンプレートファイルを確認しました。今回からは実際に空のテーマを作成したものにWordpressのタグを使用して投稿した記事データを表示させるために使用するタグとループ文についてまとめてみたいと思います。このループ文はWordpressでは非常に使用頻度が高いタグですが、一番初めに出てくるPHPのプログラム文のようなもので、PHPを勉強していない人には一瞬戸惑うかもしれませんが、意外と簡単ですのでその使い方を見て行きたいと思います。

解説：（有）ムーニーワークス　ハヤシユタカ

●WordPressの記事の新規投稿画面

Wordpressでページを作成する際に使用する『投稿』や『固定ページ』などの入力欄でデフォルト状態で入力できるものを見ていきます。
※入力する欄はカスタマイズして増やすことも可能です。

デフォルト状態の入力欄
（▲クリックして拡大）

抜粋欄が見えない場合は「オプション」から
チェックを入れる（▲クリックして拡大）

記事の投稿には「タイトル」「本文」「抜粋」の3つのスペースをまず基本とします。他に細かく入力欄を設定したい場合は「カスタムフィールド」という投稿スペースをカスタマイズする機能がありますがこちらについては別途解説予定です。
※入力スペースに「抜粋」欄が見えない場合は、右上の「オプション」をクリックし、抜粋のチェックをいれると入力欄が見えるようになります。

今回はこのサンプルサイトのテンプレートファイル構成を解説します。テンプレートのファイル構成は制作者によっていろいろな分け方がありますので、ひとつの例として思っていただければと思います。

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

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

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

こちらに表示されるのはカテゴリー名ではなく、スラッグ名になりますのでカテゴリー作成時にはスラッグ名を設定するのを忘れないようにしましょう。その次にでてくるのが投稿時の記事のURLとなる部分になります。何も入力しない状態ですとタイトルに入力した内容が入るので注意が必要です。

こちらは日本語タイトルの場合はURLが日本語から変換されてしまうので必ず各記事に投稿毎に半角英数で名前設定しましょう。このURLの部分はWordpressのデフォルトのものではなく、「設定」→「パーマリンク設定」で設定したものになります。

投稿する記事のURLを設定します
（▲クリックして拡大）

投稿時に設定するカテゴリー名と投稿時に設定する
スラッグ名をURLとします（▲クリックして拡大）

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

投稿の記事毎のURLの設定は忘れず入力させましょう
（▲クリックして拡大）

未入力のままですとタイトルが入るので自分で入力し
OKボタンを押して確定させます（▲クリックして拡大）

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

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

投稿画面の内容を出力させるWordPressタグ
（▲クリックして拡大）

ループ文がない状態では複数の記事が表示されない
（▲クリックして拡大）

それぞれの情報の出力には「<?php the_○○○(); ?>」となっていてわかりやすくなっています。自分の中でよく使う表記をテキストエディタなどでメモしておくと毎回記述する必要がなくなり便利です。ただし、これらのタグはそのまま記述するだけでは、複数の記事を表示させる際、常に最新の物が表示されてしまうという問題があります。

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

●基本的なWordPressのループ文

記事毎のデータを取得するには「ループ」と呼ばれるテンプレートタグを使用します。ブログや通常サイトなどで投稿した記事を表示するために使われ、ループ内の条件によって表示を切り替えたりすることもできます。

毎回使える記述なのでコピペで使えます（▲クリックして拡大）

上記のソースコードはまず「if(have_posts()) 」で投稿データがあるか調べています。もし投稿記事がある場合は次の「while ( have_posts() ) : the_post();」で投稿データを順にロードしてくれます。

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

それでは実際に記事のタイトルを表示してみましょう。タイトルを表示させるには<?php the_title(); ?>タグを使用します。

存在する記事のタイトルが最新のものが上になり表示されます（▲クリックして拡大）

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

ループ文自体はソースコードでは見えなくなります（▲クリックして拡大）

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

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

if-else文がわからないという方でも、『もし○○だったらAへ、それ以外だったらBへ』と考えるとわかりやすいでしょう。

if-else文を使って記事がなかった場合の分岐を作成します（▲クリックして拡大）

if-elseを使いそれ以外（記事がなかった場合）は次に
いれた内容を表示させます（▲クリックして拡大）

タイトルと本文をループされる場合
(▲クリックして拡大)

2つの記事があり、本文とタイトルを表示させた例
（▲クリックして拡大）

記事をすべて消して確認した例
（▲クリックして拡大）

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

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

ループ文をまとめて記述した場合（▲クリックして拡大）

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

レイアウトの調整は必要に応じてclassやidの設定
をしてCSSで調整します（▲クリックして拡大）

実際の表示とソース（サンプル投稿を1件に設定）
（▲クリックして拡大）

今回は以上になります。

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

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

●本連載で使用しているサンプルサイトをゼロから作成できる書籍

本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。

サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。

Profile
【林豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。

●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/

【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしいスタイルシートデザインの基本原則(2012/5/25)