WordPressテーマの作り方 » カテゴリやタグを表示する

記事の属性情報を表示する
投稿にカテゴリーとタグを表示する
3. カスタム投稿のカテゴリーとタグ（タクソノミー）を表示する
投稿とカスタム投稿で表示を切り替える
1. 投稿の種類で分岐する
2. カテゴリーやタグのリンクhtmlを文字列として得る
動作を確認する

1. 記事の属性情報を表示する

今回は記事のタイトル下に、その記事に付けられたカテゴリーとタグを表示します。

before

after

通常の投稿にはカテゴリーとタグを表示させます。他方で、カスタム投稿にはそのカスタム投稿で使用している専用のカテゴリーとタグ（タクソノミー）を表示させることにします。

補足：カスタム投稿に、それ専用のカテゴリー＆タグ（タクソノミー）を利用しているのが前提です。

2. 投稿にカテゴリーとタグを表示する

まず通常の投稿について、投稿に付けたカテゴリーとタグを表示させてみます。

content.php

 <article class="post">
    <header>
        <h1 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
        <p class="post-meta">
        投稿日：<?php echo get_the_date(); ?>　最終更新：<?php echo get_the_modified_date(); ?>
<!-- ここから -->
        <br />
        カテゴリ：<?php the_category(', '); ?>　タグ：<?php the_tags('',', '); ?>
<!-- ここまで -->
        </p>
    </header>
    <figure class="thumbnail">
        <?php 
        if(is_home()) {
            if(has_post_thumbnail()) {
                the_post_thumbnail();
            } else {
                echo '<img src="'.get_template_directory_uri().'/img/no_image.png" width="160" height="120"/>';
            }
        } ?>
    </figure>
    <div class="post-content">
        <?php 
            if(is_home()) {
                the_excerpt();
            } else {
                the_content();
            }
        ?>
    </div>
</article>

単純にカテゴリーとタグを表示するのは簡単です。

カテゴリーを出力する

the_category()は処理中の投稿記事に付けられたカテゴリー名を、そのカテゴリーページへのリンクhtml付きで出力するWordPress関数です。複数のカテゴリーが紐づけられている場合は、区切り文字を挟んで出力します。ここではカンマ＋半角スペースを区切り文字として指定しました。

the_category($seperator, $parents, $post_id)

引数	引数の意味	デフォルト
$separator	区切り文字	文字列無し”
$parents	親カテゴリーを表示するか	子カテゴリのみ表示
$post_id	投稿ID	処理中の投稿ID

タグを出力する

the_tags()は、処理中の投稿記事に付けられたタグのリンクhtmlを出力してくれるWordPress関数です。the_category()と同様に、複数のタグは区切り文字を挟んで出力します。このように動作はカテゴリーの関数と似ていますが、オプションの順番や内容が異なります。

the_tags($before, $separator, $after)

引数	引数の意味	デフォルト
$before	タグ名の前に出力する文字列	__(‘Tags: ‘)
$separator	区切り文字	カンマ＋半角スペース’, ‘
$after	タグ名の後に出力する文字列	文字列無し”

補足：関数__()は引数を他言語に置換する（翻訳する）WordPress関数です。日本語で表示している場合は、’Tags: ‘は’タグ: ‘に置換されます。英語-日本語の対応が知りたい場合は、wp_content/languages/themes/ja.moファイルで確認できます。

動作を確認する

サイトを実行してみると、次のように表示されます。

post_taxonomies

通常の投稿に付けられたカテゴリーとタグが表示されました。一方で、カスタム投稿に付けたタクソノミーは表示されません。これは別の関数で出力する必要があります。

3. カスタム投稿のカテゴリーとタグ（タクソノミー）を表示する

タクソノミーを表示するには、WordPress関数the_terms()を使います。

カテゴリ：<?php the_terms($post->ID, 'websites_category'); ?>　タグ：<?php the_terms($post->ID, 'websites_tag'); ?>

第１引数は投稿IDです。the_terms()の場合は投稿IDを自動挿入してくれないので、$post->IDというふうに明示的に指定します。

補足：ループ内では$post->IDで投稿のIDを入手できます。

第２引数はタクソノミー名です。タクソノミー名は、タクソノミーを定義するregister_taxonomy()関数の第１引数です（＠functions.php）。

