基本コード
<?php if (have_posts()) : ?>
<ul class="blog__lists">
<?php while (have_posts()) : the_post(); ?>
<li class="blog">
<a href="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()) : ?>
<div class="blog__image"><?php the_post_thumbnail(array(520, 250)); ?></div>
<?php else : ?>
<div class="blog__image blog__image-noimage"><img src="<?php echo get_template_directory_uri(); ?>/img/blog-logo.png" width="520" height="250" alt="NoImage"></div>
<?php endif; ?>
<div class="blog__body">
<time class="blog__postTime" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<h3 class="blog__heading"><?php the_title(); ?></h3>
<p class="blog__content"><?php echo wp_trim_words(get_the_content(), 200, '...'); ?></p>
</div>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php if (have_posts()) : ?>
<?php endwhile; ?>
<?php while (have_posts()) : the_post(); ?>
<?php else : ?>
・投稿が存在するかどうかをのチェック
・投稿がある間、投稿の内容をループして表示<a href="<?php the_permalink(); ?>">
</a>
投稿のパーマリンク(投稿の個別ページへのリンク)を表示<?php if (has_post_thumbnail()) : ?>
<div class="blog__image"><?php the_post_thumbnail(array(520, 250)); ?></div>
<?php else : ?>
<div class="blog__image blog__image-noimage"><img src="<?php echo get_template_directory_uri(); ?>/img/blog-logo.png" width="520" height="250" alt="NoImage"></div>
<?php endif; ?>
投稿にサムネイル画像があるかをチェックし、ない場合はblog-logo.pngを表示<time class="blog__postTime" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
投稿の投稿日時を表示<h3 class="blog__heading"><?php the_title(); ?></h3>
投稿のタイトルを表示<p class="blog__content"><?php echo wp_trim_words(get_the_content(), 200, '...'); ?></p>
投稿の内容を200単語にトリムし、表示
表示件数や並び順を変更するコード
<?php
query_posts(array(
'posts_per_page' => 5, // 表示件数を5件に設定
'orderby' => 'date', // 日付順にソート
'order' => 'DESC', // 降順で表示 (最新の投稿が先頭に)
));
?>
<?php if (have_posts()) : ?>
<ul class="blog__lists">
<?php while (have_posts()) : the_post(); ?>
<li class="blog">
<!-- 投稿の表示内容 -->
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_query(); // クエリをリセット ?>
query_posts() 関数は、新しいクエリを作成して投稿を取得するために使用されます。上記は、投稿の表示件数を5件に制限し、最新の投稿が先頭に表示されるようにする例です。
orderbyパラメータの種類
date: 投稿の日付
title: タイトル
author: 投稿の著者
modified: 最終更新日
parent: 親投稿の ID
menu_order: メニュー順
rand: ランダム
comment_count: コメント数
orderパラメータの種類
ASC: 昇順
DESC: 降順