この記事にはプロモーションが含まれています。

【WordPress】タグ一覧ページとタグ個別ページを作成する方法

【WordPress】タグ一覧ページとタグ個別ページを作成する方法

ケケンタ

WordPressのオリジナルテーマを作成しているけどタグのアーカイブページや個別ページの作成方法が分からない……

今回はこのようなお悩みをお持ちの方に向けて、WordPressで

  • タグアーカイブページ
  • タグ個別ページ

を作成する方法を解説します。

この記事を読むと分かること
  • タグのアーカイブページを作成する方法
  • タグの個別ページを作成する方法
  • 作成した各ページをリンクで繋ぐ方法
  • 特定のタグ専用のアーカイブページを作成する方法



ケケンタ

ケケンタのITブログでは、WebアプリPHPLaravel)やWeb制作WordPressコーディング)について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください!


運動不足、気になっていませんか?

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです!

ボタンにカーソルを合わせるだけ
カウントダウンが始まるタイマーをご用意してみました!

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい!

タイマースタート

3:00

※運動不足だと連続3分で取り組んでもかなり息が切れます
(僕は加えて気分もちょっと悪くなりました……)
絶対にご無理の無い範囲でお取り組みください!


目次

作業全体の流れ

タグのアーカイブページと個別ページを作成する流れ
  • タグのアーカイブページ用のファイルを用意する
  • タグの個別ページ用のファイルを用意する
ケケンタ

それでは順番に解説していきます。

【手順①】タグのアーカイブページ用のファイルを用意する

掲載するディレクトリはローカル上でのものになりますが、実際にファイル配置する際にはご自身の環境(本番サーバー)で作業をお進めください。

ケケンタ

それでは早速ですが、実際にファイルを作成する手順をご説明します。

STEP
テーマディレクトリ直下に「tag.php」を作成する

テーマディレクトリ直下にタグアーカイブ用のPHPファイル(テンプレートファイル)を作成します。

このとき、ファイル名は

tag.php

として下さい。

ファイルを作成した様子

tag.phpを作成
tag.phpを作成

tag.phpを作成することで、タグアーカイブページへアクセスしようとしたとき、WordPressが自動で判断してtag.phpを呼び出してくれます。

もしも「特定のタグ専用」のアーカイブページを作成したい場合は、ファイル名を以下のようにして下さい。

tag-[タグのスラッグ].php

(例)タグのスラッグが「sample」の場合

tag-sample.php

こうすることで、そのタグのアーカイブページへアクセスしようとしときには、「tag-[カテゴリーのスラッグ].php」が呼び出されるようになります。

STEP
作成したファイルの中にソースコードを記述する

続いて作成したファイルの中に以下のソースコードを記述します。

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
    <!-- ループを回してタグの各記事を出力 -->
    <?php while ( have_posts() ) : the_post(); ?>
        <p>
            <!-- 個別ページへのリンク -->
            <a href="<?php the_permalink(); ?>">
                <!-- 記事タイトル -->
                <?php the_title(); ?>
            </a>
        </p>
    <?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>

上記は「『リンク付きのタイトル』を箇条書きで出力するソースコード」です。

【手順②】タグの個別ページ用のファイルを用意する

【手順①】でタグアーカイブページが作成できました。

続いては、アーカイブページで生成している個別リンクから繋がる個別ページを作成していきます。

STEP
テーマディレクトリ直下に「single.php」を作成する

個別ページ用のPHPファイル(テンプレートファイル)を作成します。

このとき、ファイル名は

single.php

として下さい。

ファイルを作成した様子

single.phpを作成
single.phpを作成

single.phpはWordPress上では「投稿」の個別ページ用ファイルとして認識されます。
つまり、【手順①】で生成されたリンクがクリックされて個別ページへアクセスしようとすると、このsingle.phpが呼び出されます。

※すでにsingle.phpが作成済みであれば、この【手順②】の作業は不要ということになります。
(必要に応じて以下のSTEP2のソースコードに記載の「アーカイブページへのリンク」部分を既存のsingle.phpに追記してください)

STEP
作成したファイルの中にソースコードを記述する

続いて作成したファイル(single.php)の中に以下のソースコードを記述します。

<?php get_header(); ?>

<!-- タイトル -->
<?php the_title(); ?>
	
<!-- カスタム投稿本文 -->
<?php the_content(); ?>
		
<!-- アーカイブページへのリンク -->
<?php
    $posttags = get_the_tags();
    if ( $posttags ) {
        echo '<ul>';
        foreach ( $posttags as $tag ) {
            echo '<li><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a></li>';
        }
        echo '</ul>';
    }
?>

<?php get_footer(); ?>

ハイライト行(10~21行目)がタグアーカイブページへのリンク関連の記述になっています。

タグはひとつの記事に対して複数付いていることの方が多いため、このソースコードではそれらすべてのタグのアーカイブページへのリンクを生成しています。

ケケンタ

以上で個別ページの作成も完了です!

今回紹介したソースコードではアーカイブページと個別ページ間を行き来できるよう両方にお互いのリンクを設置してみました。

まとめ

ケケンタ

以上がタグのアーカイブページと個別ページを作成する方法でした!

改めて大まかな手順を見てみましょう。

タグのアーカイブページと個別ページを作成する流れ
  • タグのアーカイブページ用のファイルを用意する
  • タグの個別ページ用のファイルを用意する

初めてタグのアーカイブページや個別ページを作成しようと思うと、「どうやればいいんだろう」と悩むかもしれません。

しかし、WordPressでは大枠の手順が決まっているため、一度経験してみると作成ルールが意外とシンプルなのがお分かりいただけたかと思います。

一度作成しただけでは慣れないかもしれませんが、2回、3回と繰り返す内に必ず慣れてきます。

この記事をご覧いただき、その一助となったなら幸いです。

ケケンタ

それでは、最後までご覧いただきありがとうございました!

当ブログではWordPressやWeb制作、PHPに関するお役立ち情報を発信しています。

ご興味のある方はぜひほかの記事もご覧いただけると嬉しいです。

タグ一覧ページとタグ個別ページを作成する方法のアイキャッチ画像

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次