カスタム投稿でカテゴリーを取得する方法とは？一覧ページを作成する方法も解説【WordPress】

<h2>エリア</h2>
<ul>
    <?php
    $terms = get_terms('area'); //←タクソノミーのスラッグ名を記載する
    foreach ($terms as $term) {
        echo '<li><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
    }
    ?>
</ul>

<h2>エリア</h2>
<ul>
    <?php
    $terms = get_terms('area'); //←タクソノミーのスラッグ名を記載する
    foreach ($terms as $term) {
        echo '<li>' . $term->name . '</li>';
    }
    ?>
</ul>

<h2 class="taxonomy-title">エリア</h2>
<ul>
    <?php
    $terms = get_terms('area'); 
    foreach ($terms as $term) {
        echo '<li class="terms-area"><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
    }//←<li>にクラス名を追加
    ?>
</ul>

// ターム一覧のスタイル
.terms-area {
    margin-bottom: 5px;
    list-style: inside;
    color: #4682b4;
    font-size: 18px;
}

.terms-area a:visited {
    color: #4682b4;
}

// タクソノミー名（タイトル）のスタイル
.taxonomy-title {
    width: auto;
    display: inline-block;
    height: 33px;
    vertical-align: middle;
    padding: 0 10px;
    background-color: #1b224c;
    color: #ffffff;
}

<h2 class="taxonomy-title">エリア</h2>
<ul>
    <?php
    $terms = get_terms('area');
    foreach ($terms as $term) {
        echo '<li class="terms-area"><a href="' . get_term_link($term) . '" ' . 'class="' . esc_attr($term->slug) . '">' . $term->name . '</a></li>';
    }
    ?>
</ul>

//「兵庫」だけを太文字・大文字に設定する
.hyogo {
    font-size: 18px;
    font-weight: bold;
}

// タクソノミー名（タイトル）のスタイル
.taxonomy-title {
    width: auto;
    display: inline-block;
    height: 33px;
    vertical-align: middle;
    padding: 0 10px;
    background-color: #1b224c;
    color: #ffffff;
}

// リンク付きのターム一覧のスタイル
.terms-area {
    margin-bottom: 5px;
    list-style: inside;
    color: #4682b4;
    font-size: 14px;
}

.terms-area a:visited {
    color: #4682b4;
}

<!-- タイトル -->
<h1 class="title"><?php the_title(); ?></h1>

<!-- エリアカテゴリー -->
<?php
$terms = get_the_terms($post->ID, 'area'); //タクソノミーのスラッグを設定
if ($terms) :
    foreach ($terms as $term) {
        echo '<a href="' . get_term_link($term) . '">' . $term->name . '</a>';
    }
endif;
?>

<!-- タイトル -->
<h1 class="title"><?php the_title(); ?></h1>

<!-- カテゴリー -->
<p class="area">
    <?php
    $terms = get_the_terms($post->ID, 'area');
    if ($terms) :
        foreach ($terms as $term) {
            echo '<i class="fas fa-map-marker-alt area-icon">';//←アイコンを挿入
            echo '</i>';
            echo '<a href="' . get_term_link($term) . '">' . $term->name . '</a>';
        }
    endif;
    ?>
</p>

// タイトル
.title {
    margin-bottom: 10px;
    font-size: 26px;
}

// カテゴリーのスタイル
.area {
    font-weight: bold;
    font-size: 14px;
}

.area a {
    color: #37bcdb;
    margin: 0;
}

// アイコンのスタイル
.area-icon {
    color: #37bcdb;
    padding: 0 5px;
}

<!-- タイトル -->
<h1 class="title"><?php the_title(); ?></h1>

<!-- リンクなしのカテゴリー-->
<?php
$terms = get_the_terms($post->ID, 'area');
if ($terms) :
    foreach ($terms as $term) {
        echo '<span>' . $term->name . '</span>';
    }
endif;
?>

<!-- タイトル -->
<h1 class="title"><?php the_title(); ?></h1>

