WordPressで投稿を取得して表示する方法
公開：2025.10.26 更新：2025.11.16
WordPressデフォルトの投稿を、トップページなどで表示するためのコードを掲載します。
※カスタム投稿の場合は設定内容が少し違います。
基本のコード（すべての投稿表示）
投稿表示の基本的なコードがこちらです。
タグの表示はいらないかな～とも思いましたが、このWEBサイトでも表示しているので入れておきました。
このコードの場合、投稿カテゴリーを指定していないので、すべての投稿が表示されます。
<?php
$args = array( //表示する投稿の条件
'post_type' => 'post', //デフォルトの投稿タイプ名
'posts_per_page' => 3 //取得する投稿の件数
);
$my_posts = get_posts($args);
if ($my_posts): //もし条件に当てはまる投稿があれば表示
?>
<ul class="common-post-list">
<?php foreach ($my_posts as $post) : setup_postdata($post); //ここから投稿を繰り返し表示
?>
<div class="common-post-list-item">
<a href="<?php the_permalink(); ?>"><!--投稿ページへのリンク-->
<p class="common-item-date"><?php the_time('Y.m.d'); ?></p><!--投稿された日付-->
<p><?php the_title(); ?></p><!--投稿のタイトル-->
</a>
<?php $tags = get_the_tags(); //投稿に設定されているタグ取得
if ($tags) {
echo '<ul class="tag-list">';
foreach ($tags as $tag) {
echo '<li>';
echo '<a href="' . esc_url(get_tag_link($tag)) . '">♯' . esc_html($tag->name) . '</a>';
echo '</li>';
}
echo '</ul>';
} ?>
</div>
<?php endforeach; //繰り返し表示終わり
?>
</ul>
<?php endif; //もし条件に当てはまる投稿があれば表示のif文終わり
wp_reset_postdata(); //リセットされていないと不具合が起こることがあるため、必ず書いておく
?>ちなみにCSS
このWEBサイトの「管理人のつぶやき」で使用したCSSと同じようなものを置いておきます。
.common-post-list {
border-top: 2px #000000 solid;
}
.common-post-list-item {
border-bottom: 2px #000000 solid;
padding-bottom: 1.6rem;
padding-right: 1rem;
padding-left: 1rem;
}
.common-post-list-item > a {
display: block;
text-decoration: none;
color: #000000;
padding-top: 2.4rem;
padding-bottom: 1em;
transition: 0.3s;
}
.common-post-list-item > a .common-item-date {
margin-bottom: 1rem;
}
.common-post-list-item > a:hover {
color: #777;
}
.tag-list {
margin: 0;
padding-left: 0;
}
.tag-list li {
list-style: none;
padding-right: 1rem;
display: inline-block;
margin-bottom: 0.5em;
}
.tag-list a {
display: inline-block;
color: #000000;
font-size: 1.2rem;
text-decoration: none;
transition: 0.3s;
}
.tag-list a:hover {
color: #777;
}このページです。
https://customizatips.com/category/topics
カテゴリーで絞り込んで表示
投稿の中でも、特定のカテゴリーを設定されている一部の記事だけ表示したい場合のコードです。
条件を指定する部分を抜き出して書いています。
「category_name」にカテゴリーのスラッグを指定してください。
<?php
$args = array( //表示する投稿の条件
'post_type' => 'post', //デフォルトの投稿タイプ名
'posts_per_page' => 3, //取得する投稿の件数
'category_name' => 'catname' // 表示するカテゴリーのスラッグを設定
);
$my_posts = get_posts($args);
if ($my_posts): //もし条件に当てはまる投稿があれば表示
?>複数のカテゴリーで絞り込んで表示する場合
カテゴリーを複数指定して投稿を表示する場合のコードです。
「category_name」で投稿のカテゴリーを指定するときに、カテゴリーのスラッグを「,」で区切って設定します。
<?php
$args = array( //表示する投稿の条件
'post_type' => 'post', //デフォルトの投稿タイプ名
'posts_per_page' => 3, //取得する投稿の件数
'category_name' => 'catname1,catname2' // 表示するカテゴリーのスラッグを複数設定
);
$my_posts = get_posts($args);
if ($my_posts): //もし条件に当てはまる投稿があれば表示
?>カテゴリーIDで絞り込んで表示する場合
カテゴリースラッグではなく、IDで投稿を絞り込む場合のコードです。
「category_name」を「cat」に変更して、カテゴリーIDを設定します。
複数のカテゴリーIDで絞り込む場合は、先ほどと同じようにIDを「,」で区切ります。
<?php
$args = array( //表示する投稿の条件
'post_type' => 'post', //デフォルトの投稿タイプ名
'posts_per_page' => 3, //取得する投稿の件数
'cat' => '1,2' // 表示するカテゴリーのスラッグを設定
);
$my_posts = get_posts($args);
if ($my_posts): //もし条件に当てはまる投稿があれば表示
?>カテゴリーIDはカテゴリー一覧から確認できます。
WordPress管理画面の「投稿」から「カテゴリー」の画面を開きます。
そこでカテゴリーの名前にカーソルを合わせると、画面左下に
「https://ドメイン/～中略～&tag_ID=1&～以下略」
のような文字列が表示されます。
その中の「tag_ID=」の後ろに表示されている数字がカテゴリーIDです。
今回の参考サイトまとめ
投稿の絞り込み条件は他にもあるので、また今度追記しておきます。
