WordPressを使用してると当たり前のように見ている記事一覧の表示は、一体どのようなコードを記述して記事一覧を取得しているのか知りたくなりました。
WordPress codexを読んでも「ループ」を使えば記事一覧を取得できる。というくらいしか私には理解できませんでした。
それならWordPressの記事一覧を取得するPHPコードを記述しながらの方が理解の深まりも早いように思ったので、ループでWordPressの記事一覧を取得してみます。
WordPressで記事一覧を取得するコード
さっそくですがWordPressで記事一覧を取得するコードは以下のように記述しました。
<div id="content">
<?php if(have_posts()): while (have_posts()):the_post(); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<p class="postinfo">
<?php echo get_the_date(); ?><?php the_time(); ?>｜カテゴリー：<?php the_category(' , '); ?>
</p>
</div>
<?php endwhile; endif; ?>
<div>
WordPressの記事一覧の取得は、記事一覧をどのように表示させるかによってループの中に記述する関数は違います。
けれど記事一覧の取得をするときに記述する「ループ」の開始と終了をするコードは必ず使います。
今回は基本的なコードの記述をしてWordPressに記事一覧を取得して表示させたのですが、コードを記述したことで分かったのは、基本的に以下のことを理解する必要がありました。
- ループについて
- ループの中で処理をする関数について
この2つを基本に覚えておけば、WordPressに記事一覧を取得するときの基礎にできると思えました。
WordPressのループを記述する
記事の冒頭から、ちょくちょく登場してきた用語「ループ」はWordPressの投稿を表示するために使用するPHPコードです。
WordPressの「ループ」はテーマを作成したり、既存テーマをカスタマイズするときに便利に使える機能です。たとえばindex.phpのテンプレートファイルにループを記述してループ内に記事一覧を取得するループ処理を記述すると、ループ処理した投稿の情報を表示できます。
私がWordPressに記事一覧の取得をしたくて記述したコードも、index.phpを作成して記事一覧を取得しました。
WordPressのindex.phpでブログのトップページを表示したい。そしてトップページのコンテンツは記事アーカイブ表示に必要な各投稿を取得して記事一覧にしたい。
ということをループの開始部分と終了部分の間に記述したHTMLやPHPコードで各投稿の表示ができるのがWordPressの「ループ」です。
実際に記述してみたループとループの中のPHPコードを紐解きながら説明することの方が分かりやすいかと思います。
index.phpの中で記事一覧を取得します。
記事一覧を取得するループを開始する
WordPressで記事一覧を取得し表示するために使うループの始まりは以下のようにコードを記述します。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>
1行目がループ開始の記述です。画像だと7行目です。2行目はループの終了をしています。画像なら20行目です。
ループで取得する記事の一覧の取得内容はループの始まりの次に記述します。
記述してループが開始すると、最新の記事と記事に関する情報をデータベースから取得するためにループ処理が始まります。
もっと細かくした説明はcodexの説明を参考にさせていただきました。
データベースとの繋がりはhave_post()が$wp_query->have_posts()を呼び出し、ループカウンターと投稿配列に残った投稿の有無をチェックします。
そしてthe_post()は$wp_query->the_post()を呼び出し、ループカウンターを進め、グローバルの$post変数と、全てのグローバル投稿データをセットアップします。ループが完了したら、have_posts()がfalseを返し、終了します。
ということで何がなんだか分かりませんが、ようはWordPressの投稿記事はデータベースに格納してるので、ループ処理の記述の内容でデータベースに指示を出して記事一覧の取得ができる、ということです。
このとき記事一覧の取得のためにデータベースに指示する記述で必要なのが2つのWordPress関数とPHPのif文とwhile文です。
if(have_posts()):とif文をつけて投稿記事がデータベースに存在するかどうか確認する記述です。
そして
while ( have_posts() ):
データベースに投稿がある場合の処理をします。have_post関数で投稿記事をwhileで繰り返して表示します。
the_post()は次の処理をする。つまり次の投稿を取得するためにループをする必要な記述です。
これらのループ処理をまとめると以下のようになります。
- もし投稿が表示できれば、次へと進む
- そして一覧に存在してる投稿ごとそれぞれの
- 何かの処理を行う
記事一覧を取得したループを終了する
始まりがあれば終わりもある。ループにも終わりがあります。
ループを終了する記述は<?php endwhile; endif; ?>です。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>
WordPressがブログのヘッダーを読み込み終わってから、テンプレートまでたどり着くと、投稿のループに到達します。そしてwhileでループを回して記事一覧を取得して投稿にたどり着いたら、endwhileで終了します。
WordPressの記事一覧を取得するループ内の記述
WordPressで記事一覧の取得をするループ処理をループの始まりと終了の中に記述します。どのような記事一覧をブログに表示したいかにより、ループ処理の記述する関数も違います。
いろいろありますが、ループ内に記述する関数の内容は以下のように表示しようと思います。
- タイトル
- パーマリンク
- 記事本文
- 投稿日
- 投稿時間
- 記事が属してるカテゴリー
上記の一つずつをループ内に記述するときには、どのようにHTMLやPHP、そしてWordPressの関数を記述すればいいのか説明していきます。
記事タイトルを取得
記事一覧で表示する記事タイトルをループの中に記述します。
<h2><?php the_title(); ?></h2>
the_title()はループの中で使用するWordPressの関数です。そして記事一覧のタイトルは<h2></h2>タグでマークアップします。
そして取得して表示した一覧は最新の記事10件を表示します。この件数の調整をするときは管理画面の設定の「表示設定」の「1ページに表示する最大投稿数」で件数調整できます。
記事のパーマリンクを取得
次にループの中で処理されて表示される記事一覧のパーマリンクのURLを取得する記述をします。
<?php the_permalink(); ?>
the_permalink()もWordPressの関数で、ループの中で使います。
<h2><a href=”<?php the_permalink(); ?></a></h2>
the_permalink()の記述は、記事タイトルを取得する関数the_title()をリンクテキストにするのでHTMLのh2タグとaタグを合わせて記述します。
<h2>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
</h2>
そうすることで記事一覧の取得したときにタイトルがリンクされた状態をブログに表示できます。
記事本文を取得
次は記事一覧を取得するとき、記事本文をループ内に含めて取得する記述をします。
<?php the_content(); ?>
the_content()もWordPress関数です。ループ内で使用することで記事の本文を取得できます。
the_content()は記事の本文を全文取得します。そのため一覧として取得する一つひとつの記事の本文が全て下に長くなってしまいます。
そんなときの記事の抜粋する方法は、本文中に<!–more–>クイックタグをつけます。そうすると先頭からそのクイックタグまでの内容のみを記事一覧で抜粋できます。
<!–more–>を毎回つけるが面倒な場合はthe_content()を使わないで、the_excerpt()に切り替えて記述します。そうすると抜粋できます。
投稿日を取得
ループ処理で取得する記事一覧に投稿日を含める場合はget_the_date()を記述します。
<?php echo get_the_date(); ?>
get_the_date()をループ内で記述して記事一覧の取得をすると記事の投稿日を文字列として取得します。
表示される日付のフォーマットはWordPressの設定の一般にある「日付フォーマット」の設定が適用されます。
投稿時間を取得
記事一覧の取得に投稿時間も表示するときはthe_time()をループ内に記述します。
<?php the_time(); ?>
the_time()もWordPressの関数で、ループの中で記事一覧取得をした各投稿の時間を表示する場合に記述します。
画像では投稿日に寄り過ぎて見づらくなってしまいましたね..
記事一覧で投稿日の表示は見るけど、投稿時間を見ることはあまりないのでお好みで実装ですね。
記事が属してるカテゴリーを取得
最後に記事が属するカテゴリーへのリンクを取得する記述です。ループで取得した記事一覧の各記事が属してるカテゴリーを取得し表示されます。
<?php the_category(‘ , ‘); ?>
the_category()もWordPress関数です。ループの中で使う関数です。
the_category()のまま記述するとulタグとliタグでリスト形式になってしまいます。これは複数のカテゴリーに属していたときに使い勝手が悪くなってしまいます。
リスト形式の解除をする場合はthe_category()のパラメータにthe_category(‘ , ‘)のようにカンマと指定します。
まとめ
WordPressで記事一覧の取得をするループを記述してループ処理の記述も記事にしてみました。
実際に記述してみると、「こういう感じで記事一覧を取得できるんだ」みたいな文字の説明以上の理解は深まりました。
記事一覧を取得してからはCSSでダサいデザインをして、しょぼい記事一覧ページに仕上げました。このまま「しょぼテーマ」を自作しようか悩んでます。
