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()関数を使用します。

Share on Twitter
関連記事
画像を圧縮するプラグイン「EWWW Image Optimizer」の使い方
画像を圧縮するプラグイン「EWWW Image Optimizer」の使い方
WordPressの投稿一覧をAjaxで無限スクロール表示する方法
WordPressの投稿一覧をAjaxで無限スクロール表示する方法
WordPressのカスタムメニューでサブタイトル付きのメニューを作成する方法
WordPressのカスタムメニューでサブタイトル付きのメニューを作成する方法