WordPressでタグ機能を活用！投稿をさらに細かく分類する実装テクニック

2025/07/26
BASICS
WordPressの基礎
0comments
30views
約9分で読めます
31

前回の記事では、WordPressのカテゴリー機能を使って投稿を分類し、カテゴリーごとに個別のページを作成する方法を学習しました。

今回は、タグ機能の活用について詳しく解説します。カテゴリーとタグは異なる性質を持つ分類方法で、カテゴリーが「投稿の種類」を表すのに対し、タグは「投稿の特徴や属性」を表現するのが一般的です。

なお、カテゴリーをより細かく分類したい場合は、タグではなく親子カテゴリーを使用します。例：「商品情報」→「家電」→「テレビ」のような階層構造です。

タグは複数の投稿に設定することで、カテゴリーとは別の観点から柔軟な分類が可能になります。

今回の目標

投稿にタグを設定する方法を学ぶ
page-news.phpにタグ一覧を追加表示する
tag.phpでタグ別投稿一覧を作成する
タグのパーマリンク設定とタイトル表示を実装する

事前準備：投稿にタグを設定

タグの登録方法

カテゴリーの場合は、管理画面→投稿→カテゴリーから事前登録し投稿の編集画面で選択しましたが、タグは投稿の編集画面から直接登録できるのが特徴です。

もちろん管理画面→投稿→タグで事前登録も可能ですが、タグの性質上、投稿作成と同時に追加していく使い方が一般的です。

タグのスラッグについて

カテゴリーは事前登録の際にスラッグを設定しましたが、タグは投稿画面から直接追加するため、タグのスラッグを意識して使うことはほとんどありません。

もちろんタグにもスラッグは自動で付けられますが、多くの場合はタグ名＝タグのスラッグとして運用されます。そのため、タグ名は日本語でも英数字でも、URLに使いやすい形で付けるのが実用的です。

サンプルデータの準備

次のようにタグを設定して、実際の動作を確認していきます。

投稿日	カテゴリー	タイトル	タグ
2025年07月15日	新店舗	新店舗オープンのお知らせ	新店舗
2025年07月14日	WEB/SNS	SNS総フォロワー100人を達成しました	SNS
2025年07月13日	イベント	WordPress講習会開催のお知らせ	WordPress,講習会
2025年07月12日	休業	夏季休暇のお知らせ	長期休暇
2025年07月12日	WEB/SNS	Webサイト開設のお知らせ	よろしく,ホームページ
2025年07月11日	未分類	Hello world!	よろしく

お知らせページにタグ一覧を表示

get_tags()でタグ一覧を取得

get_tags()でタグ一覧を取得できます。パラメーターやタグ取得後の処理は、カテゴリー（get_categories()）とほぼ同じです。

page-news.phpを以下のように修正します。

<?php get_header();?>
<?php the_content(); ?>
<?php
    // カテゴリー一覧を取得
    $categories = get_categories([
        'hide_empty' => true, // 投稿がないカテゴリーは除外
    ]);
    echo '<h2>カテゴリー</h2>' . PHP_EOL;
    echo '<ul class="category-list">' . PHP_EOL;
    // カテゴリーごとにループ
    foreach ($categories as $category) {
        echo '<li><a href="'.get_term_link($category->term_id).'">'.$category->name.'</a></li>'.PHP_EOL;
    }
    echo '</ul>' . PHP_EOL;
    
    // タグ一覧を取得
    $tags = get_tags([
        'hide_empty' => true, // 投稿がないタグは除外
    ]);
    echo '<h2>タグ</h2>' . PHP_EOL;
    echo '<ul class="tag-list">' . PHP_EOL;
    // タグごとにループ
    foreach ($tags as $tag) {
        echo '<li><a href="'.get_term_link($tag->term_id).'">'.$tag->name.'</a></li>'.PHP_EOL;
    }
    echo '</ul>' . PHP_EOL;
?>
<p>※このページは page-news.php テンプレートで表示されています</p>
<?php get_footer();?>

タグリストのスタイリング

タグは横並びにすることが多いので、main.cssに次のスタイルを追加します。

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.0rem;
    list-style: none;
}

表示を確認

ブラウザで表示を確認してみましょう。カテゴリーは縦並び、タグは横並びで表示されるはずです。

タグの並び順について

並び順を変えたいときは、カテゴリーで使ったプラグイン「Category Order and Taxonomy Terms Order」は使えません。何より、タグはカテゴリーに比べて多くなりがちです。1つ1つ手動で並び替えるのは実用的ではありません。タグ名や紐づいた投稿数が多い順などに並び替えるのが一般的です。

$tags = get_tags([
    'hide_empty' => true, // 投稿がないタグは除外
    'orderby' => 'name',
    'order'   => 'asc',
]);

orderbyには以下の値を指定できます：

'name': タグ名順
'count': 投稿数順
'slug': スラッグ順
'ID': ID順
'description': 説明順

‘orderby’ => ‘name’ が有効にならない

Category Order and Taxonomy Terms Orderプラグインを導入している場合でも、管理画面でタグの並び替えはできません。

しかし、内部的にget_tagsの並び替えが行われています。具体的にはterm_orderという項目で並び替えが行われます。そしてget_tagsのorderby指定よりもterm_orderの並び替えが優先されます。

