WordPressのカスタム投稿タイプのカテゴリー別の一覧記事を表示する方法を紹介！ソースコードあり！

2023年12月30日
コラム
WordPress

コラム

1 はじめに
- 1.1 WordPressとカスタム投稿タイプの基本
- 1.2 本記事の目的と対象読者
2 ソースコードの紹介
3 実際のサイトでの表示
- 3.1 該当記事がない場合の表示
- 3.2 ソースコードを適用したサイトのビジュアル
4 まとめ

はじめに

WordPressは、その強力なカスタマイズ性と柔軟性により、世界中のウェブサイト開発者に広く利用されています。この記事では、WordPressのカスタム投稿タイプのカテゴリー別記事一覧を表示する方法を紹介します。さらに効率よく自身のサイトに導入できるように書いているのでご覧ください。

WordPressとカスタム投稿タイプの基本

WordPressは、ブログやウェブサイトのコンテンツを管理するための柔軟なプラットフォームです。カスタム投稿タイプは、標準の「投稿」や「固定ページ」以外にも、特定の目的やニーズに合わせたコンテンツタイプを作成することを可能にします。これにより、コラム記事、商品記事、制作実績など、さまざまな形式のコンテンツを効果的に管理できます。

本記事の目的と対象読者

この記事は、WordPressの開発者、デザイナー、ブログ運営者、そして学習者を対象としています。特に、WordPressサイトにおけるカスタム投稿タイプの設定や活用に関心のある方々にとって有益です。ソースコードの紹介から、その詳細な解説、実際のウェブサイトでの表示方法までを解説し、読者が自身のプロジェクトに応用できる知識を提供します。

ソースコードの紹介

このセクションでは、WordPressのカスタム投稿タイプのカテゴリー別の一覧記事を表示するためのソースコードについて紹介します。具体的なコードの構造と、それをサイトに組み込むために必要な事前準備に焦点を当てて説明します。

ソースコードの概要

提供するソースコードは、特定のWordPressのカスタム投稿タイプのカテゴリー一覧記事を表示するためのものです。

必要なツールと事前準備

事前準備
functions.phpや「Custom Post Type UI」などのプラグインでカスタム投稿タイプやタクソノミーを設定する
管理画面からカスタム投稿タイプのカテゴリーや記事を作成する

ソースコード例

PHPソースコード

taxonomy.phpやtaxonomy-{タクソノミースラッグ}.phpなどに下記ソースコードを追加してください。

<?php
    $post_type = get_post_type();
    $tax = get_object_taxonomies($post_type);
    $term = get_queried_object();
?>
<p class="pageTitle"><?php echo $term->name; ?>一覧記事</p>
<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array(
        'post_type' => $post_type,
        'posts_per_page' => 3,
        'paged' => $paged,
        'tax_query' => array(
            array(
                'taxonomy' => $tax[0],
                'field' => 'id',
                'terms' => $term->term_id,
            )
        )
    );
    $the_query = new WP_Query($args);
    if( $the_query->have_posts() ): ?>
        <div class="article__list">
            <?php while( $the_query->have_posts() ):$the_query->the_post();?>
                <article class="article__item">
                    <a href="<?php the_permalink() ?>">
                        <div class="article__img">
                            <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" width="275" height="206">
                        </div>
                        <div class="article__content">
                        <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
                            <p class="article__ttl"><?php the_title(); ?></p>
                            <div class="article-readmore">
                                <span>詳細はこちら</span>
                                <span class="icon-right"></span>
                            </div>
                        </div>
                    </a>
                </article>
            <?php endwhile; ?>
        </div>
    <?php else: ?>
        <p class="no_column"><?php echo $term->name; ?>に関する記事はまだありません。</p>
    <?php endif;
    wp_reset_postdata();
?>

CSSソースコード

.pageTitle {
    position: relative;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}
.pageTitle::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 3px;
    margin: 10px auto 0;
    background-color: #094;
}
.article__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4%;
    row-gap: 24px;
}
.article__item {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
}
.article__img {
    position: relative;
    overflow: hidden;
}
.article__img::before {
    content: "";
    display: block;
    padding-top: 75%;
}
.article__img img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: all 0.3s;
}
.article__img:hover img {
    transform: scale(1.2);
}
.article__content {
    position: relative;
    font-size: 14px;
    padding: 15px;
    background-color: #fff;
}
.no_column {
    margin-top: 30px;
}
.article-readmore {
    position: relative;
    font-size: 14px;
    text-align: right;
    padding-right: 20px;
}
.icon-right::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translate(-65%,-50%) rotate(45deg);
}
@media screen and (min-width: 768px) {
    .article__item a {
        display: flex;
        gap: 20px;
    }
    .article__img {
        width: 40%;
    }
    .article__content {
        width: 60%;
    }
}

ソースコードの解説

表示されている一覧ページの投稿タイプの取得

$post_type = get_post_type();

表示されている記事のページの投稿タイプを取得します。

表示されている一覧ページの投稿タイプのタクソノミーを取得

$tax = get_object_taxonomies($post_type);

表示されている一覧ページの投稿タイプに関連付けられたタクソノミーを取得します。

表示されている一覧ページのターム（カテゴリーやタグ）情報を取得

$term = get_queried_object();

表示されている一覧ページの投稿タイプのターム（カテゴリーやタグ）情報を取得します。

カテゴリー一覧ページに表示させる記事の条件を指定する

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    'post_type' => $post_type,
    'posts_per_page' => 3,
    'paged' => $paged,
    'tax_query' => array(
        array(
            'taxonomy' => $tax[0],
            'field' => 'id',
            'terms' => $term->term_id,
        )
    )
);
$the_query = new WP_Query($args);

ソースコードの上記部分で表示させる記事の条件を指定しています。