エントリーカードでカテゴリータグを複数表示する

カスタマイズ方法

Cocoon Child: functions.php

Cocoon Child の functions.php に下記を追加します。

 // リンクのないカテゴリーの取得 （複数） 
 // カテゴリー ID 付加
 function get_thx_categories(){ 
   $categories = null; 
   foreach((get_the_category()) as $category){ 
     $categories .= '<div class="entry-category thx-label cat-label-'.$category->cat_ID.'">'.$category->cat_name.'</div>'; 
   } 
   return $categories; 
 } 

 function thx_categories(){ 
   echo get_thx_categories(); 
 } 

Cocoon Child: entry-card.php (tmp/entry-card.php)

Cocoon Child に tmp フォルダを作成し、 親テーマの  tmp フォルダから entry-card.php を複製します。 アクセス権は親テーマに合わせます。

複製された Cocoon Child の entry-card.php (tmp/entry-card.php) 内の 29 行目、

 <?php the_nolink_category(); // カテゴリラベルの取得  ?> 

の部分を

 <div class="thx_category_space"> 
 <?php thx_categories(); // カテゴリラベルの取得  ?> 
 </div> 

に変更します。

Cocoon Child: スタイルシート  (style.css)

Cocoon Child の スタイルシート  (style.css) に下記を追加します。

 /*  サブカテゴリ表示  */ 
 .thx_category_space { 
	 position: absolute; 
	 top: 0.2em; 
	 left: 0.2em; 
 } 

 .thx-label { 
	 display: block; 
	 font-size: 0.5em; 
	 line-height: 1.25em; 
	 margin-top: 0.1em; 
	 padding-top: 0.1em; 
	 padding-bottom: 0.1em; 
	 padding-left: 0.5em; 
	 padding-right: 0.5em; 
	 color: #fff; 
	 background-color: rgba(51,51,51,.7); 
	 white-space: nowrap; 
	 overflow: hidden; 
	 text-overflow: ellipsis; 
 } 

表示位置やサイズなどはお好みに応じて変更してください。 また、 カテゴリ毎にスタイルを変更する際は、

 .thx-label.cat-label- カテゴリ ID { 
	 background-color: hsla(36, 100%, 50%, 0.7); 
 }