WordPressテーマのtag.phpを編集してタグページのリストをカスタマイズする

今回は、WordPressテーマのtag.phpを編集してタグページのリストをカスタマイズする方法についてお伝えします。

WordPressには投稿と固定ページがありますが、WordPressは元々ブログスタイルが基本のブログCMSのため、投稿ページ（記事）については、カテゴリー分けの他カテゴリーをまたいだ形でのタグ付けができる機能がついています。

WordPressのタグページでは、基本的にタグ付けされた投稿の分類ごとに、時系列的に最新記事を最上部として、表示件数に応じて上から順番に過去記事へとリスト化されていきます。

タグページで表示する投稿の表示件数の設定

タグページで表示する投稿の表示件数の設定はWordPress管理画面の「設定」で行うこともできますが、WordPressテーマのtag.phpを編集することで、表示件数もカテゴリごとに調整したりすることもできます。

このWordPressサイトのタグページの表示の仕方はWordPressテーマに依存していますが、tag.phpなどをカスタマイズすることで表示形式やリストに表示する項目を変更することもできます。

カテゴリーページ、アーカイブのカスタマイズと共通する部分がありますが、投稿のタグを元に生成されるタグページのカスタマイズについて、今回は、WordPressサイトのタグページのカスタマイズ方法として、WordPressテーマのtag.phpを編集してタグページのリストをカスタマイズする方法についてお伝えしていきます。

WordPressテーマのtag.phpを編集する

WordPressテーマの中にtag.phpが存在している場合、このファイルがタグページの基本的なテンプレートとなります。

WordPressサイトのタグページをカスタマイズするためにこのtag.phpを編集する場合は、WordPress管理画面から直接ファイルを操作するか、WordPressインストールサーバーにFTPなどで接続し、tag.phpをダウンロードしてローカル環境でエディタを用いて修正し、修正ファイルを上書きアップロードします。

tag.phpがテーマファイルにない場合

タグページを含むアーカイブ系のページは、カテゴリーやタグなどに関する具体的なアーカイブリストのファイルがない場合は、archive.phpでその代用をします。

WordPressテーマによっては、archive.phpのみで全てのアーカイブ系のページを指定していたり、archive.phpの中に条件分岐を加えることで、タグページの場合に表示するリストの仕様を設定している場合があります。

tag.phpを新設する

tag.phpが存在しない場合、tag.phpを新設することで、タグに関するアーカイブページを設定することができます。archive.php内に条件分岐で設定することもできますが、archive.phpをベースとしてtag.phpを新設し、タグページに関する設定をしていくこともできます。

tag.phpとcontent.php

また、WordPressテーマ内にtag.phpがあったとしても、その中のリスト項目の表示の仕方や大枠については、部分的にcontent.phpを利用しているケースもあり、tag.phpのみの編集だけではWordPressの投稿に関するタグページを完全にカスタマイズすることができない場合もあります。

管理画面からtag.phpを確認して編集・カスタマイズする

WordPressにログインし、WordPress管理画面の左側に操作メニューの「外観」から「テーマの編集」を選択して、画面右側にtag.phpがあればそれをクリックしてください。

このtag.phpを編集してWordPressのタグページをカスタマイズします。

tag.php

WordPressテーマにもよりますが「タグ（tag.php）」や「投稿タグテンプレート（tag.php）」といったように表記されています。

クリックすると投稿ページを構成しているphpが表示されますので、この画面からWordPressサイトのタグページのカスタマイズを行ってください。

複数ファイルでタグページ・リストを生成している場合

WordPress純正であるTwenty Fourteenテーマの場合は、タグページの大枠はtag.phpで指定していますが、リストの表示に関してはcontent.phpを呼び出す形になっています。

get_template_part( 'content', get_post_format() );

この場合はcontent.phpを編集して、タグリストの表示をカスタマイズする必要があります。

この場合、

<?php is_tag( $tag ); ?>

is_tag();

などを利用して、カスタマイズコードをタグページのみに適用する旨を指定する必要があります。

カスタム分類・カスタムタグ

なお、WordPressの基本機能としての「タグ」の他、タグと同一の機能を持った別の分類として、カスタム分類（カスタムタグ）を設置することも可能です。

WordPress「タグページ」のカスタマイズ方法について

WordPress「タグページ」のカスタマイズ方法について

WordPressのカスタマイズサービスとして、「WordPressサイトのタグページのカスタマイズ」について、ホームページ制作 京都のWeb制作会社ファンフェアファンファーレで提供させていただくカスタマイズ方法や、設定例、WordPressテーマファイル内のタグページに関する編集方法について、概要を説明させていただきます。

