- 2022.07.28
- WordPress
- 飯島
WordPressのサイドバーに新着記事一覧を表示する方法を解説
WordPressの個別記事などのページのサイドバーに新着記事のリストが載っていると、ユーザー側はWEBサイトの新しい情報を得やすくなります。ただサイドバーに新着記事一覧を載せるには一工夫が必要です。
サイドバーに新着記事一覧を表示させる「サブループ」が必要
今回は下記のように、個別記事ページの右側に新着記事を表示させる方法を解説します。
右側に記事一覧を表示させるにあたっては、まずはメインループとサブループの理解が必要になります。
個別記事ページのサイドバーに新着記事を表示させる場合は、「左側の記事内容の表示」と「サイドバーの記事一覧」でWordPressループを2回使うことになります。
そしてサイドバーにもWordPressループを記述しようとすると、下記の画像のように、現在開いている記事詳細ページと同じ記事が表示されている状態になります。
本当は右側に一覧を載せたいのに……何故このようになるのでしょうか？
このような表示になるのは、サイドバーも左側の記事表示と同じく「メインクエリ」によって表示されているからです。
クエリとは「どのようにWordPressループを表示させるかの命令のようなもの」です。この記事詳細ページでのメインクエリは、左側の「1つの記事の内容を表示させる」という命令のため、その影響を受けてサイドバーの新着一覧も一ページ分しか表示されなくなるということです。
この状況でどのようにしてサイドバーに記事のリストを表示させるかというと、サブループを使えば解決します。サブループを使えば、メインクエリと違った命令でWordPressループを操作できます。
WP_Queryを使ってサブループを使う
サブループを使うには、WordPress専用の関数である「WP_Query」を使います。
以下がサブループを使って、個別記事ページのサイドバーに記事一覧を表示させるための記述です。
<div class="article-sidebar">
<?php
$args = array(
'post_type' => 'post', //投稿記事の種類を設定する
'posts_per_page' => 5, //投稿記事の数を設定する
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
?>
<aside class="article_latest">
<h2 class="article_latest_title">最新記事</h2>
<ul class="article_latest_list">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li>
<div class="latest_image"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(''); ?></a></div>
<div class="latest_text_box">
<div class="latest_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<time class="latest_meta" deta-time="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
</div>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
</aside>
<?php endif; ?>
（省略）
</div>
ではこれらのコードを解説します。
postとは投稿記事のことを指します。「posts_per_page」は投稿記事の数の設定ができます。今回は5つ表示させたかったので5つと設定しています。またカテゴリーで絞り込みたいときは、category_nameと記述して、任意のカテゴリーを指定しましょう。
<?php
$args = array(
'post_type' => 'post', //投稿記事の種類を設定する
'posts_per_page' => 5, //投稿記事の数を設定する7
'category_name' => 'ドリンク',
);
次にクエリを作成します。先ほど作成した投稿記事の種類と記事の数の配列を引数に。そしてnew WP_Query(配列)の形で記述します。そしてそれを変数の$the_Queryに格納します。
$the_query = new WP_Query( $args );
そしてwhile構文では以下のように「$the_Query」の記事があるならば繰り返し処理をするという記述をします。
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
このように記述すると新たなクエリが定義されて、以下のようにサイドバーに記事が並ぶようになります。
wp_Queryを使うと、投稿データが変わってしまうため、これをリセットする必要があります。 リセットするには最後に<?php wp_reset_postdata(); ?> と記述しましょう。
<?php wp_reset_postdata(); ?>
サムネイル画像を表示したい場合は、<?php the_post_thumbnail(”); ?>と記述しましょう。記事のリンクをつけたい場合は、aリンクで囲って、<?php the_permalink(); ?>をリンク先に設定しましょう。
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(''); ?></a>
サムネイルにNEWをつける方法
上記の画像では記事一覧のサムネイルに「NEW！」のマークがついている状態ですが、「NEW！」をつける方法は下記の記事で紹介しています。参考にしてみてください。
GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。
