ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

ワードプレス:タームごとに記事一覧を表示する

カスタム投稿タイプの記事一覧を、ターム名ごとに一覧表示するPHPコードです

カスタム投稿タイプをタームごとに一覧表示させる方法です。 画像にするとこんな感じで表示されます。

タームごとに記事を表示

コードは下記になります。
カスタマイズしやすいようにしています。

PHP

<?php
$taxonomy_name = 'タクソノミー名';
$taxonomys = get_terms($taxonomy_name);

if(!is_wp_error($taxonomys) && count($taxonomys)):

foreach($taxonomys as $taxonomy):
$tax_posts = get_posts(array('post_type' => get_post_type(), 'taxonomy' => $taxonomy_name,
'term' => $taxonomy->slug ) );
if($tax_posts):
?>

<h2><?php echo esc_html($taxonomy->name); ?></h2> //ターム名が表示
<ul>

<?php
foreach($tax_posts as $tax_post):
?>
<li>
<a href="<?php echo get_permalink($tax_post->ID); ?>"> //記事へのリンク
<figure>
<?php
//画像 if(has_post_thumbnail($tax_post->ID)) { echo get_the_post_thumbnail($tax_post->ID,'post-thumbnail'); }
?>
</figure>

<h3><?php echo get_the_title($tax_post->ID); ?></h3> //タイトル <h4><?php echo $tax_post->{'カスタムフィールド名'}; ?></h4> //カスタムフィールドを使わない場合は不要です
</li>
<?php endforeach; ?>

</ul>
<?php endif; endforeach; endif; ?>

HTMLは下記のように表示されます。

HTML
<h2>タームタイトル</h2>
<ul>
    <li>
    <a href="">
    <figure><img src=""></figure>
    <h3>記事タイトル</h3>
    <h4>カスタムフィールド</h4>
    </a>

    <li>
<ul>

<h2>タームタイトル</h2>
<ul>
    <li>
    <a href="">
    <figure><img src=""></figure>
    <h3>記事タイトル</h3>
    <h4>カスタムフィールド</h4>
    </a>

    <li>
<ul>

1行目のタクソノミー名には「genre」など、設定したタクソノミー名を記入します。

カスタムフィールド名には「cf_name」など、表示したいカスタムフィールド名を記入します。

カスタムフィールドの表示でちょっと躓くので、備忘録としてメモっておきます。

新しい記事

東京のWEB制作会社イッティ