WordPressで制作されたホームページ（WordPressサイト）のタグページにつきましては、アーカイブページを一括指定しているものや個別のタグページの設定ファイルが存在するものなど、WordPressテーマ（テンプレート）の仕様が異なるため、それぞれのテーマ仕様によってカスタマイズ方法が異なります。

お見積に関しては、現在のWordPressサイトのタグページに関するテーマファイルの構成・構造によって、価格が変動しますことを予めご了承くださいませ。

WordPressのタグテンプレートを編集してカスタマイズ

WordPressサイトのタグページに関するカスタマイズをご依頼いただいた際、カスタマイズ方法のひとつとして、WordPressテーマのテンプレートを編集してカスタマイズさせていただきます。

WordPressサイトのカテゴリー別・タグ別などのアーカイブ系ページの基本となる「アーカイブ」を構成しているarchive.phpをはじめ、タグページに関する具体的な設定を行うtag.php、そしてタグページに関するstyle.css、テーマファイルによってはcontent.phpなどを編集させていただき、phpによる記述変更やWordPress関数を設置して、ご希望どおりのタグページへと変更させていただきます。

タグページに関する複数のファイル

WordPressテーマによって、深い階層にタグページに関する複数の設定ファイル群が存在しているケースがありますので、このWordPressのテンプレートを編集して、サイトカスタマイズをさせていただく場合には、WordPressログイン情報の他にFTP情報などをご開示いただく必要が場合があります。

タグページのレイアウト変更

タグページを構成するtag.phpやarchive.phpなど、WordPressサイトのアーカイブ系ページに関するファイル群を確認し、ループ処理を行ってHTMLを吐き出している各要素のID、Classなどを調整し、同時にタグページにかかるCSSファイルを編集することによって、タグページのレイアウトを調整させていただきます。

リストのブロックの数や並び方を変更したり、カラム分割されたページをワンカラム（サイドバーなし）のレイアウトに変更、モバイルフレンドリー未対応のWordPressテーマをモバイルフレンドリー化させていただきます。

WordPressテーマの「カスタマイズ機能」の設定

WordPressテーマ内には、WordPressサイトタグページに関する「カスタマイズ機能」が設置されている場合があります。

タグページに関する項目設定でご希望に沿うカスタマイズが可能である場合は、こうした機能を利用し、設定させていただくことも可能です。

この設定項目はカスタマイズ範囲が限定されておりますので、カスタマイズ機能を用いた設定で不可能な部分のWordPressカスタマイズにつきましては、上記の「WordPressテーマのテンプレートを編集してカスタマイズ」などのカスタマイズ方法で対応させていただきます。

タグページのリスト表示件数の調整

WordPressの基本設定からタグページのリストに表示される投稿の表示件数の調整をはじめ、各タグ分類ごと、アーカイブ系ページごとに表示件数を変更するカスタマイズにも対応しております。

WordPressサイトのタグページのリスト表示をカスタマイズ

上記のWordPressカスタマイズ方法のほか、WordPressのテーマファイルをカスタマイズしたり、WordPressカスタムフィールド機能を利用して、タグページに様々な機能を追加したり、タグページの機能を拡張するカスタマイズも可能です。

タグページの表示項目を追加・変更するカスタマイズ

タグページに関するWordPressテーマファイル編集や、WordPressの投稿に関するWordPressカスタムフィールドの設置・カスタマイズを行うことで、タグページに表示される項目をご希望どおりにカスタマイズさせていただくことも可能です。

アイキャッチ画像設定を追加して、タグページのリストにアイキャッチ画像を表示したり、カスタムフィールドなどの利用で、ページ属性を新規追加し、純正である属するカテゴリーやタグなどの表示以外に任意の項目をリストの中に組み込むことができます。また、「ページ公開日」や「最終更新日」を表示するなど、各種タグページの表示項目を追加・変更することできます。

タグページに説明文を表示

WordPressのタグページは、基本的に該当するタグ分類に応じた投稿がリスト表示されますが、こうした一覧リストの見出し直下の文頭などに、「タグページの説明文」を表示することができます。

WordPress管理画面で投稿をタグ付けするための「タグ」を生成・編集する際に設定する「説明」の項目が、実際のページ表示時に反映されないWordPressテーマであっても、タグページのテーマファイルをカスタマイズすることで、こうした説明文を表示させることが可能です。

自由な形式のタグ一覧ページを表示

