こんにちわ、あめあられ です！
本記事では、WordPressの無料テーマである『Cocoon』のカテゴリラベル表示のカスタム方法について記載させて頂きます。
本記事は親と子の２階層でのカテゴリラベル表示についてです
本記事の対象者
本記事は、 WordPressの無料テーマである『Cocoon』 を使用しており、かつ親子関係のカテゴリを持つ場合にカテゴリラベルの表示を記事毎に指定したい方を対象にしております。
また、親子関係のカテゴリは2階層（親と子）とさせて頂きます。
3階層以上の場合は意図しない表示になる可能性がございますのでご了承下さい。
問題点 ⇒ どのカテゴリが表示されるか分からない
『Cocoon』では記事毎にアイキャッチ画像（※1）の左上にカテゴリラベルが表示されますが、1つの記事にカテゴリを複数指定した場合、指定したカテゴリの ”いずれか” がカテゴリラベルに表示されます。
よって、親子関係のカテゴリで親カテゴリと子カテゴリの両方を指定した場合、親か子のどちらが表示されるか分からない状態になります。
そこで、本記事では次の３つの方法について記載させて頂きます。
- 「親カテゴリに統一する方法」
- 「子カテゴリに統一する方法」
- 「カテゴリ毎に指定する方法」
（※1）： アイキャッチ画像とは記事毎に表示される画像の事です。
注意事項
※本記事ではfunctions.phpを編集しますが、編集する際は必ずバックアップを取ってください。
また、修正に関しては自己責任でお願いいたします。
ブログ表示等の不具合が生じても、当方は一切責任を負えません。
functions.phpを編集する方法
本記事では、『Cocoon』の小テーマのfunctions.phpだけを編集します。
functions.phpを修正するには、左メニュの「外観」⇒「テーマエディタ―」を選択し、表示された画面右の「テーマのための関数（functions.php）」を選択してください。
functions.phpに追加する場合、「//以下に小テーマ用の関数を書く」の下に追加してください！
【方法１】カテゴリラベル表示を「親カテゴリに統一する」
子テーマのfunctions.phpに以下をコピーし、そのまま貼り付けて下さい。
（本記事の別の方法を既に追加されている場合、上書きして下さい）
//◆カテゴリラベル（アイキャッチのカテゴリ表示）を親カテゴリで統一する
function get_the_nolink_category($id = null, $is_visible = true){
if ($id) {
$categoryArray = get_the_category($id);
} else {
$categoryArray = get_the_category();
}
$display_class = null;
if (!$is_visible) {
return;
}
if (isset($categoryArray[0])) {
$ret = $categoryArray[0];
foreach($categoryArray as $category)
{
if($category->category_parent == 0)
{
$ret = $category;
break;
}
}
return '<span class="cat-label cat-label-'.$ret->cat_ID.'">'.$ret->cat_name.'</span>';
}
}
結果
当ブログの場合、以下のように表示されます。
【方法２】カテゴリラベル表示を「子カテゴリに統一する」
子テーマのfunctions.phpに以下をコピーし、そのまま貼り付けて下さい。
（本記事の別の方法を既に追加されている場合、上書きして下さい）
//◆カテゴリラベル（アイキャッチのカテゴリ表示）を子カテゴリで統一する
function get_the_nolink_category($id = null, $is_visible = true){
if ($id) {
$categoryArray = get_the_category($id);
} else {
$categoryArray = get_the_category();
}
$display_class = null;
if (!$is_visible) {
return;
}
if (isset($categoryArray[0])) {
$ret = $categoryArray[0];
foreach($categoryArray as $category)
{
if($category->category_parent != 0)
{
$ret = $category;
break;
}
}
return '<span class="cat-label cat-label-'.$ret->cat_ID.'">'.$ret->cat_name.'</span>';
}
}
結果
当ブログの場合、以下のように表示されます。
【方法３】カテゴリラベル表示を「カテゴリ毎に指定する」
子テーマのfunctions.phpに以下をコピーし、そのまま貼り付けて下さい。
（本記事の別の方法を既に追加されている場合、上書きして下さい）
そして、カテゴリ設定に合わせて内容を修正して下さい。
//◆カテゴリラベル（アイキャッチのカテゴリ表示）をカテゴリ毎に設定する
function get_the_nolink_category($id = null, $is_visible = true){
if ($id) {
$categoryArray = get_the_category($id);
} else {
$categoryArray = get_the_category();
}
$display_class = null;
if (!$is_visible) {
return;
}
if (isset($categoryArray[0])) {
$ret = $categoryArray[0];
foreach($categoryArray as $category)
{
if($category->category_parent == 0) {
//①子カテゴリを表示したい親カテゴリをここに追記します。
// 追記した親カテゴリは表示されなくなります。
if($category->cat_name != "ゲーム") {
$ret = $category;
break;
}
}else{
//②表示したい子カテゴリをここに追記します。
// 追記した子カテゴリが表示されるようになります。
if($category->cat_name == "PUBGモバイル") {
$ret = $category;
break;
}
}
}
return '<span class="cat-label cat-label-'.$ret->cat_ID.'">'.$ret->cat_name.'</span>';
}
}
結果
当ブログの場合、以下のように表示されます。
また、 方法３の方法で、（当ブログの親カテゴリである）ゲームとランニングの両方を子カテゴリで表示したい場合は以下のように修正します。
//◆カテゴリラベル（アイキャッチのカテゴリ表示）をカテゴリ毎に設定する
function get_the_nolink_category($id = null, $is_visible = true ){
if ($id) {
$categoryArray = get_the_category($id);
} else {
$categoryArray = get_the_category();
}
$display_class = null;
if (!$is_visible) {
return;
}
if (isset($categoryArray[0])) {
$ret = $categoryArray[0];
foreach($categoryArray as $category)
{
if($category->category_parent == 0) {
//①子カテゴリを表示したい親カテゴリをここに追記します。
// 追記した親カテゴリは表示されなくなります。
if($category->cat_name != "ゲーム") {
$ret = $category;
break;
}
if($category->cat_name != "ランニング") {
$ret = $category;
break;
}
}else{
//②表示したい子カテゴリをここに追記します。
// 追記した子カテゴリが表示されるようになります。
if($category->cat_name == "PUBGモバイル") {
$ret = $category;
break;
}
if($category->cat_name == "On") {
$ret = $category;
break;
}
}
}
return '<span class="cat-label cat-label-'.$ret->cat_ID.'">'.$ret->cat_name.'</span>';
}
}
結果
当ブログの場合、以下のように表示されます。
今後の意気込み
本記事で紹介した方法は、カテゴリの親子関係が2階層（親と子）の場合には有効ですが、
3階層以上の場合は意図しない表示になります。
3階層以上の場合でもカテゴリ毎に表示を設定する事ができる方法を
別記事にて紹介させて頂きたいと思っております。
ここまで読んで頂き、誠にありがとうございました。
今回は以上です、またお会いしましょう！
