今回はWordPressオリジナルテーマの記事一覧ページの制作手順を解説します。
これまでに以下の作業を行いました。
今回解説する記事一覧ページがあれば、Webサイトに訪れた方がストレスなく閲覧できます。
あわせて、アクセス数向上などWebサイト運営でも外せない要素の一つです。
今回の記事を参考にして、記事一覧ページの制作を進めていただければ幸いです。
記事一覧ページとは？
記事一覧ページとは、以下のように記事が一覧で並んでいるページです。
タイトルや投稿日だけではなく、記事のイメージ画像(アイキャッチ)やリード文章だけ載せている場合もあります。
投稿記事一覧ページは、フロントページ(ホームページ)に表示する方法と固定ページに表示する2つの方法があります。
WordPress管理画面の『設定』⇒『表示設定』⇒『ホームページの表示』を「最新の投稿」にしている場合、以下のテンプレートのいずれかを使えばフロントページに一覧が表示されます。
- front-page.php
- home.php
- index.php
ホームページの表示を「固定ページ」にしている場合では、以下のテンプレートのどれかを使えば指定した固定ページに一覧が表示されます。
- home.php
- index.php
どのように記事一覧ページを表示させるかによって、設定方法が変わってきます。
そのため、記事一覧ページを制作する前に方向性をしっかりと見極めておくと後々安心です。
メインループとサブループ
記事一覧ページの制作手順を解説する前に、Wordpressオリジナルテーマを制作するにあたって押さえておきたい「メインループ」「サブループ」「WP_Query」も解説しておきます。
WordPressは記事一覧ページを「ループ」と呼ばれる仕組みで実装しています。
「WordPressのループの仕組みはこうなっているんだ」などと理解することで、記事一覧の制作がとても簡単になります。
ループ
最初に「ループ」について解説します。
「ループ＝繰り返し」なので、同じ内容を繰り返し処理することを指しています。
記事一覧はそれぞれの記事デザインは同じになっています。その理由は。必要なだけ同じコードを繰り返して表示させているためです。
WordPressのループには2種類あります。
その2種類とは「メインループ」「サブループ」です。
それぞれは以下で詳しく解説します。
メインループ
メインループとは、その名の通りメインになるループです。
WordPressでページを表示させるには「PHP」と呼ばれるプログラムファイルが使われています。
ページを表示させる時には、表示専用で使われるPHPファイルが予め決まっていることも特徴です。
例としてはカテゴリ一覧を表示する時には「category.php」と呼ばれるファイルに記述されているコードが使われています。
その他にも固定ページは「page.php」記事詳細ページは「single.php」など、それぞれのページで使われているPHPファイルは決まっているのです。
この仕組みは「テンプレート階層」と呼ばれています。
テンプレート階層によって「このファイルを使う時にはこのデータで処理する」と予め決められていることも特徴。
この決まりを使って同じ処理を繰り返すことがメインループです。
サブループ
サブループとは、メインループと違ってテンプレート階層に左右されないループです。
その理由は、サブループを指定する時に「どのデータを使って処理するのか」を指定するためです。
例としては、「トップページに最新記事一覧を出したい」時では、トップページとして使えるファイルは「index.php」「home.php」と呼ばれるファイルです。
しかしながら、このファイル名では記事データが使えない場合もあります。
Webサイトのトップページとして使っている場合がそのパターンに該当するのです。
そんな時に「記事データを使う」条件が設定されたサブループを活用すると、データを引っ張って指定したページに表示させられるのです。
WP_Query(サブループ)
併せて、サブループを制作する時に使われるクラス「WP_Query」も解説しておきます。
WP_Queryとは、WordPressでブログ投稿やページ情報を取得する時に使うクラス。
WP_Queryクラスには、ループ内で次の投稿に進む「the_postメソッド」や「表示投稿があるかどうか」を確認する「have_postsメソッド」などが準備されています。
ちなみに、コンストラクタの引数指定で取得投稿情報も絞り込めます。
Wp_Queryの一般的な使い方
ここではWp_Queryの一般的な使い方を解説します。
最初に、newキーワードでインスタンスを生成してクエリを定義します。
この時にWP_Queryのコンストラクタに引数指定することで、取得情報が絞り込めるのです。
have_postsメソッドで表示投稿の有無を確認して、投稿があれば該当投稿数だけwhileループで処理を繰り返す仕組みです。
whileループ内はthe_postメソッドを使った上で次の投稿に進みます。
簡単な例を以下にまとめました。
<?php
// クエリの定義
$wp_query = new WP_Query( $args );
// ループ
if ( $wp_query->have_posts() ) {
while ( $wp_query->have_posts() ) {
$wp_query->the_post();
// 処理を記述
}
}
// 投稿データのリセット
wp_reset_postdata();
?>件数取得方法
件数取得方法も解説しておきます。
WP_Queryクラスには、投稿件数を取得する「post_countプロパティ」、全件数取得の「found_postsプロパティ」が準備されています。
使い方の例を以下にまとめました。
‘post’ //条件を設定
);
$wp_query = new WP_Query($args); //条件を入れてサブループを作成
$get_num = $wp_query->post_count; //データの中から記事の総数を取得
$all_num = $wp_query->found_posts; //データの中から今表示する記事数を取得
echo “全” . $all_num . “件中、” . $get_num . “件を表示”;//用意したデータを表示
?>こう記述することで「全50件中10件を表示」などと出力できるようになるのです。
カスタムフィールド絞込み方法
ここでは、カスタムフィールドでの絞込み方法を解説します。
<?php
// 条件の設定
$args = Array(
‘post_type’ => ‘post’, // 投稿
‘post_status’ => ‘publish’, // 公開された投稿、または固定ページを表示(デフォルト)
‘posts_per_page’ => 10, // 表示する投稿数(-1を指定すると全投稿を表示)
‘meta_key’ => ‘key’, // カスタムフィールドのキーを指定
‘meta_value’ => ‘value’, // カスタムフィールドの値を指定
‘orderby’ => ‘meta_value’, // ソートする基準となる項目を指定
‘order’ => ‘DESC’ // ソートの並び順を指定’DESC’ 降順、’ASC’ 昇順
);
// クエリの定義
$wp_query = new WP_Query( $args );
// ループ
if ( $wp_query->have_posts() ) {
while ( $wp_query->have_posts() ) {
$wp_query->the_post();
// 処理を記述
}
}
// 投稿データのリセット
wp_reset_postdata();
?>カスタムタクソノミー投稿の絞り込み
カスタムタクソノミー投稿の絞り込み方法も解説します。
<?php
// 条件の設定
$args = Array(
‘post_type’ => ‘post’, // 投稿を指定
‘tax_query’ => array(
array(
‘taxonomy’ => ‘color’, // タクソノミーを指定
‘field’ => ‘slug’, // term_id(デフォルト),name,slug のいずれかを指定
‘terms’ => array( ‘red’, ‘blue’ ), // ターム(文字列かIDを指定)
‘include_children’ => true, // 階層を持つタクソノミーの場合に、子孫タクソノミーを含めるかどうか
‘operator’ => ‘IN’ // ‘NOT IN’ で指定したタームを除外
),
),
);
// クエリの定義
$wp_query = new WP_Query( $args );
// ループ
if ( $wp_query->have_posts() ) {
while ( $wp_query->have_posts() ) {
$wp_query->the_post();
// 処理を記述
}
}
// 投稿データのリセット
wp_reset_postdata();
?>記事一覧ページ制作手順
先程はループについて解説しましたが、ここからは記事一覧ページの制作手順を解説していきます。
以下に記事一覧ページ制作手順をまとめました。
- 記事一覧の考察
- コード記述用ファイルの準備
- コードを記述
制作手順を大まかにまとめると、「どんな記事一覧ページを作りたいかしっかり考察する」「記事一覧ページを表示するためのコード記述用ファイルを準備する」「記事一覧ページがちゃんと表示されるための正しいコードを記述」することです。
以下から手順に沿って解説していきます。
記事一覧の考察
最初にやるべきことは、「どんな記事一覧ページを作りたいか」の考察です。
一般的に見られる記事一覧ページは以下のパターンが多いです。
- 全記事一覧
- 投稿日時別一覧
- カテゴリ別記事一覧
- タグ別記事一覧
どんな記事一覧を作りたいかで、この後制作するファイル名が変わってくるのです。
この段階で仕様を明確にした上で、次の制作手順で迷わないようにまとめておくと安心です。
コード記述用ファイルの準備
仕様がしっかり決まったら、コード記述用のファイルを準備していきましょう。
ファイルはテンプレート階層にマッチしたファイル名を準備する必要があります。
全記事一覧は「archive.php」カテゴリ別記事一覧「category.php」などです。
コードの記述
コード記述用ファイルが準備できたらコードを記述していきます。
以下のコードを記述することで、記事一覧が出力できます。
<?php
if ( have_posts() ) {
while ( have_posts() ){
the_post();
?>
<article>
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php the_content(); ?>
</p>
</article>
<?php
}
}
?>このコードがどんな処理をしているのかは後ほど解説します。
補足として以下に記述機会が多い関数をまとめました。
| have_posts() | WordPressクエリにループ結果の有無をチェックしてtrue/falseを返す。 |
| the_post() | 次の投稿を取得しループを次の投稿へ進める。 |
| the_permalink() | ループ内で各投稿パーマリンクURLを表示させる。 |
| the_title($before, $after, $echo) | ループ内で各投稿タイトルを表示。$before:タイトルの前に配置する文字列を指定。$after:タイトルの後ろに配置する文字列を指定。$echo:タイトルを表示するか(true)タイトルの文字列を返す(false)。 |
| get_the_date($format, $post_id) | 今の投稿が記述された日付を返す。$format:日付の書式を指定。$post:日付取得したい投稿のIDを指定する。省略した場合は現在の投稿の日付を返す。 |
| the_category($separator, $parents, $post_id) | ループ内でそれぞれの記事が属するカテゴリーへのリンクを表示させる。$separator:カテゴリーへのリンクを区切る文字列を指定する。指定がない場合や空文字列の場合はulタグで表示。$parents:記事が子カテゴリーに属するときの表示を指定する。multiple:親と子カテゴリーが並んで表示されて、親と子それぞれにリンクが張られる。single:親と子カテゴリーが並んで表示されて、親と子にまとめて子のリンクが張られる。$post_id:カテゴリーを取得する投稿IDを指定する。省略した場合は現在の投稿のカテゴリーを返す。 |
| the_tags($before, $sep, $after) | ループ内でそれぞれの記事に付けられたタグとリンクを表示させる。$before:タグ一覧の前に表示する文字列を指定する。$sep:それぞれのタグリンク間に表示する文字列を指定する。$after:タグ一覧の後に表示する文字列を指定する。 |
| previous_posts_link($label) | 投稿の一つ前のセットリンクを表示させる。$label:リンクの文字列を指定する。 |
| next_posts_link($label, $max_pages) | 投稿の次のセットへのリンクを表示する。$label:リンクの文字列を指定する。$max_pages:リンクを表示するページ番号の上限を指定する。 |
| the_content($more_link_text, $stripteaser) | ループ内でそれぞれの記事本文を表示させる。本文中に「続きを読む」がある場合は先頭からその部分までの抜粋を表示させる。$more_link_text:「続きを読む」リンクに表示する文字列を指定する。」$stripteaser:投稿個別ページで「続きを読むより前の内容を隠すかどうか指定する。 |
記述したコードの表示
上記の作業で記事一覧ページの準備は完了です。
記事一覧ページに該当するURLにアクセスすると、記述したコードの効果で記事一覧表示が確認できます。
このように表示された後は、記述したコードにCSSを指定すると記事一覧ページが完成します。
それぞれの記事一覧ページの該当URLは以下が挙げられます。
- 全記事一覧:ルートのURL
- 月別一覧:ルートのURL/年/月/
- カテゴリ一覧:ルートのURL/category/カテゴリー名
- タグ一覧:ルートのURL/tag/タグ名
これらの表示はWordPress設定によって変わります。
ご自身のWebサイトがどのように設定されているか確認した上で、正しいURLでアクセスできるよう設定しましょう。
記事一覧ページのコード
ここでは、記事一覧ページのコードを詳しく解説していきます。
下記のコードを使って解説します。
<?php
if ( have_posts() ) {
while ( have_posts() ){
the_post();
?>
<article>
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php the_content(); ?>
</p>
</article>
<?php
}
}
?>ループ部分
最初に、処理を繰り返しているループ部分を解説していきます。
上記コードの以下の箇所がループ処理を行っている記述です。
<?php
if ( have_posts() ) {
while ( have_posts() ){
the_post();
}
}
?>最初に「if ( have_posts() )」で記事の有無を確認しています。
「記事があると判断されるとPHPの繰り返し処理関数「while」を使ってループが始まっていくのです。
ここでのポイントは「the_post()」です。
the_post()は繰り返し処理が始まった直後で、現在閲覧している記事から次記事のデータへと移動するWordPressの独自関数。
この関数が記述されていることで、繰り返し処理で同じ記事が出力されずに次の記事が出力される仕組みなのです。
出力内容部分
ループには実際に出力されるHTMLコードが記述されています。
下記のコードが該当します。
<article>
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php the_content(); ?>
</p>
</article>コードのところどころに記述されているPHPは、本文やタイトルをデータベースから取得するための記述。
それぞれの詳細はリファレンスなどで確認することをお勧めします。
まとめ
今回はWordPressオリジナルテーマの記事一覧ページの制作手順を解説しました。
今回解説した記事一覧ページは、時間を掛けて作った記事が読まれる確率を増やす上でも有効です。
ちなみに、今回解説した内容は以下の設定もできます。
- スマートフォン表示数設定
- PC表示数設定
- ページネーションの「前へ次へ」の画像作成
- カテゴリー全表示
- カテゴリー1件のみ表示
読者にとって利便性が高い設定ができるのは、運営している側からしてもメリットではないでしょうか。
これらの詳しい設定方法は別の機会に解説します。
次回は、WordPressオリジナルテーマ「パンくずリスト」の制作手順を解説します。