WordPressテーマの仕様に応じて、アーカイブ表示される項目は限られています。特定のタグ分類に属する項目のみ表示形式や表示件数を変更したり、固定ページとの組み合わせで特殊なアーカイブを作成することも可能です。

詳しくは一度お問い合わせください。

SEOリスクを管理する・タグページのインデックス戦略とcanonical制御

タグ機能を利用する際、最初に直面する最大の課題は「重複コンテンツ（Duplicate Content）」と「カニバリゼーション（共食い）」の問題です。

例えば「WordPress」というタグページと、「Web制作」というカテゴリーページの記事一覧が、ほとんど同じ内容になってしまうことがあります。Googleのクローラーは、これらを「内容が重複した質の低いページ」と判断し、サイト全体の評価を下げてしまうリスクがあります。

これを防ぐためには、header.php やSEOプラグインの設定に頼るだけでなく、tag.php 側でメタタグを動的に制御する技術が必要です。

条件に応じたmeta robotsタグの出し分け

すべてのタグページをインデックスさせる必要はありません。記事数が少ない（例えば1記事しかない）タグページは、ユーザーにとっても検索エンジンにとっても価値が低いため、検索結果に出さない（noindex）設定にするのが定石です。

これを自動化するために、header.php のセクション内で、タグページの記事数を判定し、動的にmetaタグを出力するロジックを実装します。

if ( is_tag() ) {
// 現在のタグIDを取得
$tag_id = get_queried_object_id();
// そのタグに紐付いている投稿数を取得
$tag_count = get_term( $tag_id, 'post_tag' )->count;
// 記事数が3件未満ならnoindexを出力
if ( $tag_count < 3 ) {
echo '<meta name="robots" content="noindex, follow" />' . "\n";
}
}

このようにプログラム側で閾値を設けることで、コンテンツが充実してきたタグページだけを自動的に検索エンジンにアピールし、質の低いページを隠すという運用が自動化できます。これはクロールバジェット（Googleの巡回リソース）の節約にもつながり、サイト全体のSEO効率を高めます。

tag.phpを超えて・特定のタグをランディングページ化するテンプレート階層

WordPressのテンプレート階層には強力な仕様があります。すべてのタグページを tag.php で表示するだけでなく、tag-{slug}.php や tag-{id}.php というファイル名を用意することで、特定のタグに対して専用のデザインを適用できるという点です。

これを事業活用しない手はありません。例えば「キャンペーン」というタグがついた記事一覧ページだけは、通常の一覧リストではなく、華やかなヘッダー画像やコンバージョンボタン（CVボタン）を備えた「ランディングページ（LP）」のようなレイアウトにすることが可能です。

tag-campaign.php の活用例

特定商材やイベントに関連するタグページ（例：スラッグが summer-sale）に対して、tag-summer-sale.php を作成します。このファイルの中では、通常のループ処理の前に、リッチなコンテンツエリア（div.hero-area など）を記述し、購買意欲をそそるコピーライティングや画像を配置します。

// tag-summer-sale.php の冒頭
get_header(); ?>
<div class="campaign-hero">
<h1>夏の特別セール関連情報</h1>
<p>今だけの特別価格情報や、おすすめ商品をまとめてご紹介します。</p>
<a href="/contact" class="btn-cta">お問い合わせはこちら</a>
</div>

<?php
// 以下、通常の記事一覧ループ
if ( have_posts() ) :
// ...

このように、タグページを単なる「検索結果の受け皿」としてではなく、「特定のテーマに関心があるユーザーを待ち受ける特集ページ」として定義し直すことで、タグは強力なマーケティングツールへと進化します。

タグクラウドの再発明・UI/UXを考慮したデザインカスタマイズ

WordPress標準の「タグクラウド」ウィジェットは、使用頻度の高いタグを大きく、低いタグを小さく表示する機能ですが、デフォルトのままではデザイン性が低く、フォントサイズの差が大きすぎてレイアウト崩れの原因にもなります。

プロの制作現場では、wp_tag_cloud 関数のパラメータを詳細に設定し、サイトのデザインレギュレーションに合わせた出力を行います。あるいは、関数を使わずに自前でクエリを書いてリスト化することも珍しくありません。

wp_tag_cloud のパラメータチューニング

タグクラウドを見やすく整形するためには、functions.php のフィルターフック、またはテンプレート内での引数指定で、最小・最大フォントサイズや単位、並び順を制御します。