補足：タクソノミーは大別して２種類あり、分類を階層化できるもの（投稿カテゴリーに対応）、分類を階層化しないもの（投稿タグに対応）があります。

4. 投稿とカスタム投稿で表示を切り替える

投稿記事にはカテゴリー＆タグを表示し、カスタム投稿にはタクソノミー（専用カテゴリーとタグ）を表示するように切り替えます。簡単に書くならば、

カテゴリ：<?php the_category(', ');the_terms($post->ID, 'websites_category'); ?>　タグ：<?php the_tags('',', ');the_terms($post->ID, 'websites_tag'); ?>

というふうに、２つの関数を並記するだけでも動作します。・・・が、あんまり格好良くないですよね？そこで、投稿とカスタム投稿でどちらの分類を表示するかどうかを切り替える処理を書いてみました。

content.php（抜粋）

<?php 
    $cat = '';
    $tag = '';
    $separator = ', ';
    $before = '';
    if( get_post_type() === 'post' ) {
        $cat = get_the_category_list( $separator );
        $tag = get_the_tag_list( $before, $separator );
    } elseif( get_post_type() === 'websites' ) {
        $cat = get_the_term_list( $post->ID, 'websites_category', $before, $separator );
        $tag = get_the_term_list( $post->ID, 'websites_tag', $before, $separator );
    }
?>
カテゴリ：<?php echo $cat; ?>　タグ：<?php echo $tag; ?>

投稿の種類で分岐する

次のif文で、処理中の記事が「投稿」である場合を抽出します。

if( get_post_type() === 'post' ) {...

get_post_type()は投稿の種類を出力する関数です。通常の投稿の場合は’post’が出力され、カスタム投稿の場合はそのカスタム投稿名が出力されます。

補足：固定ページは’page’です。

ちょっと似ている状況として、以前パンくずリストを作成したときに、次のような条件を使いました。

if( is_singular('post') ) {...

前者はループ処理中の「記事」が投稿である場合を判定するのに対して、後者は表示する「ページの種類」が単一投稿記事である場合を判定するという違いがあります。

補足：ここで言うページの種類とは、トップページ、カテゴリーページ、４０４ページなどの種類のことです。

カテゴリーやタグのリンクhtmlを文字列として得る

ここではカテゴリー系は変数$cat、タグ系は変数$tagに文字列として保存してから出力するようにしています。例えば投稿カテゴリーは、次のように書いて変数$catにカテゴリーへのリンクhtml文字列を代入します。

$cat = get_the_category_list( $separator );

このようにthe_category()関数で出力する文字列を得るためにget_the_category_list()を使います。似た関数にget_the_category()がありますが、こちらはカテゴリーオブジェクトを得る関数です。

補足：WordPressの関数名は、echo出力する関数にget_をつけると、その文字列が得られるように命名されている場合が多いです（the_title()とget_the_title()など）。ただしthe_category()、the_tags()、the_terms()にはこの命名ルールが当てはまらないのでご注意を。

変数に保存した文字列は、

カテゴリ：<?php echo $cat; ?>　タグ：<?php echo $tag; ?>

でecho出力します。

5. 動作を確認する

#4の編集後にサイト実行してみると、投稿＆カスタム投稿それぞれのカテゴリー＆タグが表示されました。

after

１番目の記事のカテゴリー＆タグ出力部分のソースを確認してみます。

サイトのソース（抜粋）

カテゴリ：<a href="サイトURL/category/diary/" title="日記 の投稿をすべて表示" rel="category tag">日記</a>　タグ：<a href="サイトURL/tag/weather/" rel="tag">天気</a>, <a href="サイトURL/tag/miscellaneous/" rel="tag">雑感</a></p>

必要に応じてスタイルを指定します。ここでは、文字の大きさのみ変更しました。

style.css（抜粋）

p.post-meta {
    color: #555;
    font-size: 0.9em;
    padding: 5px 0 5px 20px;
    margin: 0 0 3px 0;
    border-left: solid 10px #aaa;    
    border-bottom: solid 1px #ccc;
}

以上で、今回のカスタマイズは終了です。

次の記事：index.phpをカスタマイズするー第１８回ページ送りを設置する
前の記事：index.phpをカスタマイズするー第１６回記事の表示順、表示数を変更する

カテゴリやタグを表示する

目次