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

2019-03-16 ：追記

よりカンタンにカスタマイズが行える様、プラグインを作成しました。

こちらのページを御覧ください。

https://thx.jp/cocoon-entry-card-multiple-category-tags-plug-in/

今更いまさらですが、カテゴリーって色を指定できるんですね。知りませんでしたｗ

前回の記事ではカテゴリーの ID を調べ css にて色指定をしていたのですが、カテゴリ色を使用できるのであれば都度々々つどつど css を設定せずに済むのでとてもラクです。

と言う事で、改訂版を作ってみました。さらに今回は、「エントリーカード」・「カルーセル」・「関連記事」・「新着記事」・「人気記事」などにも適用されます。

まず最初に
カスタマイズ方法
まとめ

まず最初に

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

こちらのサイトがとても勉強になりました。

WordPress におけるカテゴリーとタグの違いとおすすめの使い方と考え方｜CrossPiece

WordPress にはカテゴリーとタグという記事を整理する機能があります。それぞれに特徴があって使い方は人それぞれなので

カスタマイズ方法

check

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

functions.php

get_the_nolink_category()

ご利用されている子テーマ（cocoon-child-master）の functions.php に下記を追加します。子スキンの functions.php では（当方の環境だけかもしれませんが）機能しませんのでご注意ください。

 // リンクのないカテゴリーの取得
 if ( !function_exists( 'get_the_nolink_category' ) ): 
 function get_the_nolink_category($id = null, $is_display = true){ 
   $categories = null; 
   $categories = '<div class="thx_category_space">'; 
   foreach((get_the_category()) as $category){ 
     $categories .= '<div class="entry-category thx-label cat-label cat-label-'.$category->cat_ID.'">'.$category->cat_name.'</div>'; 
   } 
   $categories .= '</div>'; 
   return $categories; 
 } 
 endif;

前回からの変更点として、独自関数を用いずに元テンプレートで使用されている get_the_nolink_category() をオーバーライドします。

つまり、 get_the_nolink_category() を使用している全ての箇所が複数ラベル表示となります。

get_the_category_orderby_id()

また、表示されるカテゴリーを ID 順にソートしたい方はこちらも併せて記述します。こちらは子スキンの functions.php に記述されても機能します。

 // カテゴリーを ID 順にソート
 if ( !function_exists( 'get_the_category_orderby_id' ) ): 
 function get_the_category_orderby_id( $categories ) { 
     usort( $categories, '_usort_terms_by_ID'); 
     return $categories; 
 } 
 add_filter( 'get_the_categories', 'get_the_category_orderby_id' ); 
 endif;

こちらの記事を参考にさせて頂きました。

get_the_categoryをカテゴリーid順に取得するようにする – Simple Colors

css

ご利用されている子テーマ（cocoon-child-master）、もしくは子スキンの style.css に下記を追加します。

.thx_category_space

 .thx_category_space { 
   position: absolute; 
   top: 0.2em; 
   left: 0.2em; 
 }

ラベル群の表示位置を指定します。

人気記事のランキングと重なってしまうのが気になる方は right: 0.2em; としても良いかもしれません。（もちろん、他の箇所も全て右上表示になりますが；；）

.thx-label

 .thx-label { 
   display: block; 
   position: initial; 
   max-width: 100%; 
   margin-top: 0.1em; 
   padding-top: 0.1em; 
   padding-bottom: 0.1em; 
   padding-left: 0.5em; 
   padding-right: 0.5em; 
   font-size: 0.625em; 
   line-height: 1.25em; 
   color: #fff; 
   background-color: #888; 
   border-top-right-radius: 1em; 
 }

ラベル自体のスタイルを指定します。大きさや形状はご自由に変更してください。

ここで設定された文字色・背景色はデフォルト色となりますので、カテゴリ色を登録していないカテゴリーなどで使用されます。

ラベルの非表示

 .widget-entry-cards .thx_category_space { 
	 display: none; 
 } 

 .not-default .thx_category_space { 
	 display: block; 
 } 

 .popular-entry-cards .thx_category_space { 
	 display: none; 
 }

ラベルを表示したくない箇所の設定をします。

この例ですと、まずウィジェットエリアでは表示しません。

でも、サムネイルが大きい場合は表示します。

でもでも、人気記事にはサムネイルの大きさに関係なく表示しませんｗ

.eye-catch .cat-label 　 2019-02-20 ：追記

 .eye-catch .cat-label { 
   position: initial; 
   border: none; 
 }

アイキャッチ上では表示幅が制限されてしまうため、 position: の初期化を行います。

border: none; はお好みでどうぞ。

jQuery

ラベルの色を半透明にしたい方は、ご利用されている子テーマ（cocoon-child-master）、もしくは子スキンの javascript.js に下記を追加します。

 /*  ラベルの背景を透明度 75 ％に変更  */ 
 jQuery(function() { 
   jQuery('.thx-label').each(function() { 
     var bgc = jQuery(this).css('background-color'); 
     bgc = bgc.replace('rgb','rgba'); 
     bgc = bgc.replace(')',', 0.75)'); 
     jQuery(this).css('background-color', bgc); 
   }); 
 });