$args = array(
'smallest' => 14, // 最小フォントサイズ（px）
'largest' => 14, // 最大フォントサイズ（px）を同じにしてフラットにする
'unit' => 'px',
'format' => 'list', // ul/li リスト形式で出力
'orderby' => 'count', // 記事数順に並べる
'order' => 'DESC', // 降順（多い順）
'number' => 30, // 表示する上限数
'show_count'=> true, // 記事数を表示する
);
wp_tag_cloud( $args );

特に format を list に設定することは重要です。デフォルトの平文（リンクが羅列されるだけ）の状態よりも、ul > li 形式の方がCSSでのスタイリングが容易になり、フレックスボックスやグリッドレイアウトを用いて美しく整列させることができます。

また、smallest と largest を同じ値に設定し、見た目の大きさではなく、背景色やアイコンバッジなどで件数を表現する方が、現代的なフラットデザインやマテリアルデザインとの親和性が高くなります。

タグベースの関連記事レコメンドエンジンの実装

タグの真価が発揮されるのは、記事詳細ページ（single.php）における「関連記事」の表示ロジックです。カテゴリーは分類が大きすぎることが多く（例：「お知らせ」カテゴリーなど）、関連記事として表示してもユーザーの興味と合致しないことが多々あります。

一方、タグは「具体的なトピック」を表していることが多いため（例：「SEO」「WordPress」「セキュリティ」など）、同じタグを持つ記事をレコメンドすることで、ユーザーの回遊率（ページ/セッション）を確実に向上させることができます。

tax_queryを用いた精密なクエリ構築

プラグインを使わずに、精度の高い関連記事を表示するためには、WP_Query の tax_query を活用します。現在表示している記事のタグIDを取得し、それと同じタグを持つ記事を、自分自身を除外して取得するロジックを組みます。
// 現在の記事のタグIDを取得
$tags = wp_get_post_tags( $post->ID );
$tag_ids = array();
foreach ( $tags as $tag ) {
$tag_ids[] = $tag->term_id;
}
if ( ! empty( $tag_ids ) ) {
$args = array(
'tag__in' => $tag_ids, // 同じタグを持つ記事
'post__not_in' => array( $post->ID ), // 自分自身は除外
'posts_per_page' => 3, // 3件表示
'orderby' => 'rand', // ランダムに表示（またはdate）
);
$related_query = new WP_Query( $args );
if ( $related_query->have_posts() ) {
// ここでループ処理を行い、カード型などで記事を表示
}
wp_reset_postdata();
}

さらに高度なカスタマイズとして、タグの一致数が多い順（関連度が高い順）にソートするロジックをSQLレベルで組むこともありますが、通常の事業サイトであれば上記のコードで十分に機能的なレコメンドシステムとなります。

管理画面のタグ入力インターフェースの改善

運用面、特にクライアントが記事を投稿する際のユーザビリティも重要です。WordPress標準のタグ入力欄は、手動入力（オートコンプリート付き）ですが、これだと「表記揺れ」が発生しやすくなります。「Webサイト」「ウェブサイト」「HP」といった同じ意味の異なるタグが乱立すると、タグページとしての価値が分散してしまいます。

これを防ぐために、タグの選択インターフェースをカテゴリーのような「チェックボックス式」に変更するカスタマイズを行うことがあります。

表記揺れを防ぐ運用フローの構築

技術的には register_taxonomy_for_object_type やメタボックスのカスタマイズで実現可能ですが、もっと手軽な方法として「タグ管理プラグイン」の導入や、運用ルールとして「タグリスト」をクライアントに渡し、そこから選んでもらうフローを徹底することが現実的です。

また、定期的に管理画面の「タグ」メニューから、件数が0件または1件のタグを見直し、似たようなタグを統合（マージ）するメンテナンス作業も、プロの保守業務として提案すべき項目です。

構造化データ（Schema.org）による意味付け

tag.php をSEOに強くするためには、Googleに対して「これは記事の一覧（コレクション）ページである」と伝える構造化データの実装が有効です。

ItemPage ではなく CollectionPage タイプを使用し、リスト内の各アイテムがサイト内の記事へのリンクであることを記述します。JSON-LD形式で header.php に出力することで、検索結果においてリッチな表示（カルーセルなど）が期待できる場合があります。

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"headline": "<?php single_tag_title(); ?>に関する記事一覧",
"url": "<?php echo get_tag_link( get_queried_object_id() ); ?>",
"mainEntity": {
"@type": "ItemList",
"itemListElement": [
// PHPループで各記事の情報を出力
]
}
}
</script>

このような「目に見えないコード」へのこだわりが、ドメインパワーを底上げし、競合他社に対する優位性を築きます。

パンくずリストにおけるタグの位置づけ

