WordPressでは、公開した記事を投稿一覧ページ（index.php等）に表示するために、「WP_Query」というWordPressの機能を使って、データベースに登録された記事一覧をループで表示させることが出来ます。
この機能を使った投稿一覧ページの記述について紹介させていただきます。
WP_Queryのサブループで記事一覧を表示するための記述について
下記の記述を投稿一覧を表示したいページ／コンテンツに記載することで記事一覧を表示することが出来ます。
<section class="c-news">
<h2 class="c-news__ttl">新着情報</h2>
<div class="c-news-list">
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10, //一覧に表示する投稿の件数
'paged' => $paged
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
?>
<div class="c-news-list__item">
<!--パーマリンク（記事詳細ページのリンク）-->
<a class="c-news-list__link" href="<?php the_permalink(); ?>">
<div class="c-news-list__img">
<!--アイキャッチ画像表示-->
<?php if ( has_post_thumbnail() ) : ?>
<img src="<?php the_post_thumbnail_url('full'); ?>" alt="<?php the_title(); ?>" class="__img" loading="lazy">
<?php else : ?>
<!--アイキャッチが登録されていない場合の画像-->
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/no_photo.png" alt="no photo" class="__img" loading="lazy">
<?php endif; ?>
</div>
<!--投稿に紐付いたカテゴリ取得-->
<?php
$category = get_the_category();
$cat_name = $category[0]->name;
$cat_slug = $category[0]->slug;
?>
<div class="c-news-list__info">
<div class="c-news-list__day">
<!--投稿日時の表示-->
<time datetime="<?php the_time('Y-m-d');?>"><?php the_time('Y.m.d');?></time>
</div>
<!--取得したカテゴリの表示※「c-news-list__category--」でカテゴリ別のクラス付与-->
<div class="c-news-list__category c-news-list__category--<?php echo esc_attr( $cat_slug ); ?>"><?php echo esc_html( $cat_name ); ?></div>
</div>
<p class="c-news-list__ttl"><?php the_title(); ?></p>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<a class="e-btn" href="<?php echo home_url(); ?>/news/">お知らせ一覧へ</a>
</section>各記事の値を取得している箇所にはコメントアウトで説明を記載していますが、重要な部分についてはさらに下記に続けて説明させていただきます。
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10, //一覧に表示する投稿の件数
'paged' => $paged
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
?>
・
・<!-- 記事内容の記述が入ります -->
・
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>上記のphpで記述されている部分がWP_Queryのサブループで記事一覧を取得するための記述になります。一覧に表示する記事の内容は「<!– 記事内容の記述が入ります –>」の部分に記載してください。
<?php if ( has_post_thumbnail() ) : ?>
<img src="<?php the_post_thumbnail_url('full'); ?>" alt="<?php the_title(); ?>" class="__img" loading="lazy">
<?php else : ?>
<!--アイキャッチが登録されていない場合の画像-->
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/no_photo.png" alt="no photo" class="__img" loading="lazy">
<?php endif; ?>上記の記述は投稿編集画面で登録されたアイキャッチ画像を表示するための記述です。アイキャッチ画像をフルサイズで取得、アイキャッチ画像が登録されていない場合はelse以下のダミー画像を表示するような記述となっています。
<!--投稿に紐付いたカテゴリ取得-->
<?php
$category = get_the_category();
$cat_name = $category[0]->name;
$cat_slug = $category[0]->slug;
?>
<!--取得したカテゴリの表示※「c-news-list__category--」でカテゴリ別のクラス付与-->
<div class="c-news-list__category c-news-list__category--<?php echo esc_attr( $cat_slug ); ?>"><?php echo esc_html( $cat_name ); ?></div>上記の記述は投稿編集画面で選択したカテゴリーを取得し、「<?php echo esc_html( $cat_name ); ?>」でカテゴリ名のテキストを表示しています。
カテゴリごとに色を変えたい場合などは、「c-news-list__category–<?php echo esc_attr( $cat_slug ); ?>」等で、カテゴリスラッグを取得しクラスに入れることで、カテゴリごとに異なるクラス名を追加することが出来ます。
前へ
