Cocoonカスタマイズ｜記事内のカテゴリにアイキャッチを表示する【WordPress】

WordPressテーマのCocoon。
使いやすくて大変お世話になっております。

さて、Cocoonを使っていて概ねそのまま使えるわけですが、細かい部分は自分でカスタマイズして使っています。

先日、自分の記事を見直していた時に、カテゴリへの誘導をもう少し強くしたいな、と思ったわけです。
ということで、もっと目を引くように、記事内のカテゴリにアイキャッチを表示してみました。

Cocoon｜記事内のカテゴリにアイキャッチを表示する
1. 手順

Cocoon｜記事内のカテゴリにアイキャッチを表示する

当サイトもそうですが、別で運用しているhttps://www.islog.jp/もCocoonを利用しています。

先日、記事を見直していたところ。
ふと気になったのです。

記事内のカテゴリの表示。
ラベル的な感じで問題は無いのですが、ちょっと物足りなく感じたのです。

カテゴリを色々と分けていると、読んでもらっている記事と同カテゴリの記事を読んでもらいたいものです。
回遊率を上げる面もありますが、どうにかもうちょっとアピールできないものかと。

そこで、カテゴリのアイキャッチを表示してみることにしたのです。

手順

まずは完成形。

こんな感じです。
カテゴリラベルにカテゴリのアイキャッチを表示し、カテゴリ表示エリアの上に見出しと誘導文を出力してみました。

Cocoonですでに設定可能な、カテゴリのアイキャッチ。
まずはそれぞれのカテゴリにアイキャッチを設定していきます。

//カテゴリリンクの取得
if ( !function_exists( ‘get_the_category_links’ ) ):
function get_the_category_links(){
$categories = null;
$categories .= ‘<p>カテゴリー<small>他にも記事があります！</small></p><div class=”inner”>’;
foreach((get_the_category()) as $category){
$image = get_the_category_eye_catch_url($category->cat_ID);

$style = null;
$categories .= ‘<a class=”cat-link cat-link-‘.$category->cat_ID.'” href=”‘.get_category_link( $category->cat_ID ).'”‘.$style.’><img src=”‘ . $image . ‘” alt=””>’ .$category->cat_name .'</a>’;
}
$categories .= ‘</div>’;
return $categories;
}
endif;

子テーマのfunctions.phpに上記のように記述。

get_the_category_eye_catch_url関数に引数でカテゴリIDを渡すことで、カテゴリのアイキャッチが取得可能です。
他の部分は適宜変更してください。

.entry-categories .inner {
display: flex!important;
}

.entry-categories p {
font-size: 90%;
color: #555;
margin: 0;
text-align: center;
border-bottom: solid 1px #0f751b;
margin: 0 0 10px;
}

.entry-categories p small {
margin: 0 0 0 .5em;
color: #888;
font-size: 70%;
}

.entry-categories .cat-link {
color: #fff;
text-decoration: none;
display: block;
margin-right: 5px;
padding: 0;
border: none!important;
font-size: 12px;
background-color: #000;
padding: 0 0 4px;
word-break: break-all;
text-align: center;
width: calc((100% – 8%) / 5);
margin: 0 2% 0 0;
}

.entry-categories .cat-link:nth-child(5n) {
margin: 0;
}

@media screen and (max-width: 680px) {
.showcase-box {
padding:12px
}

.showcase-image {
margin: 0 auto 10px;
float: none;
min-width: auto;
text-align: center;
max-width: 100%
}

.showcase-image img {
width: auto
}

.showcase-name {
font-size: 120%;
margin-top: 10px
}
}