WordPressでサイトを作成中、記事に設定したタグを出力したり、タグ別一覧ページを表示する際に困ったことはありませんか？
既存のテーマを使用している場合はタグを設定するだけで済みますが、自分でテーマを作成している場合は意外と面倒です。
今回は、タグの出力方法からタグ一別覧ページの作成の方法までを一通り初心者向けに解説します。
こんな人にオススメ！
- タグってそもそも何？という方
- 設定したタグの情報を取得して、出力する方法が知りたい方
- タグ別一覧ページの表示方法が知りたい方
WordPressのタグとは
WordPressの「タグ」とは、記事やページに付けることができる「分類を表すラベル」のようなものです。
SEO（検索エンジン最適化）にも役立ち、適切なタグを付けることで、読者にとって有用な情報を提供することができる便利な機能です。
カテゴリーとタグの違いは？
記事を分類するという意味では、「タグ」と「カテゴリー」は似ていますが、明確な違いがあります。
「カテゴリー」は関連した記事で分類するのに対し、「タグ」は記事内のキーワードで分類する役割を担っています。
例えば、料理ブログで「カテゴリー」を使用すると、記事を分ける際に「メインディッシュ」「デザート」「おつまみ」といった大まかな分類が可能です。
一方、「タグ」を使用すると、カテゴリーで分類された記事に対し、「肉料理」「魚料理」「簡単レシピ」など、さらに細かく分類することができます。
他にも「カテゴリー」と「タグ」には以下のような違いがあります。
| カテゴリー | タグ | |
| １ページに設定できる数 | １つ | 複数 |
| 投稿ページへの設定 | 必須 | 任意 |
| 固定ページへの設定 | 必須 | できない |
| 階層化（親子関係化） | できる | できない |
したがって、カテゴリーとタグの使い分け方としては、「カテゴリー」はブログ全体のテーマや目的に沿った分類する場合に使用し、「タグ」は記事やページの詳細な分類を行う場合に使用すると良いでしょう。
タグを使用するメリット
タグを使用するメリットは、以下の３つが挙げられます。
- サイトのSEO対策に役立つ
- カテゴリーとの関連付けができる
- 目的の記事が見つけやすくなる
タグを適切に使用することで、記事のキーワードを強調することができ、サイト内のコンテンツがより検索エンジンに適したものとなります。
また、カテゴリーとの関連付けができ、同一のタグのついた記事一覧ページが作成されるので、ページを横断的に閲覧可能になります。
タグの取得や表示の注意点
管理画面で投稿記事に設定したタグを出力する場合、「WordPressループ内」と「WordPressループ外」では出力方法が異なります。
例えば、タグを表示する「the_tags();」は、現在の投稿のタグを表示するテンプレートタグで、ループ内でのみ使用可能です。
一方、「get_tags」は全てのタグ取得するテンプレートタグなので、何も加工せずにループ内で使用すると投稿以外のタグも表示してしまうので注意が必要です。
以下が、タグの出力に関係するテンプレートタグの簡単な概要です。
| 効果 | 使用場所 | |
| the_tags(); | 現在の投稿のタグを表示 | ループ内 |
| get_tags(); | 指定した条件のタグ（オブジェクト）を取得 投稿以外のタグ全体を取得 | どこでも可 （主にループ外で使用） |
| get_the_tags(); | 投稿のタグ情報（オブジェクト）を取得 現在の投稿のタグ情報を取得 | 投稿 ID を指定しない場合はループ内のみ 投稿 ID を指定する場合はどこでも可 （主にループ内で使用） |
今回は、よく使用するテンプレートタグを中心に説明しました、それぞれ状況に応じて使い分けるようにしましょう。
タグの表示（ループ内）
投稿に付けたタグを、記事一覧や投稿記事などのWordPressループ内で、リンク付きで出力する場合の説明をします。
デフォルトの状態で出力
投稿に付けたタグを、WordPressループ内でリンク付きで出力する場合は、「the_tags();」を使って行います。
<?php the_tags(); ?>
the_tags(); の引数に何も指定しないまま出力すると、「タグ：」というラベルが自動で付与された状態でリンク付きで出力され、タグが複数ある場合は、「,」（カンマ）で区切られて出力されます。
例えば、タグが３つの場合は以下のように出力されます。
タグ:
<a href="タグ一覧ページのURL" rel="tag">タグ名</a>,
<a href="タグ一覧ページのURL" rel="tag">タグ名</a>,
<a href="タグ一覧ページのURL" rel="tag">タグ名</a>
出力形式を変更して出力
投稿に付けたタグをulやliで囲んだり、区切り文字をなどを変更するような出力形式を変更して出力する場合は、the_tags(); に次のような引数を指定します。
<?php the_tags( $before , $sep , $after ); ?>
| $before | タグ一覧の前に表示する文字列。初期値 = タグ:（英語ではTags:）。 |
| $sep | 各タグリンク間に表示する文字列・記号。初期値 = コンマ（,）。 |
| $after | タグ一覧の後ろに表示する文字列。初期値 = なし。 |
タグ一覧の前後をカギカッコ（「」）で囲んで、タグの間をスラッシュ「/」で区切る場合は、次のように記述します。
<?php the_tags( '「 ' ,' / ' , ' 」' ); ?>
例として、タグが３つの場合は以下のように出力されます。
「
<a href="タグ一覧ページのURL" rel="tag">タグ名</a> /
<a href="タグ一覧ページのURL" rel="tag">タグ名</a> /
<a href="タグ一覧ページのURL" rel="tag">タグ名</a>
」
これらの引数には、HTMLのタグを指定することも可能です。
例えば、クラスが指定されたulとliに囲まれたタグを出力する場合は、次のように記述します。
<?php the_tags( '<ul class="クラス名"><li class="クラス名">' , '</li><li class="クラス名">' , '</li></ul>' ); ?>
例として、タグが３つの場合は以下のように出力されます。
<ul class="クラス名">
<li class="クラス名"><a href="タグ一覧のURL" rel="tag">タグ名</a></li>
<li class="クラス名"><a href="タグ一覧のURL" rel="tag">タグ名</a></li>
<li class="クラス名"><a href="タグ一覧のURL" rel="tag">タグ名</a></li>
</ul>
アイコンを付けて出力
the_tags(); の引数に画像やアイコンを指定することも可能です。
例えば、spanで囲われたそれぞれのタグにアイコンを付ける場合は、次のように記述します。（例:tag.pngをつける場合）
<?php the_tags('<span><img src="' . get_template_directory_uri() . '/assets/img/tag.png" alt="">' , '</span><span><img src="' . get_template_directory_uri() . '/assets/img/tag.png" alt="">' , '</span>'); ?>
例として、タグが３つの場合は以下のように出力されます。
<span><img src="画像のパス" alt=""><a href="タグ一覧のURL" rel="tag">タグ名</a></span>
<span><img src="画像のパス" alt=""><a href="タグ一覧のURL" rel="tag">タグ名</a></span>
<span><img src="画像のパス" alt=""><a href="タグ一覧のURL" rel="tag">タグ名</a></span>
タグの数を指定して出力
タグの数が増えることによりレイアウトが崩れてしまう場合は、出力するタグの数を指定することも可能です。
その場合は、「get_the_tags();」を使ってタグの情報を取得し、その取得した情報を「foreach文」を使って数を指定して一つずつ出力します。
例として、３つまで出力する場合の記述方法を見てみましょう。（例：ulとliに囲われたタグを出力する場合）
<?php
$i = 0; //カウントを数える変数
$tags = get_the_tags();
?>
<ul>
<?php
if( $tags ){ //タグが一つでも設定されていたら出力
foreach( $tags as $tag ) {
if( $i >= 3 ){ // 3回出力したら
break; //ループを終了する
}
?>
<li><a href="<?php echo get_tag_link( $tag->term_id ); ?>"><?php echo $tag->name; ?></a></li>
<?php
$i++; //カウントを１加算する
}
}
?>
</ul>
出力する数を指定するために、foreach文の外でループ回数をカウントするための変数 $i = 0; を定義しています。
foreach文の中では、ループされるたびに数値が１ずつ加算される演算子$i++;と、if文には変数が３以上になったらという条件式( $i >= 3 )と、foreach文を抜けるための命令 break; を記述しています。
$i >= 3 の数値を変更してね！foreach文について詳しく知りたい人はコチラの記事も見てみてね！
タグ一覧リストの表示（ループ外）
サイドバーやフッターなど、WordPressループ外でタグ一覧リストを出力する場合の説明をします。
リンク付きで出力
WordPressループ外で、投稿に付けたタグのタグ一覧リストを出力する場合は、まずは「get_tags();」を使ってタグの情報を取得します。
そして、その取得したタグの情報を「foreach文」を使って一つずつ出力することでタグ一覧リストを表示します。
<ul>
<?php
$posttags = get_tags(); //タグの情報を取得
if ($posttags) {
foreach($posttags as $tag) {
echo ' <li><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a></li>';
}
}
?>
</ul>
「foreach文」のループの中では、「get_tag_link();」の引数に「$tag->term_id」を指定してタグ一覧のURLを出力し、「$tag->name」の部分ではタグ名を出力しています。
例として、タグが３つの場合は以下のように出力されます。
<ul>
<li><a href="タグ一覧のURL">タグ名</a></li>
<li><a href="タグ一覧のURL">タグ名</a></li>
<li><a href="タグ一覧のURL">タグ名</a></li>
</ul>
リンク付きで記事数も出力
タグ一覧リストに加えて記事数を表示する場合は、前項のforeach文のループ内に $tag->count を追加します。
<ul>
<?php
$posttags = get_tags(); //タグの情報を取得
if ($posttags) {
foreach($posttags as $tag) {
echo ' <li><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a> ('. $tag->count .')</li>';
}
}
?>
</ul>
例として、タグが３つの場合は以下のように出力されます。
<ul>
<li><a href="タグ一覧のURL">タグ名</a> (数字)</li>
<li><a href="タグ一覧のURL">タグ名</a> (数字)</li>
<li><a href="タグ一覧のURL">タグ名</a> (数字)</li>
</ul>
タグの数を指定して出力
タグ一覧リストのタグの表示数を指定したい場合は、「get_terms」を使用し、引数のパラメータに数を指定します。
例として、３つまで出力する場合の記述方法を見てみましょう。（例：ulとliに囲われたタグを出力する場合）
<ul>
<?php
$args = array(
'orderby' => 'count',
'order' => 'desc',
'number' => 3
);
$tags = get_terms( 'post_tag' , $args );
foreach( $tags as $value ) {
echo '<li><a href="'. get_tag_link( $value->term_id ) . '">' . $value->name . ' (' . $value->count . ')</a></li>';
}
?>
</ul>
今回は記事数の多いもの順に３つ出力しました。
記事数の少ないもの順に表示する場合は、'order' => 'desc', のdescを「asc」に、３以外の数値を指定する場合は 'number' => 3 の数値を変更して下さい。
タグ別一覧ページとは
タグをクリックすると表示される、そのタグに関連付けられた記事の一覧ページのことです。
例えば料理ブログで、「蒸焼き」というタグをクリックすると、「蒸焼き」というタグの付いた記事のみを、一覧で表示してくれる便利な機能です。
タグ別一覧ページの作成方法
タグ別一覧ページは、「tag.php」という名前のテンプレートファイルを用意することで作成することができます。
タグ別一覧ページの簡単な作成方法としては、既に作成済みの「category.php」を複製して「tag.php」に名前を変更する方法です。
もし「tag.php」を作成しない場合でも、「archive.php」や「index.php」がその役割を担います。
タイトルを動的に変更
タグ別一覧ページのタイトルの部分を動的に変更する場合は、「single_cat_title();」テンプレートタグを使用します。
<?php single_cat_title(); ?>
ただし、このテンプレートタグはループの外側でしか使用できないので注意しましょう。
最後に
今回はWordPressの「タグの出力」、「タグ一覧の出力」、「タグ別一覧ページの表示」について解説しました。
WordPressについて、他にも詳しく知りたい方は他の記事もチェックしてみて下さいね。
-
WordPress
WordPressの基本的な使い方について解説した記事一覧ページです。 イラストを交えてやさしく解説していますので、ぜひご覧ください。
続きを見る
