About This Site

カテゴリ別記事一覧に関連タグを表示する方法

カテゴリ別記事一覧(カテゴリーアーカイブ)で、そのカテゴリに属する記事で使われているタグをリスト表示する方法の紹介です。

タグリスト表示方法

archive.phpの修正

archive.phpで、カテゴリーアーカイブの場合にタグリストを表示するようにコードを追記します。

タグリストを表示させたい箇所に下記のコードを貼り付けます。

archive.php

<?php
if ( is_category() ) {
// 表示中のカテゴリーに属する投稿のIDを配列で取得
$connected_posts = get_objects_in_term( $cat, 'category' );
// 表示中のカテゴリーに属する投稿に付けられたタグの情報をまとめて取得
$args = array( 'orderby' => 'count', 'order' => 'DESC');
$connected_tags = wp_get_object_terms( $connected_posts, 'post_tag', $args );
if ( $connected_tags ) {
echo '<div><ul class="taglist">';
foreach ( $connected_tags as $tag ){
echo '<a href="' . home_url() . '/tag/' .$tag->slug. '/"><li><span class="dashicons dashicons-tag"></span>' . $tag->name . '</li></a>';
}
echo '</ul></div>';
}
}
?>

$catはカテゴリーIDが入ったグローバル変数です。

get_objects_in_termとは

WordPress関数リファレンスでは「指定されたターム(複数でもよい)が付いているオブジェクトの ID を取得します。」との説明があります。

第1引数でタームのID、第2引数でタクソノミーのスラッグを指定します。

ちょっと専門用語が出てきてわかりづらいんですが、第2引数で「category」を指定してるので、第1引数はカテゴリーIDになります。第2引数を「post_tag」にすると第1引数はタグIDとして扱われます。

戻り値は、指定したIDに属する投稿のIDリスト(配列)です。

wp_get_object_termsとは

「指定されたオブジェクト(複数でもよい)に付いている、指定されたタクソノミー(カスタム分類)のタームを取得します。」が関数リファレンスの説明です。こちらも少しわかりづらいですね。

第2引数に「post_tag」を指定しているので、第1引数に指定した投稿リストの中で使われているタグIDリストが取得できます。

アイコンフォントについて

今回はWordPress公式のDashiconsを使うようにしました。Dashiconsが未導入の方は下記のコードをfunctions.phpに追加してcssを読み込んでください。

functions.php

add_action( 'wp_print_styles', 'load_dashicons');
function load_dashicons() {
wp_enqueue_style('dashicons');
}

FontAwesomeなど別のアイコンフォントでも大丈夫です。

1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法

cssの修正

cssファイルに下記のコードを追加します。

style.css

ul.taglist {
margin: 20px 0;
padding: 0;
}
ul.taglist .dashicons {
font-size: 14px;
bottom: 0;
line-height: 20px;
}
ul.taglist li {
display: inline-block;
padding: 5px;
margin-right: 10px;
border: 1px solid #e9e9e9;
font-size: 12px;
}
タイトルとURLをコピーしました