簡単にできる、WordPressの記事を取得して表示する方法

簡単にできる、WordPressの記事を取得して表示する方法

こんにちは、ちゃんけいです。

このサイトのCMSはWordPressを使っています。世界で多く使われているので、情報が多いことがWordPressの利点です。

そのWordPressの基礎とも言えるのが投稿した記事を一覧にして表示する、記事ループです。この記事ループを作っていきましょう。

記事取得ループの始まりと終わりの合図

まずは、「記事をここに出しますよ!」という合図を書いてみましょう。
以下のようになります。

<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
/*

ここにHTMLを書く

*/
<?php
endwhile; // whileを閉じる
endif; // ifを閉じる
wp_reset_postdata(); // メインクエリの復元
?>

PHPを書くときは必ず、「」で囲みます。では1つずつ見ていきましょう。ここで知っておきたい項目は3点。

  • have_post()  投稿があるかどうかをチェック
  • the_post() ループを次の投稿に進める。ループの進行係り。
  • wp_reset_postdata() メインクエリの復元。ページネーションを使う際に大切。

それぞれがどんな役割をしているのかを確認しておきましょう。

new WP_Queryを使って条件をつける

先ほどのループのままだと、すべての投稿を取得して表示してしまいます。

条件をつけて、表示したい投稿だけを表示するようにします。
今回は、「news」というカテゴリを3件だけ表示するようにしてみます。

<?php
// 条件を入れる箱を用意する
$args = new WP_Query(
array(
'post_type' => 'post', // デフォルトの投稿タイプ
'posts_per_page' => 3, // 3件だけ取得
'category_name' => 'news', // カテゴリのスラッグを指定
)
);
// 条件を読み出す
if ( $args->have_posts() ) :
while ( $args->have_posts() ) : $args->the_post();
?>
/*

ここにHTMLを書く

*/
<?php endwhile; endif; wp_reset_postdata();?>

それでは、1つずつ見ていきましょう。

$args = new WP_Query(
array(
'post_type' => 'post', // デフォルトの投稿タイプ、元からある投稿を使っている場合は気にしなくて良い
'posts_per_page' => 3, // 3件だけ取得
'category_name' => 'news', // カテゴリのスラッグを指定
)
);

$argsという箱を用意して、その中に条件を入れていきます。条件の内容はコメントで書いている通りです。

「なぜこのような書き方になるのか?」と気になる方もいると思います。
コードの中にある、「 array 」の部分はphpの配列になっているのでこのような書き方になります。CMSはphpの知識も少し必要になってきますね。

if ( $args->have_posts() ) :
while ( $args->have_posts() ) : $args->the_post();

こちらの部分も先ほどとは少し変わっています。
「 $args 」という箱に条件をいれているので、この条件を使うようにしています。

<?php endwhile; endif; wp_reset_postdata();?>

最後の一文は、改行を削除して短く1行にしました。

コピペで使える記事取得ループの完成

それでは今回の記事で作ったループを記事を見ているかたがコピペで使えるようにしておきます。

ついでにループ内で使えるWordPressタグをHTMLと一緒に書いておきましたので使ってみてください。

<?php
$args = new WP_Query(
array(
'post_type' => 'post',
'posts_per_page' => 3,
'category_name' => 'news',
)
);
if ( $args->have_posts() ) :
while ( $args->have_posts() ) : $args->the_post();
$cat = get_the_category(); // 指定されたカテゴリのパラメータを取得
$cat_name = $cat[0]->name; // カテゴリ名を取得
?>
<article><a href="<?php the_permalink();?>"> // 記事のリンクを表示
<h1><?php the_title();?></h1> // 記事のタイトルを表示
<p><?php the_content;?></p> // 記事の本文を表示
<span><php echo $cat_name;?></span> // カテゴリ名表示
<time><?php the_time('Y.m.d'); ?></time> // 投稿時間を表示
</article></a>
<?php endwhile; endif; wp_reset_postdata();?>

まとめ

いかがでしたでしょうか?
アーカイブページで表示するときに不具合が出るかもしれませんのでそのときは、「 pre_get_posts 」を調べてみてください。

CMSの組み込みはHTMLの知識がしっかりと付いているとそこまでハードルは高くないので是非挑戦してみてください。

WordPressの記事を一覧表示する方法は、他にもあります。そちらは、今後書いていきたいと思います。
今回紹介した方法で、だいたいの場合は大丈夫なはずです。

それではまた次回の記事でお会いしましょう!ちゃんけいでした。

参考サイト