投稿記事にカテゴリーを出力する

記事の一覧ページに、下記のようなカテゴリー名（親カテゴリー/子カテゴリー）を、リンク付き＆アイコン付きで表示したい場合の覚え書き ▼

content.php を編集

一覧ページは、「content.php」を編集する。

　1. 外観 → テーマエディター

　2. 子テーマを選択し、

　3. template-parts → post → content.php

投稿のカテゴリーをリンク付きで出力するには、下記のように記述する。

<?php the_category(); ?>

カテゴリーの表示形式をカスタマイズ

テンプレートは、

<?php the_category( $separator, $parents, $post_id ); ?>

$separator : カテゴリー出力形式

空文字 ' ' を指定するとリスト形式。スラッシュを入れる、カンマで区切るetc.変更可能。

eg. スラッシュで区切る場合

<?php
the_category(' / ');
?>

$parentes : 親カテゴリー/子カテゴリーの出力の仕方

デフォルトでは、番号なし箇条書き（<ul>）でリンクを並べる。

空の文字列を指定するとデフォルト表示（子カテゴリーのみ）になる。

• ' ' : 出力しない
• 'single' : 親カテゴリーと子カテゴリーを出力。リンクは全体を囲い、子カテゴリーへのリンクになる。
• 'multiple' : 親カテゴリーと子カテゴリーを出力。リンクは親と子で別々に設定される。

私は、下記のようにスラッシュで区切り、親カテゴリーを出力するように変更した。

<?php
echo get_the_category_list( ' / ','multiple' );
?>

$post_id : カテゴリーを取得する投稿のID

デフォルトは "false" で、現在の投稿に付けられたカテゴリーのリストになる。

私はデフォルトのまま。

カテゴリーラベルをアイコンで表示

私は、Font Awesome を使ってアイコンを取得している。

Font Awesome の初期設定

1. 以下のコードをコピー

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

2. headタグ内に貼り付け

ダッシュボード → 外観 → テーマエディタ → header.php へ行き、

の直前にコピーしたコードを貼り付ける。

Font Awesome で Open Folder のアイコンをコピー

get_the_categoryの前にアイコンのコードを貼り付ける

<h6 class="category">
<i class="fa fa-folder-open"></i>
<?php
echo get_the_category_list( ' / ','multiple' );
?>
</h6>

content-excerpt.phpにも記載

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php if ( 'post' === get_post_type() ) : ?>
<div class="entry-meta">

の後ろに、

<h6 class="category">
<i class="fa fa-folder-open"></i>
<?php
echo get_the_category_list( ' / ','multiple' );
?></h6>

を記載する。

References