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

こーゆーヤツ ↓

１．カテゴリー情報を取得

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

2. 子テーマを選択し、

3. template-parts → post → content.php

4. カテゴリーの情報を取得するために以下のphpを記述

$category = get_the_category(); // 情報取得
$cat_id = $category[0]->cat_ID; // ID取得
$cat_name = $category[0]->cat_name; // 名称取得
$cat_slug = $category[0]->cat_slug; // スラッグ取得
$link=get_category_link($cat_ID) // リンクURL取得
?>

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

テンプレートは、

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

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

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

<?php</span> <span class="token function">the_category</span><span class="token punctuation">(</span> <span
    class="token string">' / '</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token delimiter">?></span></span>

2. $parentes : 親カテゴリーの出力の仕方

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

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

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

<p id="<?php echo $catId; ?>">
<u><b><?php
echo get_the_category_list( ' / ','multiple' );
?>
</p></b></u>

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

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

※ Font Awesomeの初期設定方法

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

<span style="color: #808080;"><link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
    rel="stylesheet"></span>

2. headタグ内に貼り付け

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

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

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

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

<p id="<?php echo $catId; ?>">
<span style="color: #0000ff;"><strong><i class="fa fa-folder-open"></i></strong></span>
<u><b><?php
echo get_the_category_list( ' / ','multiple' );
?>
</p></b></u>

４．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

Facebook