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

カテゴリーの色設定
カテゴリーの色設定

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

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

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

スポンサーリンク

まず最初に

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

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

カスタマイズ方法

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; 

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

6行目の 0.75 を変更する事でお好きな透明度に設定できます

まとめ

前回の手法は親テーマからファイルをコピーし 更にその中の何行目を変更 といった多少なりともハードルのある作業でしたが 今回はコピペでも出来る内容なので幾分かハードルは下がったのではないでしょうか

ただ 弊害としては意図しない箇所にまで効果が現れる事でしょうか

それを避けるには 前回の様に tmp フォルダに entry-card.phpcarousel-entry-card.phprelated-entry-card.php などを複製し get_the_nolink_category() を独自関数で置き換えるしか無いかもしれません

しかしながら その手法の場合は該当ファイルのアップデートがあった際にその恩恵が受けられないため こまめなメンテナンスが必要になるかもしれません

無論 私が勉強不足でもっと良い方法を知らないだけ って可能性のほうが大きいですが

コメント