WordPressで新着記事を表示する際によく使うループ

WordPressを使用しているとトップページに新着情報を表示することが多いので、よく使うパターンをメモがてら記載。

目指すレイアウト

スマホの時は縦並びに。

なるべく汎用性の高い作りにしておくと他の案件でも使いやすいですね。

ループの準備

例えばfront-page.phpなどに以下の記述でループを準備します。

<?php if(have_posts()): ?>
  <div class="list-flex list-news">
    <?php
      while ( have_posts() ) :
        the_post();
        get_template_part( 'template-parts/content', 'page' );
      endwhile; // End of the loop.
    ?>
  </div><!-- /.list-news -->
<?php else: ?>
投稿記事はありません
<?php endif; ?>

この場合、ループで回す内容はメンテナンス性を考慮してテンプレートを呼び出す仕様にしています。

ループで回す内容

今回はtemplate-partsというフォルダを作り、その中にcontent-page.phpというファイルを用意します。

<?php
/**
 * Template part for displaying page content in page.php
 */
?>

<article class="list-flex__item list-news__item">
	<a href="<?php the_permalink(); ?>" class="list-news__item-inner">

	<figure class="list-news__item-thum">
		<?php if( has_post_thumbnail() ): ?>
			<?php echo get_the_post_thumbnail( $post->ID, 'rect', array( 'class' => 'archive-thumbnail' ) ); ?> 
		<?php else: ?>
			<?php echo catch_that_image(); ?>
		<?php endif; ?>
		<?php
			$category = get_the_category();
			$cat_id   = $category[0]->cat_ID;
			$cat_name = $category[0]->cat_name;
			$cat_slug = $category[0]->category_nicename;
		?>
		<span class="list-news__item-cat"><?php echo $cat_name; ?></span>
	</figure><!-- /.img -->

	<div class="list-news__item-text">
		<p class="list-news__item-date"><?php the_time('Y.n.j'); ?></span></p>
		<h2 class="list-news__item-title"><?php the_title();?></h2>
		<p class="list-news__item-more">MORE</p>
	</div><!-- /.entry-text -->

	</a>

</article>

簡単に解説すると11~15行目はアイキャッチ画像があれば表示。
なければ記事内の最初の画像を表示。
それもなければ用意したno-imageの画像を表示させます。

詳しくはこちらのページで詳細を説明しています。

WordPressでアイキャッチがあれば表示し、なければ記事内の画像、それもなければダミー画像を表示する

16~22行目でカテゴリーを取得して表示させます。

CSSを準備

scssで記述してますが、必要に応じて書き換えてください。
他でも使い回せるようにレイアウトと各ボックスのCSSは分離させてます。

.list-flex{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 4rem -2rem -4rem;
    @include media(tb) {
        flex-direction: row;
    }
    &__item{
        max-width: inherit;
        width: 100%;
        box-sizing: border-box;
        padding: 0 2rem 4rem;
        flex: 1 1 0%;
        flex-basis: 100%;
        max-width: 100%;
        @include media(tb) {
            flex-basis: 25%;
            max-width:  25%;
        }
    }
    &--3 &__item{
        @include media(tb) {
            flex-basis: 33.33%;
            max-width:  33.33%;
        }
    }
    &--2 &__item{
        @include media(tb) {
            flex-basis: 50%;
            max-width:  50%;
        }
    }
}

.list-news{
    &__item{
        * {
            font-size: 1.2rem;
            @include media(tb) {
                font-size: 1.4rem;
            }
        }
        &-inner{
            display: flex;
            align-items: flex-start;
            @include media(tb) {
                flex-direction: column;
            }
        }
        &-thum{
            width: 48%;
            margin: 0;
            position: relative;
            @include media(tb) {
                width: 100%;
                margin-bottom: 2rem;
            }
        }
        &-cat{
            position: absolute;
            right: 0;
            bottom: 0;
            background: #ccc;
            color: #fff;
            font-size: 1rem;
            min-width: 10rem;
            text-align: center;
            padding: 3px 10px;
            letter-spacing: 2px;
            @include media(tb) {
                font-size: 1.2rem;
                min-width: 12rem;
            }
        }
        &-text{
            flex: 1;
            padding-left: 2rem;
            @include media(tb) {
                padding-left: 0;
            }
        }
        &-title{
            margin: 1rem 0;
        }
        &-date{
            margin: 0;
            color: #ccc;
            line-height: 1;
        }
        &-more{
            color: #000;
            font-size: 1.2rem;
            width: 8rem;
            margin: 0;
            border-bottom: 2px solid #000;
            line-height: 1;
            padding-bottom: 0.5rem;
        }
    }
}