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

複数のタグを表示

アイキャッチ サムネイル インデックスカード等々の呼ばれ方をしているエントリーカードに表示されるカテゴリラベルを複数表示する様にカスタマイズします

その前に 一つの記事に対して複数のカテゴリーを登録する事が サイト運用に本当に適しているかを改めて確認するのも良いかもしれません

check
  • カスタマイズは自己責任でお願いします。
  • wp-cocoon.comサイトのサポート対象外となります。

変更後のイメージはトップ画像の様になります 具体的な表示結果は次のリンクよりご覧下さい

スポンサーリンク

カスタマイズ方法

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); 
 } 

コメント