WordPressでループを使って記事の一覧を表示したいニャ
最初に
ブログサイトでもないサイト構築に、WordPressを使うのはなぜと考える方もいるかもしれません。
表側の動きを作るには慣れているWEBデザイナーなど、バックエンド的な処理ができなくてもコンタクトページの実装がプラグインを使えば手軽にできるということもありますが、新着情報や記事投稿などCMSならではの機能が簡単に実装可能になり、多くの人がかかわって分業で行われるWEB制作を一人でも完結できるようになるというところが仕事として多くのメリットを生み出します。
HTML、CSS、JSを使った基本的なサイト制作ができるのならば、それを静的にWordPress化する作業は一度やってしまえばそれほど難しい作業ではありません。
おそらく肝となるのは投稿の一覧ページを取得するメインループとサブループという考え方でこちらをマスターすることができれば、WordPressを使ったWEB制作の道はかなり開けていくことでしょう。
そんなわけで今回はメインループとサブループついて解説していきたいと思います。
メインループ
一覧を取得するためにまず覚えておきたいのがメインループです。メインループはWordPressでデフォルトで用意してくれているループのことです。
WordPressのテンプレートファイルに応じて決められたループを引っ張ってきてくれるものがメインループとなります。例えば投稿一覧ページ(archive.php)では全ての投稿一覧、カテゴリ―ページ(category.php)ではカテゴリーの投稿一覧、記事ページ(single.php)では記事の情報といった具合に取ってくる情報は決まっています。
以前私がWordPressでWEBサイトを構築するにあたって（その1）で
「設定」→「表示設定」→「ホームページの表示」を「固定ページ」にするということを解説しましたが、もともとWordPressはブログ型サイトを構築するCMSとなっていますので、デフォルトのまま「ホームページの表示」を「最新の投稿」にしておけばトップページでもメインループが使用可能になります。サイト型のWEBページでもトップにお知らせとして投稿情報一覧を表示させることが多いです。
そのためこちらでメインループを使い投稿一覧を表示させたい気持ちになると思いますが、のちのちパンくずリストを作る時などに色々不都合なことが出てきますので、私としてはトップでのメインループは潔く諦めてサイト型のWEBページ構築時には上で書いたように、「設定」→「表示設定」→「ホームページの表示」を「固定ページ」を推奨しております。
詳しくは以下ページを参照して下さい！
メインループの書き方
それではメインループの基本的な書き方を見てみましょう。
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php else : ?>
<!-- 投稿データがない場合表示される部分 -->
<?php endif; ?>今後何度も出てくることになりますので最初はおまじないののように書いて覚えてしまうのがおすすめですし、覚えなくてもコピペしてしまっても大丈夫です。
サブループ
メインループはWordPressでデフォルトで用意してくれているループでしたが、サブループはテンプレートファイルに関わらずで自分で取ってきたい情報を自由に表示させることができるループとなります。
またカスタム投稿タイプなどで作った新しい投稿のタイプでループを作りたい場合にも必要となってきます。
サブループの書き方
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
);
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<!-- ここに投稿がある場合の記述 -->
<?php endwhile; ?>
<?php else: ?>
<!-- ここに投稿がない場合の記述 -->
<?php endif; wp_reset_postdata(); ?>急に複雑になったと思うかもしれませんが、<?php if ～は基本的に変わらないと思ってください。
メインループと違ってhave_posts()の前に$the_queryというのが付いていますが、こちらについてはその上で、$the_query = new WP_Query($args);で新たなオブジェクトを定義しているクエリになります。
サブループの場合はWordPressのデフォルトで使うメインクエリの投稿情報のオブジェクト($wp_query)が使えないため独自に定義してあげる必要があるため自前で($the_query)というものを用意して、その中に持ってきたい情報をオブジェクトとして格納しています。
なのでメインループはこのように書き換えるとわかりやすいかもしれません。
サブループでは($the_query)となっているところを($wp_query)と変えただけです。
<?php if ($wp_query->have_posts()) : ?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php else : ?>
<!-- 投稿データがない場合表示される部分 -->
<?php endif; ?>サブループでメインループの代わりに作った($the_query)ではnew WP_Queryというクラスを用意してそこに$argsという引数を用意して配列で持ってきたい情報を格納しています。
ここでは「'post_type' => 'post',」＝「投稿の情報」を「’posts_per_page’ => 3,」「３ページ分」持ってくるよう配列で指定しているわけです。
よってここでは「投稿の情報」を「３ページ分」繰り返し表示するループをテンプレートファイルに関わらず表示することが可能になります。
また、サブループでは最後にwp_reset_postdata();でサブループをリセットしてメインループに戻しています。こちらも必ず必要なのでセットで覚えておいてください。
コメント