masakichi-code

archive.phpだけで選択したタームを絞る書き方【コピペOK】

PHP
WordPress

2023.12.06(水)

『archive.phpだけで選択したタームで絞ったページを表示したい』

こういった疑問に答えます。

本記事の内容

archive.phpだけで選択したタームを絞る書き方

Webエンジニア歴1年半
WordPressの運営＆立ち上げ70サイト以上かかわっている

こういった私が解説していきます。

1. archive.phpだけで選択したタームを絞る書き方

その①：archive-news.phpを例にした書き方
その②：細かく解説していきます

その①：archive-news.phpを例にした書き方

下記コードをコピペOKです

下記コードをサンプルに説明します。
ご自身で変えているところを適宜変更してくださいね。

<?php
/* news一覧 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main archive_news_content news_content page_content" role="main">
        <div class="content">
            <h2>NEWS</h2>
            <p>新着情報</p>
            <?php
            // タームのスラッグを取得
            $news_list = get_query_var('news_list');

            // タームが指定されていれば、そのターム名を表示
            if (!empty($news_list)) {
                echo '<h3 class="news_cate_title">' . esc_html($news_list) . '</h3>';
            }
            ?>
            <?php
            $paged = get_query_var('paged') ? get_query_var('paged') : 1;
            $args  = array(
                'post_type'      => 'news',
                'post_status'    => 'publish',
                'posts_per_page' => 12,
                'paged'          => $paged,
                'order'          => 'DESC',
            );
            $the_query = new WP_Query($args);
            ?>

            <div class="news_wrapper">

                <?php if ($the_query->have_posts()) : ?>
                    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
                        <div class="news_item">
                            <a href="<?php echo esc_url(get_permalink()); ?>">
                                <?php the_post_thumbnail('full'); ?>
                                <h3><?php the_title(); ?></h3>
                            </a>
                            <div class="news_item_category">
                                <?php
                                $news_list  = get_the_terms(get_the_ID(), 'news_list');

                                if ($news_list && !is_wp_error($news_list)) {
                                    foreach ($news_list as $term) {
                                        echo '<a href="' . esc_url(add_query_arg('news_area', $term->slug, get_post_type_archive_link('news'))) . '">' . esc_html($term->name) . '</a>';
                                    }
                                }
                                ?>
                            </div><!-- /.news_item_category -->
                        </div><!-- /.news_item -->
                    <?php endwhile; ?>
                <?php else : ?>
                    <p class="none">現在新着情報はありません。</p>
                <?php endif; ?>
            </div><!-- /.news_wrapper -->

            <div class="page_nation">
                <?php wp_pagination_news(); ?>
            </div><!-- page_nation -->

        </div><!-- content -->

    </main><!-- .site-main -->
</div><!-- .content-area -->

<?php
wp_reset_query();
get_footer();

<?php

/* news一覧 */

get_header();

<?php

// タームのスラッグを取得

$news_list = get_query_var('news_list');

// タームが指定されていれば、そのターム名を表示

if (!empty($news_list)) {

echo '<h3 class="news_cate_title">' . esc_html($news_list) . '</h3>';

}

<?php

$paged = get_query_var('paged') ? get_query_var('paged') : 1;

$args = array(

'post_type' => 'news',

'post_status' => 'publish',

'posts_per_page' => 12,

'paged' => $paged,

'order' => 'DESC',

);

$the_query = new WP_Query($args);

<?php if ($the_query->have_posts()) : ?>

<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

<?php the_post_thumbnail('full'); ?>

</a>

<?php

$news_list = get_the_terms(get_the_ID(), 'news_list');

if ($news_list && !is_wp_error($news_list)) {

foreach ($news_list as $term) {

echo '<a href="' . esc_url(add_query_arg('news_area', $term->slug, get_post_type_archive_link('news'))) . '">' . esc_html($term->name) . '</a>';

}

</div>

</div>

<?php endwhile; ?>

<?php else : ?>

<p class="none">現在新着情報はありません。</p>

<?php endif; ?>

</div>

<?php wp_pagination_news(); ?>

</div>

</div>

</main>

</div>

<?php

wp_reset_query();

get_footer();

その②：細かく解説していきます

ターム名を動的に表示する

下記コードでタームの名前を動的に表示しています。
もし、タームが選択されていなければ表示されません。

    // タームのスラッグを取得
    $news_list = get_query_var('news_list');

    // タームが指定されていれば、そのターム名を表示
    if (!empty($news_list)) {
        echo '<h3 class="news_cate_title">' . esc_html($news_list) . '</h3>';
    }

// タームのスラッグを取得

$news_list = get_query_var('news_list');

// タームが指定されていれば、そのターム名を表示

if (!empty($news_list)) {

echo '<h3 class="news_cate_title">' . esc_html($news_list) . '</h3>';

}

カスタム投稿を取得する

カスタム投稿タイプ『news』を取得しています。
サイトにあわせてタイトルやサムネイルを表示していきます。

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
    $args  = array(
        'post_type'      => 'news',
        'post_status'    => 'publish',
        'posts_per_page' => 12,
        'paged'          => $paged,
        'order'          => 'DESC',
    );
    $the_query = new WP_Query($args);

$paged = get_query_var('paged') ? get_query_var('paged') : 1;

$args = array(

'post_type' => 'news',

'post_status' => 'publish',

'posts_per_page' => 12,

'paged' => $paged,

'order' => 'DESC',

);

$the_query = new WP_Query($args);

タームを自動で吐き出す

投稿に紐づくタームを自動で出力させます。
『add_query_arg』でパラメータとしてリンクを吐き出すことでarchive.phpだけでタームを絞ったページを表示しています。
リンクをクリックすると『https://hogehoge.com/news/?news_list=新着情報』や『https://hogehoge.com/news/?news_list=other』みたいに追加したタームのURLが表示されているはずです。

    $news_list  = get_the_terms(get_the_ID(), 'news_list');

    if ($news_list && !is_wp_error($news_list)) {
        foreach ($news_list as $term) {
            echo '<a href="' . esc_url(add_query_arg('news_area', $term->slug, get_post_type_archive_link('news'))) . '">' . esc_html($term->name) . '</a>';
        }
    }

$news_list = get_the_terms(get_the_ID(), 'news_list');

if ($news_list && !is_wp_error($news_list)) {

foreach ($news_list as $term) {

echo '<a href="' . esc_url(add_query_arg('news_area', $term->slug, get_post_type_archive_link('news'))) . '">' . esc_html($term->name) . '</a>';

}

以上、archive.phpだけで選択したタームで絞ったページを表示するやり方をご紹介しました。
ではまた。

< 前の記事一覧へ戻る次の記事 >

masakichi

カテゴリー

アーカイブ

2024 (1)
2023 (18)
2022 (8)