wordpress タグ一覧にカテゴリ情報表示

通常のブログを運営している際や、welcartでＥＣサイトを構築している場合など

投稿の分類の仕方として「カテゴリ」「タグ」それぞれ利用しているケールも多いかと思います。

私はwelcartで各商品の属性を下記の形で運用しています。

メーカー名：タグ　商品種別：カテゴリ

この場合、メーカー一覧（タグ一覧）の画面を見たときに、これがどの商品種別かがわからなくなってしまいます。

そんな時にタグ一覧にもカテゴリ名を表示させる。本日はそんな話です。

完成イメージ

下記のように、抜粋項目の下にカテゴリ名を表示します。

投稿を下記のように分類しています。

タグ：日本産

カテゴリ：野菜、フルーツ、会員用

日本産というタグで一覧を見ていると、その投稿がどのカテゴリに属しているかわからないので

各投稿毎に「カテゴリ名」を表示します。

カスタマイズ箇所

タグの一覧なので、「archive.php」をカスタマイズします。

サンプルはwelacartのテーマを利用しています。

ページ修正箇所

<?php if (have_posts()) : ?>
<div class="post-li">
	<?php while (have_posts()) : the_post(); ?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<p><time datetime="<?php the_time('c'); ?>"><?php the_time(__('Y/m/d')) ?></time></p>
<div class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'welcart_basic' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a></div>
<?php the_excerpt() ?>
		</article>
	<?php endwhile; ?>
</div>
<?php endif; ?>

カスタマイズは抜粋を示す「the_excerpt」の下に追加します。

<?php if (have_posts()) : ?>

<div class="post-li">
	<?php while (have_posts()) : the_post(); ?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<p><time datetime="<?php the_time('c'); ?>"><?php the_time(__('Y/m/d')) ?></time></p>
<div class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'welcart_basic' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a></div>
<?php the_excerpt() ?>
                        <?php
                        $categories = get_the_category();
                        if ( $categories ) {
                            echo '<ul class="cf opt-tag">';
                            foreach ( $categories as $category ) {
                                if($category->term_id === 2){
                                    continue;
                                }else{
                                    echo '<li class="recommend">'.$category->name.'</li>';
                                }

                            }
                            echo '</ul>';
                        }
                        ?>
		</article>
	<?php endwhile; ?>
</div>

<?php endif; ?>

まず「get_the_category()」という関数を用いて、投稿が属するカテゴリの一覧を取得します。

その後にリストでカテゴリを出力していきます。

もし表示させたくないカテゴリがあった場合に備えて、if文で除外の処理をしています。

if($category->term_id === 2){
    continue;
}else{
    echo '<li class="recommend">'.$category->name.'</li>';
}

レイアウト修正

最後にレイアウトを調整します。

.opt-tag li.category {
	    color: #4eb6a5;
	    margin-right:2px;
}

.opt-tag li {
    background-color: #fff;
    display: inline-block;
    font-size: 10px;
    margin: 2px 0;
    padding: 0 5px;
    line-height: 18px;
    border-width: 1px;
    border-style: solid;
}

これで完成です