カスタム投稿を取得して表示する方法
公開：2025.11.22
WordPressのカスタム投稿を、トップページなどで表示するためのコードを掲載します。
カスタム投稿はfunctions.phpに作成するためのコードを書くか、WordPressのプラグインで作成できます。（その話はまた別の記事でするかもしれない）
WordPressデフォルトの投稿の場合は、設定内容が少し違います。
デフォルトの投稿を表示する方法はこちら。
基本のコード（指定したカスタム投稿のすべての投稿表示）
カスタム投稿の投稿を表示する基本的なコードがこちらです。
デフォルトの投稿は「post_type」が「post」になります。
ですがカスタム投稿の場合は、カスタム投稿を作成する際に設定した投稿タイプ名を入力します。（この場合「custompost_name」）
タグの表示方法なども、デフォルトの投稿とは違うところがあるのでややこしいんですよね。
PHP
<?php
$args = array( //表示する投稿の条件
'post_type' => 'custompost_name', //カスタム投稿タイプ名
'posts_per_page' => 3 //取得する投稿の件数
);
$my_posts = get_posts($args);
if ($my_posts):
?>
<div class="custom-archive-tips-wrap">
<?php foreach ($my_posts as $post) : setup_postdata($post); ?>
<div class="custom-item">
<a href="<?php the_permalink(); ?>">
<div class="custom-item-img">
<?php if (has_post_thumbnail()) ://アイキャッチが設定されていれば ?>
<?php the_post_thumbnail('large');//アイキャッチを表示 ?>
<?php else ://設定されていない場合、代替画像を表示 ?>
<picture>
<source srcset="<?php echo get_template_directory_uri(); ?>/img/defo.webp" type="image/webp">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/defo.png" type="image/png">
<img src="<?php echo get_template_directory_uri(); ?>/img/defo.png" width="800" height="500" alt="デフォルト画像">
</picture>
<?php endif; ?>
</div>
<p class="custom-item-date"><?php the_time('Y.m.d');//投稿された日付を表示 ?></p>
<p class="custom-item-ttl"><?php the_title();//投稿のタイトルを表示 ?></p>
</a>
<?php
$terms = get_the_terms($post->ID, 'custom-tag');//タグを表示
if ($terms) :
echo '<ul class="custom-tag-list">';
foreach ($terms as $term) {
echo '<li><a href="' . get_term_link($term) . '">♯' . $term->name . '</a></li>';
}
echo '</ul>';
endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif;
wp_reset_postdata(); ?>ちなみにCSS
カスタム投稿の備忘録ページで使用しているものと同じようなCSSを置いておきます。
CSS
.custom-item > a {
display: block;
text-decoration: none;
color: #000000;
}
.custom-item-img {
margin-bottom: 2rem;
overflow: hidden;
aspect-ratio: 1.618/1;
}
.custom-item-img img {
transition: 0.6s;
}
a:hover .custom-item-img img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.custom-item-date {
font-size: 1.2rem;
line-height: 1;
}
.custom-item-ttl {
font-size: 1.6rem;
}
.custom-tag-list {
margin: 0;
padding-left: 0;
}
.custom-tag-list li {
list-style: none;
padding-right: 1rem;
display: inline-block;
margin-bottom: 0.5em;
}
.custom-tag-list a {
display: inline-block;
color: #000000;
font-size: 1.2rem;
text-decoration: none;
transition: 0.3s;
}
.custom-tag-list a:hover {
color: #777;
}
@media screen and (min-width: 576px) {
.custom-archive-tips-wrap {
display: flex;
flex-wrap: wrap;
margin-right: -1.6rem;
margin-left: -1.6rem;
}
}
.custom-archive-tips-wrap .custom-item {
margin-bottom: 4.8rem;
}
@media screen and (min-width: 576px) {
.custom-archive-tips-wrap .custom-item {
padding-right: 1.6rem;
padding-left: 1.6rem;
}
}
@media screen and (min-width:576px) and (max-width:991px) {
.custom-archive-tips-wrap .custom-item {
width: 50%;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
.custom-archive-tips-wrap .custom-item {
width: 33.3333333333%;
}
}
@media screen and (min-width:1200px) and (max-width:1599px) {
.custom-archive-tips-wrap .custom-item {
width: 50%;
}
}
@media screen and (min-width: 1600px) {
.custom-archive-tips-wrap .custom-item {
width: 33.3333333333%;
}
}このページです。
https://customizatips.com/tips
タクソノミー（カテゴリーやタグ）で絞り込んで表示
カスタム投稿の投稿の中でも、特定のタクソノミーのタームが設定されている投稿を絞り込んで表示する方法です。
下のコードだと、「tax_query」という項目が増えています。
その項目の中でタクソノミー名と、絞り込むターム名を設定します。
PHP
<?php
$args = array(
'post_type' => 'custompost_name', //カスタム投稿タイプ名
'posts_per_page' => 3, //取得する投稿の件数
'tax_query' => array(
array(
'taxonomy' => 'customtaxonomy_name', //タクソノミー名
'field' => 'slug', //タームをスラッグで指定
'terms' => 'customtaxonomy-terms' //ターム名
)
)
);
$my_posts = get_posts($args);
if ($my_posts):
?>タクソノミー？タームとは？
急にタクソノミーだとかタームだとか言われてもわからんのだが？という状態だった私。
めちゃくちゃざっくり説明しますと、カスタム投稿の場合、デフォルトの投稿ではカテゴリーやタグと呼んでいたものを「タクソノミー」と呼びます。
また、カテゴリー名やタグ名のことは「ターム」と呼びます。理由は知らないけども。
とりあえずなんとな～くわかっていれば大丈夫だと思います。
★ポイント
- まず「カスタム投稿」というものがあります。
カスタム投稿は、「カスタム投稿タイプ名（カスタムポストタイプなどとも言う）」でデフォルトの投稿と区別されます。 - 次に、カスタム投稿は「タクソノミー」というもので投稿を分類することができます。
カスタム投稿のカテゴリーやタグは、タクソノミーというものでグループ分けされているイメージです。 - 最後に、カスタム投稿ではカテゴリーやタグのことを「ターム」と呼びます。
タームはタクソノミーでグループ分けされています。（タクソノミーの中にタームがあるイメージ） - 自分的カスタム投稿とタクソノミー・タームの解釈イメージ
「読んだ本の感想」というカスタム投稿があったとする。
その投稿を分類するために、「ジャンル」と「分類」というタクソノミーをそれぞれ作成した。
ジャンルのタームは「アクション」「ミステリー」「ファンタジー」など。
分類のタームは「小説」「コミック」「エッセイ」など。