サイト構造をユーザーと検索エンジンに示す「パンくずリスト」において、タグページはどのような階層として表現されるべきでしょうか。

一般的には TOP > タグ一覧 > タグ名 という構造になりますが、記事詳細ページにおいては、カテゴリーが優先され、タグはパンくずリストに含まれないことがほとんどです。しかし、タグページから流入したユーザーにとっては、TOP > タグ名 > 記事タイトル というパンくずの方が自然な場合もあります。

動的なパンくず生成ロジック

リファラー（参照元）を判定し、ユーザーがタグページを経由して記事に到達した場合は、パンくずリストをタグベースの階層に動的に書き換えるというUX改善テクニックもあります。これにより、ユーザーは「戻る」ボタンを押さなくても、パンくずリストからスムーズに元のタグ一覧に戻ることができ、回遊ストレスが軽減されます。

タグはサイトの文脈を編む糸である

tag.php のカスタマイズは、単なる見た目の変更ではありません。それは、カテゴリーという「縦の糸」に対し、タグという「横の糸」をどう張り巡らせ、サイト全体を強固な織物（Web）にするかという構造設計そのものです。

インデックス制御による質の担保 テンプレート階層を利用したLP化戦略 関連性を重視したレコメンドロジック 表記揺れのない運用設計

これらを実装することで、タグは単なるキーワードの羅列から、ユーザーの「知りたい」という意欲を的確に捉え、サイト内を深く探索させるための羅針盤へと変わります。ぜひ、戦略的なタグページの構築に挑戦してみてください。

WordPress「タグページ」カスタマイズ・修正 ご依頼例

WordPressサイトの「タグページ」カスタマイズ・修正をご依頼いただく際は、次のようなご依頼例をご参考ください。

• タグページに、「投稿の公開日」と「最終更新日」を自動で表示したい。
• タグページに投稿のアイキャッチ画像を表示できるように仕様変更して欲しい。
• タグページのリスト要素の見出しや表のデザインを変更したい。
• WordPressサイトのタグページのレイアウトを変更したい。現在1列表示だが半分サイズの2列での表示形式に変更したい。
• 現在は、タイトルと抜粋文、投稿へのリンクのみだが、アイキャッチ画像を加え、投稿日時も表示したい。
• カテゴリー名やタグ名、投稿タイトル、日付などの他、タグページのリストに特殊な表示項目を追加して表示したい。
• トップページの新着記事の表示件数はそのままで、タグページのみ表示件数を変更したい。

WordPressサイトの「カテゴリーページ」・「タグページ」カスタマイズ

ホームページ制作 京都 ファンフェアファンファーレでは、WordPressテーマファイルの編集によるWordPressサイトのタグページのカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。

• 「WordPressサイトのタグページのレイアウトを変更したい」
• 「タグページやタグページに表示される、それぞれの投稿の表示形式を変更したい」
• 「カテゴリー名やタグ名、投稿タイトル、日付などの他、タグページのリストに特殊な表示項目を追加して表示したい」

といったご要望をお持ちの方へ、タグページを構成するWordPressテーマのファイル群を編集することで、ご希望の仕様へとカスタマイズさせていただいております。

WordPressサイトの「カテゴリーページ」・「タグページ」カスタマイズ

WordPressの設定・カスタマイズ・修正・編集方法の参考例

（初回投稿日 2015年11月30日）

WordPressカスタマイズ・修正

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress（ワードプレス）のテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。

WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧に対応しております。

WordPress（ワードプレス）のカスタマイズ

復旧・復元・エラー修正

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPress（ワードプレス）で制作されたウェブサイト・ホームページの復旧（復元）、エラー修正サービスを提供しております。弊社制作のWordPress（ワードプレス）サイトの復旧、エラー修正も承っておりますが、自社制作・運営、他社制作・管理のWordPressサイトのエラー復旧（復元）・修正にも対応可能です。

WordPress（ワードプレス）の復旧・復元・エラー修正

WordPressの保守・セキュリティ・バックアップと復元

WordPressの保守やセキュリティについては、基本的にはバックアップによる保守管理で十分だと考えています。トラブル時のWordPressの復旧のためのWordPressの保守やセキュリティ、バックアップと復元について。

WordPressの保守管理 バックアップと復元で対応する

WordPressでのホームページ制作（WordPressサイト制作）

ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作（WordPressサイト制作）を推進させていただいております。

企業のWebマーケティングを加速するWordPressでのホームページ制作（WordPressサイト制作）ならお任せください！新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。

WordPress（ワードプレス）でのホームページ制作・ウェブサイト制作