カテゴリーの場合、管理画面で並び替えを行うことができ、並び替えを行った際、term_orderに並び順に沿った値がセットされます。結果として、管理画面と同じ並びで表示されます。ですが、タグの場合はterm_orderを変更する方法がありません。

これを回避するためにterm_orderによる自動並び替えを無効にすることができます。

管理画面→Taxonomy Terms Order→自動ソートを無効にします。自動ソートを無効にすることによって、get_tagsのorderbyが有効になります。

ですが今度は、get_categoriesがterm_orderで並ばなくなります。get_categoriesにもorderbyを明示的に設定する必要があります。

// カテゴリー
$categories = get_categories([
    'hide_empty' => true, // 投稿がないカテゴリーは除外
    'orderby' => 'term_order', // 管理画面と同じ並び順
    'order' => 'asc', // 管理画面と同じ並び順
]);

// タグ
$tags = get_tags([
    'hide_empty' => true, // 投稿がないタグは除外
    'orderby' => 'name',
    'order'   => 'asc',
]);

タグのパーマリンクを設定

カテゴリーと同様に、管理画面→設定→パーマリンクでタグベースを設定します。

タグベースに以下を入力します。

/news/tag

設定を保存をお忘れなく。

これにより、タグページのURLは以下のような構造になります。

http://sample.local/news/tag/よろしく
http://sample.local/news/tag/sns
http://sample.local/news/tag/講習会

タグに該当する投稿の一覧ページを作成

tag.phpテンプレートの作成

カテゴリーの場合、category.phpで一覧を表示しました。タグの場合は、tag.phpがテンプレートとなります。

tag.phpはcategory.phpとほぼ同じ構造です。

<?php get_header();?>
<?php
    // 現在表示中のターム情報を取得
    $target = get_queried_object();
    
    // そのタグに属する投稿を取得
    $args = [
        'post_type' => 'post',
        'post_status' => 'publish',
        'orderby' => 'date',
        'order' => 'DESC',
        'tag__in' => [$target->term_id],
    ];
    
    $query = new WP_Query($args);
    
    echo '<ul class="post-list">' . PHP_EOL;
    while ($query->have_posts()) {
        $query->the_post();
        
        echo '<li>'.
            '<span class="date">'.get_the_date('Y年m月d日').'</span>'.
            '<span class="tag">'.$target->name.'</span>'.
            '<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
            '</li>'.PHP_EOL;
    }
    
    wp_reset_postdata(); // 投稿データをリセット
    
    echo '</ul>' . PHP_EOL;
?>
<p>※このページは tag.php テンプレートで表示されています</p>
<?php get_footer();?>

カテゴリーとの違い

重要な違いは、category__inをtag__inに変えるだけです。

// カテゴリーの場合
'category__in' => [$target->term_id],

// タグの場合
'tag__in' => [$target->term_id],

表示の確認

ブラウザでお知らせページのタグ一覧から任意のタグをクリックして、タグページに正しく投稿一覧が表示されることを確認しましょう。

タイトルを正しく反映する

タグページの判定

カテゴリーのときはis_category()で判定しました。タグのときはis_tag()を使用します。

header.phpを変更して、適切なタイトルを表示するようにします。

パターン1：カテゴリーとタグを同じタイトル形式に

<?php
if (is_category() || is_tag()) {
    $term = get_queried_object();
    echo '<h1 class="page-title">'.$term->name.'のお知らせ</h1>'.PHP_EOL;
} elseif (!is_front_page()) {
    echo '<h1 class="page-title">'. get_the_title() .'</h1>'.PHP_EOL;
}
?>

パターン2：カテゴリーとタグを別々のタイトル形式に

<?php
if (is_category()) {
    $category = get_queried_object();
    echo '<h1 class="page-title">'.$category->name.'のお知らせ</h1>'.PHP_EOL;
} elseif (is_tag()) {
    $tag = get_queried_object();
    echo '<h1 class="page-title">タグ「'.$tag->name.'」のお知らせ</h1>'.PHP_EOL;
} elseif (!is_front_page()) {
    echo '<h1 class="page-title">'. get_the_title() .'</h1>'.PHP_EOL;
}
?>

パターン2の場合、以下のようなタイトルが表示されます：

カテゴリー：WEB/SNSのお知らせ
タグ：タグ「WordPress」のお知らせ

どちらのパターンを選ぶかは、サイトの用途や好みに応じて決めてください。

ブラウザで表示を確認し、タイトルが正しく表示されることを確認しましょう。

まとめ

今回の記事では、WordPressのタグ機能を活用した実装方法を学習しました。

学習したポイント

get_tags(): タグ一覧の取得（get_categories()とほぼ同じ使い方）
tag.php: タグ別投稿一覧のテンプレート（category.phpとほぼ同じ構造）
tag__in: WP_Queryでタグを指定する際のパラメーター
is_tag(): タグページかどうかを判定する条件分岐
get_queried_object(): 現在表示中のターム情報を取得（カテゴリーでもタグでも同じ）

カテゴリーとタグの共通点

前回の記事で学習したように、WordPressではカテゴリーもタグも「ターム」として扱われます。そのため、基本的な処理はほとんど同じコードで動作します。

機能	カテゴリー	タグ
一覧取得	`get_categories()`	`get_tags()`
テンプレート	`category.php`	`tag.php`
WP_Query	`category__in`	`tag__in`
条件分岐	`is_category()`	`is_tag()`
ターム情報取得	`get_queried_object()`	`get_queried_object()`