WordPressでウェブサイトを作る際、投稿記事を自由に表示できるようになると、サイトのカスタマイズの幅が大きく広がります。この記事では、初心者の方にもわかりやすく、PHPを使ってWordPressの投稿記事を表示する方法を詳しく解説していきますね。
WordPressの記事表示の基本を理解しよう
WordPressで記事を表示する仕組みって、最初はちょっと難しく感じるかもしれません。でも、基本を押さえてしまえば、実はそんなに複雑ではないんです。まずは、WordPressがどのように記事を表示しているのか、その基本的な仕組みから見ていきましょう。
WordPressループとは何か
WordPressには「ループ」という概念があります。これは、データベースから取得した投稿記事を一つずつ順番に処理していく仕組みのことです。ループを使うことで、複数の記事を効率的に表示できるようになります。
ループの基本的な考え方は、「記事がある限り、繰り返し表示する」というシンプルなものです。この仕組みを理解することが、WordPress開発の第一歩となります。
メインループとサブループの違い
WordPressには「メインループ」と「サブループ」という2種類のループがあります。
メインループは、WordPressが自動的に実行してくれるループです。例えば、カテゴリーページを開いたときに、そのカテゴリーに属する記事が表示されるのは、メインループが働いているからなんです。
一方、サブループは、私たちが独自に作成するループです。「トップページに特定のカテゴリーの記事だけを表示したい」とか、「固定ページの中に投稿記事の一覧を表示したい」といった場合に使います。
基本的なWordPressループの書き方
それでは、実際にWordPressループをどう書くのか見ていきましょう。まずは最も基本的な形から始めます。
最もシンプルなループ構文
WordPressで記事を表示する最もシンプルな方法がこちらです。
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; ?>
<?php else : ?>
<p>記事が見つかりませんでした。</p>
<?php endif; ?>このコードを一つずつ理解していきましょう。
have_posts() は、表示できる記事があるかどうかをチェックする関数です。記事がない場合は、else以降の処理が実行されます。
while ( have_posts() ) は、記事が存在する限り繰り返す処理です。投稿が5件あれば5回、10件あれば10回繰り返されます。
the_post() は、次の記事に進むための関数です。これを実行することで、各記事の情報が利用可能になります。
ループ内で使える便利な関数たち
ループの中では、様々な関数を使って記事の情報を表示できます。よく使う関数をいくつか紹介しますね。
the_title() は記事のタイトルを表示します。ブログの見出しとして最もよく使われる関数です。
the_content() は記事の本文を表示します。投稿で書いた内容がそのまま出力されます。
the_excerpt() は記事の抜粋を表示します。記事の要約を表示したい一覧ページで便利です。
the_permalink() は記事のURLを取得します。リンクを作成する際に使います。
the_date() は記事の投稿日を表示します。日付形式は管理画面で設定したものが使われます。
the_category() は記事が属するカテゴリーを表示します。
the_tags() は記事に付けられたタグを表示します。
これらの関数は、すべて「the」で始まっています。これは、「ループの中でしか使えない」という目印なんです。この規則を覚えておくと便利ですよ。
コロン構文とブレース構文の違い
先ほどの例では、コロン「:」を使った書き方をしていました。これを「コロン構文」と言います。実は、PHPには別の書き方もあります。
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
echo '<h2>';
the_title();
echo '</h2>';
echo '<div>';
the_content();
echo '</div>';
}
} else {
echo '<p>記事が見つかりませんでした。</p>';
}
?>この書き方は「ブレース構文」と呼ばれます。中括弧「{}」を使っているのが特徴です。
どちらを使うべきかというと、HTMLが多い場合はコロン構文の方が読みやすく、PHPの処理が多い場合はブレース構文の方が便利です。テンプレートファイルではコロン構文が一般的に好まれます。
WP_Queryを使った高度な記事表示
基本的なループだけでは実現できない、もっと複雑な条件で記事を表示したい場合があります。そんなときに活躍するのが「WP_Query」というクラスです。
WP_Queryの基本的な使い方
WP_Queryは、WordPressの中でも特に強力な機能の一つです。これを使えば、条件を細かく指定して記事を取得できます。
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'orderby' => 'date',
'order' => 'DESC'
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
?>
<article>
<h3><?php the_title(); ?></h3>
<div><?php the_excerpt(); ?></div>
<a href="<?php the_permalink(); ?>">続きを読む</a>
</article>
<?php
endwhile;
endif;
wp_reset_postdata();
?>最後の wp_reset_postdata() は必ず書きましょう。これを書かないと、他の部分に影響が出てしまうことがあります。
条件指定のパラメータ一覧
WP_Queryでは、$argsという配列に条件を指定します。よく使うパラメータを紹介しますね。
post_type は投稿タイプを指定します。’post’なら通常の投稿、’page’なら固定ページです。
posts_per_page は表示する件数を指定します。-1を指定すると全件表示されます。
orderby は並び順の基準を指定します。’date’なら日付順、’title’ならタイトル順です。
order は昇順か降順かを指定します。’DESC’なら降順（新しい順）、’ASC’なら昇順（古い順）です。
post_status は投稿のステータスを指定します。’publish’なら公開済みの投稿のみです。
paged はページネーション（ページ送り）に使います。現在のページ番号を指定します。
カテゴリーやタグで記事を絞り込む方法
特定のカテゴリーやタグに属する記事だけを表示したい場合の書き方を見ていきましょう。
カテゴリーで絞り込む基本パターン
カテゴリーを指定する方法はいくつかあります。
<?php
// カテゴリースラッグで指定
$args = array(
'post_type' => 'post',
'category_name' => 'news',
'posts_per_page' => 5
);
$query = new WP_Query( $args );
?>カテゴリースラッグは、管理画面のカテゴリー編集ページで確認できます。URLに使われる英数字の部分です。
<?php
// カテゴリーIDで指定
$args = array(
'post_type' => 'post',
'cat' => 3,
'posts_per_page' => 5
);
$query = new WP_Query( $args );
?>カテゴリーIDは、カテゴリー一覧ページで各カテゴリーにマウスを乗せると、ブラウザの下部に表示されるURLから確認できます。
複数のカテゴリーを指定する
複数のカテゴリーの記事をまとめて表示したい場合もあります。
<?php
// カンマ区切りで複数指定
$args = array(
'post_type' => 'post',
'category_name' => 'news,blog,column',
'posts_per_page' => 10
);
$query = new WP_Query( $args );
?>カテゴリー名をカンマで区切って指定するだけで、複数のカテゴリーに対応できます。
タグで絞り込む方法
タグでの絞り込みも同様に簡単です。
<?php
$args = array(
'post_type' => 'post',
'tag' => 'wordpress',
'posts_per_page' => 8
);
$query = new WP_Query( $args );
?>タグの場合も、スラッグを使って指定します。
tax_queryを使った高度な絞り込み
カスタムタクソノミーを使っている場合や、より複雑な条件を指定したい場合は、tax_queryを使います。
<?php
$args = array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => array('news', 'blog'),
'operator' => 'IN'
)
),
'posts_per_page' => 10
);
$query = new WP_Query( $args );
?>operator を ‘NOT IN’ にすれば、指定したカテゴリーを除外することもできます。
カスタムフィールドで記事を絞り込む
カスタムフィールドを使って記事に追加情報を持たせている場合、その値を条件に記事を表示できます。
meta_queryの基本的な使い方
<?php
$args = array(
'post_type' => 'post',
'meta_query' => array(
array(
'key' => 'featured',
'value' => 'yes',
'compare' => '='
)
),
'posts_per_page' => 5
);
$query = new WP_Query( $args );
?>このコードは、「featured」というカスタムフィールドの値が「yes」の記事だけを取得します。
数値の比較条件
価格や評価点など、数値を扱うカスタムフィールドの場合は、大小比較ができます。
<?php
$args = array(
'post_type' => 'product',
'meta_query' => array(
array(
'key' => 'price',
'value' => 1000,
'type' => 'NUMERIC',
'compare' => '<='
)
)
);
$query = new WP_Query( $args );
?>これで、1000円以下の商品だけを表示できます。
複数のカスタムフィールド条件を組み合わせる
<?php
$args = array(
'post_type' => 'post',
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'featured',
'value' => 'yes'
),
array(
'key' => 'priority',
'value' => '5',
'type' => 'NUMERIC',
'compare' => '>='
)
)
);
$query = new WP_Query( $args );
?>relation を ‘AND’ にすれば、すべての条件を満たす記事だけが、’OR’ にすれば、いずれかの条件を満たす記事が表示されます。
get_posts関数を使ったシンプルな記事取得
WP_Queryよりもシンプルに記事を取得したい場合は、get_posts関数が便利です。
get_postsの基本構文
<?php
$args = array(
'posts_per_page' => 5,
'post_type' => 'post',
'category_name' => 'news'
);
$posts = get_posts( $args );
foreach ( $posts as $post ) :
setup_postdata( $post );
?>
<article>
<h3><?php the_title(); ?></h3>
<div><?php the_excerpt(); ?></div>
</article>
<?php
endforeach;
wp_reset_postdata();
?>get_postsは配列で結果を返すので、foreachを使って処理します。WP_Queryよりもメモリ効率が良いとされています。
WP_Queryとget_postsの使い分け
ページネーション（ページ送り機能）が必要な場合はWP_Queryを、シンプルに記事を取得したいだけならget_postsを使うのがおすすめです。
固定ページで投稿記事を表示する方法
固定ページの中に投稿記事の一覧を表示したいケースはよくあります。その方法を見ていきましょう。
固定ページテンプレートの作成
まず、テーマフォルダ内に専用のテンプレートファイルを作ります。
<?php
/*
Template Name: 記事一覧ページ
*/
get_header();
?>
<div class="container">
<h1><?php the_title(); ?></h1>
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'paged' => $paged
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
?>
<div class="post-list">
<?php
while ( $query->have_posts() ) : $query->the_post();
?>
<article class="post-item">
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('medium'); ?>
</div>
<?php endif; ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post-meta">
<span class="date"><?php the_date(); ?></span>
<span class="category"><?php the_category(', '); ?></span>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="read-more">続きを読む</a>
</article>
<?php
endwhile;
?>
</div>
<?php
the_posts_pagination( array(
'prev_text' => '前へ',
'next_text' => '次へ'
) );
else :
?>
<p>記事が見つかりませんでした。</p>
<?php
endif;
wp_reset_postdata();
?>
</div>
<?php
get_footer();
?>このファイルを保存したら、管理画面の固定ページ編集画面で「テンプレート」から「記事一覧ページ」を選択できるようになります。
ページネーションの実装
固定ページでWP_Queryを使う場合、ページネーションには注意が必要です。
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;この一行を必ず入れましょう。これがないと、2ページ目以降が正しく表示されません。
ショートコードで投稿記事を呼び出す方法
投稿や固定ページの本文中に記事一覧を表示したい場合は、ショートコードが便利です。
functions.phpにショートコードを定義
<?php
function custom_posts_shortcode( $atts ) {
$atts = shortcode_atts( array(
'count' => 5,
'category' => '',
'orderby' => 'date',
'order' => 'DESC'
), $atts );
$args = array(
'posts_per_page' => $atts['count'],
'orderby' => $atts['orderby'],
'order' => $atts['order']
);
if ( ! empty( $atts['category'] ) ) {
$args['category_name'] = $atts['category'];
}
$query = new WP_Query( $args );
$output = '';
if ( $query->have_posts() ) {
$output .= '<div class="shortcode-posts">';
while ( $query->have_posts() ) {
$query->the_post();
$output .= '<article>';
$output .= '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
$output .= '<div class="date">' . get_the_date() . '</div>';
$output .= '<div class="excerpt">' . get_the_excerpt() . '</div>';
$output .= '</article>';
}
$output .= '</div>';
}
wp_reset_postdata();
return $output;
}
add_shortcode( 'custom_posts', 'custom_posts_shortcode' );
?>ショートコードの使い方
投稿や固定ページの編集画面で、以下のように記述します。
[custom_posts count="5" category="news"]これで、newsカテゴリーの記事を5件表示できます。
アイキャッチ画像を表示する方法
記事一覧にアイキャッチ画像があると、見た目が大きく改善されます。
アイキャッチ画像の基本的な表示方法
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
?>has_post_thumbnail() でアイキャッチ画像が設定されているかチェックしてから表示するのが安全です。
画像サイズを指定する
<?php
// サムネイルサイズ（150×150px）
the_post_thumbnail( 'thumbnail' );
// 中サイズ（300px幅）
the_post_thumbnail( 'medium' );
// 大サイズ（1024px幅）
the_post_thumbnail( 'large' );
// フルサイズ（元の画像サイズ）
the_post_thumbnail( 'full' );
// カスタムサイズ
the_post_thumbnail( array(400, 300) );
?>アイキャッチ画像がない場合の代替画像
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo '<img src="' . get_template_directory_uri() . '/images/no-image.jpg" alt="画像なし">';
}
?>代替画像を用意しておくと、統一感のあるデザインになります。
日付で記事を絞り込む高度な方法
特定の期間の記事だけを表示したい場合は、date_queryを使います。
特定の年月の記事を表示
<?php
$args = array(
'post_type' => 'post',
'date_query' => array(
array(
'year' => 2024,
'month' => 1
)
)
);
$query = new WP_Query( $args );
?>期間を指定して記事を取得
<?php
$args = array(
'post_type' => 'post',
'date_query' => array(
array(
'after' => '2024-01-01',
'before' => '2024-12-31',
'inclusive' => true
)
)
);
$query = new WP_Query( $args );
?>inclusive を true にすると、指定した日付を含みます。
直近N日間の記事を表示
<?php
$args = array(
'post_type' => 'post',
'date_query' => array(
array(
'after' => '30 days ago'
)
)
);
$query = new WP_Query( $args );
?>このように、相対的な日付指定も可能です。
特定の投稿を除外する方法
特定の記事を一覧から除外したい場合の方法です。
投稿IDで除外
<?php
$args = array(
'post_type' => 'post',
'post__not_in' => array( 1, 5, 12 ),
'posts_per_page' => 10
);
$query = new WP_Query( $args );
?>現在表示中の記事を除外
<?php
global $post;
$args = array(
'post_type' => 'post',
'post__not_in' => array( $post->ID ),
'posts_per_page' => 5
);
$query = new WP_Query( $args );
?>関連記事を表示する際に便利です。
パフォーマンスを考慮した最適化
記事を大量に表示する場合、パフォーマンスに配慮することが大切です。
必要な情報だけを取得する
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'fields' => 'ids' // IDのみ取得
);
$query = new WP_Query( $args );
?>IDだけが必要な場合は、’fields’ => ‘ids’ を指定することで、処理を高速化できます。
キャッシュを活用する
頻繁にアクセスされるページでは、結果をキャッシュすることをおすすめします。
<?php
$cache_key = 'custom_posts_list';
$posts = get_transient( $cache_key );
if ( false === $posts ) {
$args = array(
'post_type' => 'post',
'posts_per_page' => 10
);
$query = new WP_Query( $args );
$posts = $query->posts;
set_transient( $cache_key, $posts, HOUR_IN_SECONDS );
}
foreach ( $posts as $post ) {
setup_postdata( $post );
// 記事の表示処理
}
wp_reset_postdata();
?>よくあるエラーとトラブルシューティング
記事表示で遭遇しやすいエラーと、その解決方法を紹介します。
「記事が表示されない」場合
まず、以下をチェックしましょう。
- 条件に合う記事が実際に存在するか
- post_statusが’publish’（公開済み）になっているか
- wp_reset_postdata()を書き忘れていないか
「2ページ目以降が表示されない」場合
固定ページでWP_Queryを使っている場合は、pagedパラメータが正しく設定されているか確認します。
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
?>「画像が表示されない」場合
has_post_thumbnail()でチェックしているか、画像のパスが正しいか確認しましょう。
まとめ：記事表示をマスターして自由なサイト作りを
この記事では、WordPressの投稿記事をPHPで表示する様々な方法を解説してきました。基本的なWordPressループから、WP_Queryを使った高度な絞り込み、固定ページでの記事表示、ショートコードの活用まで、幅広くカバーしました。
最初は難しく感じるかもしれませんが、実際に手を動かしてコードを書いてみることが一番の学習方法です。まずは基本的なループから始めて、徐々に複雑な条件指定にチャレンジしていきましょう。
記事の表示方法をマスターすれば、WordPressサイトのカスタマイズ性は大きく広がります。トップページに新着記事を表示したり、サイドバーに人気記事を表示したり、関連記事を自動で表示したりと、できることは無限大です。
この記事が、あなたのWordPressサイト制作の助けになれば嬉しいです。何か困ったことがあったら、この記事を参考に、一つ一つ確認してみてくださいね。
WordPressの記事表示は奥が深いですが、基本を押さえればそれほど難しくありません。ぜひ、自分のサイトで実践してみて、理想のウェブサイトを作り上げてください。頑張ってください！