WordPressの投稿ページにタグを表示する方法

WordPressの投稿記事に設定したタグをthe_tags()
を使って表示する方法の備忘録です。
the_tags()
は、投稿に設定されているタグをリンク付きで表示するWordPress関数です。表示したタグをクリックすると、同じタグを設定した投稿の一覧ページが表示されます。
投稿ページでタグを表示する
the_tags()
は、投稿ページを表示するループ内で使用します。
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_tags(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
引数を設定しない場合、「タグ: 」というラベル表記の後に、リンクつきでタグ名が表示されます。
<?php the_tags(); ?>
タグ:
<a href="https://example.com/tag/tag01/" rel="tag">タグ01</a>
<a href="https://example.com/tag/tag02/" rel="tag">タグ02</a>
<a href="https://example.com/tag/tag03/" rel="tag">タグ03</a>

パラメーターの設定
デフォルトのタグ表示を変更したい場合は、パラメータを設定します。
<?php the_tags( $before , $sep , $after ); ?>
$before
タグリストの最初に使用する文字列を設定します。
デフォルトでは「タグ:(英語の場合はTags:)」が表示されます。
最初に表示されるテキストを消したい場合は、「’’」を設定します。
<?php the_tags(''); ?>

$sep
タグとタグの間に表示する文字を指定します。
デフォルトでは「,(コンマ)」が表示されます。
パラメータの2つ目に変更したい文字を設定します。
<?php the_tags('', ' / ', ''); ?>

$after
タグリストの最後に使用する文字列を設定します。
デフォルトでは何も表示されません。
リスト形式に変更する
パラメータを利用して、タグをリスト形式の表示に変更します。
<?php the_tags('<ul><li>', '</li><li>', '</li></ul>'); ?>
リスト形式に変更されたコードが出力されます。
<ul>
<li><a href="https://example.com/tag/tag01/" rel="tag">タグ01</a></li>
<li><a href="https://example.com/tag/tag02/" rel="tag">タグ02</a></li>
<li><a href="https://example.com/tag/tag03/" rel="tag">タグ03</a></li>
</ul>

クラス設定の注意点
パラメータにタグのクラスを設定する際は、異なる囲みを使用します。
例えば、パラメータの設定に「’(シングルクォーテーション)」使用したら、内側のクラスの設定は「”(ダブルクォーテーション)」を使用します。
<?php the_tags('<ul class="tags"><li>', '</li><li>', '</li></ul>'); ?>
タグのカスタマイズ
今回使用したthe_tags()
で取得されるタグは、自動でリンクが設定され、コードも前後と間のテキストの変更しかできません。
タグをリンクの無い状態で出力したり、表示するタグの個数を設定したい場合はget_the_tags()
関数を使用します。