WordPressでタグを使って投稿をフィルタリングする方法

WordPressでタグは非常に便利な分類方法のひとつです。ブログやウェブサイトを運営する中で、読者にとって役立つフィルタリング機能を提供することは、サイトの使いやすさを向上させる重要なポイントです。今回は、WordPressでタグを使って投稿をフィルタリングし、そのタグに関連する投稿だけを表示するカスタムページテンプレートを作成する方法をご紹介します。さらに、フィルタに使用したタグ名をページ内に表示する方法も解説します。

Contents

タグとは？

タグとは？

WordPressのタグは、投稿をカテゴリーとは異なる角度から分類するためのツールです。カテゴリーは階層的な分類に向いていますが、タグは自由なキーワードのように扱われ、階層構造を持たない特徴があります。たとえば、「WordPress」「PHP」「SEO」といったタグを使うことで、投稿を複数の視点で整理できます。

タグでフィルタリングするためのカスタムページテンプレートの作成

WordPressでは、タグでフィルタリングされた投稿一覧ページを作るためにカスタムページテンプレートを使用します。以下のステップに従って、タグに基づいて投稿をフィルタリングし、さらにフィルタに使用したタグ名も表示するカスタムページテンプレートを作成します。

手順1：カスタムページテンプレートの作成

まず、WordPressのテーマディレクトリ（通常は/wp-content/themes/your-theme/）に新しいファイルを作成します。このファイルにpage-tag-filter.phpという名前を付けてください。このファイルがカスタムページテンプレートとして機能するように、以下のような基本構造を追加します。

<?php
/*
Template Name: Tag Filter Page
*/
?>

これにより、WordPress管理画面のページ作成画面から「Tag Filter Page」というテンプレートが選択できるようになります。

手順2：タグスラッグを使って投稿をフィルタリングする

次に、ページに表示する投稿をタグでフィルタリングするためのコードを追加します。ここでは、特定のタグスラッグ（例：「example-tag」）に基づいて投稿をフィルタリングし、その結果を表示するためにWP_Queryクラスを使用します。

<?php
get_header(); ?>

<div id="content" class="site-content">
    <?php
    // フィルタリングしたいタグのスラッグを指定します
    $tag_slug = 'example-tag'; // ここにフィルタリングしたいタグのスラッグを指定します

    // クエリ引数を設定します
    $args = array(
        'post_type' => 'post', // 投稿タイプ
        'tag' => $tag_slug,    // タグスラッグ
        'posts_per_page' => 10 // 表示する投稿数
    );

    // カスタムクエリを作成します
    $query = new WP_Query( $args );

    // クエリが投稿を持っているか確認します
    if ( $query->have_posts() ) : 
        // 投稿をループします
        while ( $query->have_posts() ) : $query->the_post(); ?>
            <div class="post">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry">
                    <?php the_excerpt(); ?>
                </div>
                <div class="post-tags">
                    <?php the_tags( '<ul><li>', '</li><li>', '</li></ul>' ); ?>
                </div>
            </div>
        <?php endwhile; 
        else : ?>
        <p>No posts found with this tag.</p>
    <?php endif; 

    // クエリデータをリセットします
    wp_reset_postdata(); 
    ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

解説

WP_Queryを使って、特定のタグに基づいて投稿をフィルタリングしています。この場合、$tag_slugに指定されたスラッグ「example-tag」を持つ投稿のみが表示されます。
the_excerpt()関数で各投稿の抜粋を表示し、the_permalink()関数で投稿の詳細ページへのリンクを出力します。
the_tags()関数を使用して、各投稿に付けられたタグをリスト形式で表示します。

このコードにより、特定のタグに基づいてフィルタリングされた投稿が表示されます。

手順3：フィルタに使用したタグ名を表示する

次に、ページの冒頭にフィルタリングしているタグの名前を表示するためのコードを追加します。タグのスラッグからタグ名を取得し、それをHTMLで出力します。

<?php
// タグオブジェクトを取得します
$tag = get_term_by('slug', $tag_slug, 'post_tag');

// タグが存在する場合、タグ名を表示します
if ($tag) {
    echo '<h1>Posts tagged with: ' . esc_html($tag->name) . '</h1>';
} else {
    echo '<h1>No posts found for the specified tag.</h1>';
}

解説

get_term_by()関数を使って、指定されたタグスラッグからタグオブジェクトを取得します。
タグが存在する場合は、esc_html($tag->name)でタグ名をエスケープして安全に出力します。
タグが見つからない場合は、エラーメッセージを表示します。

この部分のコードをページテンプレート内に追加することで、ページ上部に現在フィルタしているタグ名を表示することができます。

完成したカスタムページテンプレートの全体コード

これで、タグ名を表示し、タグに基づいて投稿をフィルタリングするカスタムページテンプレートのコードが完成しました。以下に、完成したテンプレートコードを再掲します。

<?php
/*
Template Name: Tag Filter Page
*/

get_header(); ?>

<div id="content" class="site-content">
    <?php
    // フィルタリングしたいタグのスラッグを指定します
    $tag_slug = 'example-tag'; // ここにフィルタリングしたいタグのスラッグを指定します

    // タグオブジェクトを取得します
    $tag = get_term_by('slug', $tag_slug, 'post_tag');

    // タグが存在する場合、タグ名を表示します
    if ($tag) {
        echo '<h1>Posts tagged with: ' . esc_html($tag->name) . '</h1>';
    } else {
        echo '<h1>No posts found for the specified tag.</h1>';
    }

    // クエリ引数を設定します
    $args = array(
        'post_type' => 'post', // 投稿タイプ
        'tag' => $tag_slug,    // タグスラッグ
        'posts_per_page' => 10 // 表示する投稿数
    );

    // カスタムクエリを作成します
    $query = new WP_Query( $args );

    // クエリが投稿を持っているか確認します
    if ( $query->have_posts() ) : 
        // 投稿をループします
        while ( $query->have_posts() ) : $query->the_post(); ?>
            <div class="post">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry">
                    <?php the_excerpt(); ?>
                </div>
                <div class="post-tags">
                    <?php the_tags( '<ul><li>', '</li><li>', '</li></ul>' ); ?>
                </div>
            </div>
        <?php endwhile; 
        else : ?>
        <p>No posts found with this tag.</p>
    <?php endif; 

    // クエリデータをリセットします
    wp_reset_postdata(); 
    ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>