![WordPressのthe_tags()にHTMLを入れる場合は変数で分割するべき](https://iwb.jp/wp-content/uploads/2024/05/wordpress-the-tags-with-variables-split-html.png)
WordPressのthe_tags()とは
the_tags()はWordPressのテンプレートタグの1つで、投稿に割り当てられたタグを表示するために使用されます。
この関数は投稿に関連付けられたタグのリストを出力し、各タグはリンクとして表示されるため、クリックするとそのタグが付けられた他の投稿を見ることができます。
<?php the_tags(); ?>
the_tags()はthe_category()などと異なり、デフォルトだと出力時に「タグ: foo, bar」のように「タグ:」が先頭についてしまいます。
そのため、通常は引数に直接HTMLタグを指定して、指定したHTMLタグで囲み、「タグ:」が表示されないようにしているケースが多いです。
<?php the_tags( '<ul><li>', '</li><li>', '</li></ul>' ); ?>
the_tags()にHTMLを直接入れないほうが良い
WordPressの公式ドキュメントだと前述のようにHTMLが直接指定されていますが、これだとタグが多いと読みづらく、編集もしづらくなります。
例えばもしも<li>にclass="tags"を追加する場合は2箇所に追加しなければならなくなります。
<?php the_tags( '<ul><li class="tags">', '</li><li class="tags">', '</li></ul>' ); ?>
この問題は$tagsBefore, $tagsAfter, $tagsSeparateの変数を作成して挿入する方式に変えれば解決できます。
あと公式ドキュメントだと<ul>がthe_tags内に含まれていますが、これは<?php>の外側に出したほうが良いです。
<ul>
<?php
$tagsBefore = '<li class="tags">';
$tagsAfter = '</li>';
$tagsSeparate = $tagsAfter . $tagsBefore;
the_tags($tagsBefore, $tagsSeparate, $tagsAfter);
?>
</ul>
もし、<li>内に<i class="tags-icon"></i>を追加することになっても、$tagsBeforeに追加するだけなので、簡単に編集できて、コードも見やすいです。
<ul>
<?php
$tagsBefore = '<li class="tags"><i class="tags-icon"></i>';
$tagsAfter = '</li>';
$tagsSeparate = $tagsAfter . $tagsBefore;
the_tags($tagsBefore, $tagsSeparate, $tagsAfter);
?>
</ul>
公式ドキュメント通りのやり方だと、以下のように2箇所に追加され、コードが見づらくなってしまいます。
<?php the_tags( '<ul><li class="tags"><i class="tags-icon"></i>', '</li><li class="tags"><i class="tags-icon"></i>', '</li></ul>' ); ?>
WordPressの参考書や他のブログ記事などではWordPressの公式ドキュメントを元に説明していることが多いですが、説明した通りあまり良いやり方ではありません。
特に理由がなければHTMLを直接書かず、変数を作成して挿入することをオススメします。