<!-- リンクなしのカテゴリー -->
<p class="area">
    <?php
    $terms = get_the_terms($post->ID, 'area');
    if ($terms) :
        foreach ($terms as $term) {
            echo '<i class="fas fa-map-marker-alt area-icon">';//←アイコンを挿入
            echo '</i>';
            echo '<span class="area">' . $term->name . '</span>';//←クラス名を設定
        }
    endif;
    ?>
</p>

// タイトル
.title {
    margin-bottom: 10px;
    font-size: 26px;
}

// カテゴリーのスタイル
.area {
    font-weight: bold;
    font-size: 14px;
    color: #37bcdb;
}

// アイコンのスタイル
.area-icon {
    color: #37bcdb;
    padding: 0 5px;
}

 <div class="category">
        <h2 class="category-heading"><?php single_cat_title(); ?>カテゴリー一覧</h2>
        <ul class="category-contents">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <a class="category-link" href="<?php the_permalink(); ?>">
                        <dl class="category-item">
                            <dt class="category-date">
                                <!-- 日付 -->
                                <?php the_time('Y/m/d'); ?>
                            </dt>
                            <!-- タイトル -->
                            <dd class="category-title">
                                <?php the_title(); ?>
                            </dd>
                        </dl>
                    </a>
                <?php endwhile; ?>
            <?php endif;
            wp_reset_postdata(); ?>
        </ul>
    </div>

.category {
    margin: 50px auto;
    width: 700px;
}

.category-heading {
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    margin: 50px 0;
}

.category-contents {
    display: block;
    margin-bottom: 50px;
    border-top: 1px solid rgb(199, 192, 192);
}

.category-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-bottom: 1px solid rgb(199, 192, 192);
}

.category-date {
    width: 40%;
    padding: 23.5px 0 24.5px;
    text-align: center;
}

.category-title {
    width: 60%;
    padding: 23.5px 0 24.5px;
    text-align: left;
}

<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if (strpos($paginate_base, '?') || !$wp_rewrite->using_permalinks()) {
        $paginate_format = '';
        $paginate_base = add_query_arg('paged', '%#%');
    } else {
        $paginate_format = (substr($paginate_base, -1, 1) == '/' ? '' : '/') .
            user_trailingslashit('page/%#%/', 'paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 1,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '←',
        'next_text' => '→',
    ));
    ?>
</div>

.pagination {
    text-align: center;
}

/* 現在開いている以外のページのタブ */
.pagination .page-numbers {
    display: inline-block;
    margin-right: 25px;
    padding: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: $footer-font-color;
    border: 1px solid $footer-font-color;
    background: #fff;
    font-weight: bold;
    font-size: 12px;
}

/* マウスが乗った時の、ボタンの背景の色と文字の色 */
.pagination a.page-numbers:hover {
    color: #FFF;
    background-color: #999;
    border-color: #999;
}

/* 現在のページのタブ */
.pagination .current {
    padding: 0;
    background: $footer-font-color;
    color: #FFFFFF;
    font-size: 12px;
}

/* 前へ、次へ */
.pagination .prev,
.pagination .next {
    // display: block;
    border: 1px solid $blue;
    color: $blue;
    position: relative;
    font-size: 12px;

}
.pagination a.next.page-numbers {
    margin-right: 0;
}

// 矢印より前の縦線
.pagination .next::before {
    content: "";
    display: inline-block;
    width: 0.5px;
    height: 40px;
    background-color: rgb(224, 215, 215);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -15px;
}

// 矢印より後の縦線
.pagination .prev::after {
    content: "";
    display: inline-block;
    width: 0.5px;
    height: 40px;
    background-color: rgb(224, 215, 215);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
}

/* 数字の間のドット */
.pagination .dots {
    background: transparent;
    border: none;
}

function change_posts_per_page($query)
{
  if (is_admin() || !$query->is_main_query()) {
    return;
  }
  if ($query->is_tax(array('area'))) { //タクソノミー名を設定
    $query->set('posts_per_page', '5'); //表示件数を設定
  }
}
add_action('pre_get_posts', 'change_posts_per_page');