【Cocoon】カテゴリラベル位置を変更する方法

カテゴリラベルがアイキャッチ画像の上に重なっていると、文字も画像も少し見にくいですよね。
この記事では、WordPressのテーマ【Cocoon】のカスタマイズ方法をご紹介します。
初心者でも簡単に表示位置を変更できるので、ぜひ試してみてください♪

1.デフォルトのラベル表示位置

初期設定のままだと、カテゴリラベル位置はアイキャッチの左上部です。

アイキャッチ画像の上にカテゴリ名が重なっていると、画像が少し見づらいですよね。

関連記事やスマートフォンでの表示など、サムネイル画像が小さい場合は特に見づらい…

そこで、思い切って下記のようにレイアウトを変更してスッキリさせましょう！

PHPを少し修正しますが、WordPress初心者でも簡単にできます。

２.カテゴリラベル位置を変更する方法

2-1.子テーマ内にtmpフォルダを作成する

PHPを修正するため、子テーマ直下にtmpフォルダを新規作成します。

フォルダを作る理由

今回修正するのは、親テーマのtmpフォルダ内にしか入っていないPHPファイルです。

しかし、親テーマのPHPを修正してしまうと、テーマがアップデートする度に修正する必要があります。

それを避けるため、子テーマにもtmpフォルダを新規作成し、親テーマのtmpフォルダにある同一名のファイルを上書きするようにしているのです。

2-2.子テーマ内のtmpフォルダにPHPファイルを格納する

親テーマのtmpフォルダから下記２点のPHPファイルをコピーして、子テーマのtmpフォルダにペーストします。

• entry-card.php
• related-entry-card.php

2-3.PHPファイルを修正する

entry-card.phpの修正

トップページのカテゴリラベルの表示位置を変更するために、35行目以降のカテゴリラベルの取得と表示に関する箇所を修正します。

     <?php the_nolink_category(null, apply_filters('is_entry_card_category_label_visible', true)); //カテゴリラベルの取得 ?>
    </figure><!-- /.entry-card-thumb -->

    <div class="entry-card-content card-content e-card-content">
      <h2 class="entry-card-title card-title e-card-title" itemprop="headline"><?php the_title() ?></h2>

＜修正後＞

    </figure><!-- /.entry-card-thumb -->

    <div class="entry-card-content card-content e-card-content">
     <div class="category_right">
       <?php the_nolink_category(null, apply_filters('is_entry_card_category_label_visible', true)); //カテゴリラベルの取得 ?>
     </div>
     <h2 class="entry-card-title card-title e-card-title" itemprop="headline"><?php the_title() ?></h2>

変更したのは、下記２点です。

1. カテゴリラベルの表示位置をタイトル（h2）の上に変更
2. レイアウトを調整するために、classを追加

related-entry-card.phpの修正

関連記事のカテゴリラベル表示位置を変更するために、21行目以降のカテゴリラベルの取得と表示に関する箇所を修正します。

    <?php the_nolink_category(null, apply_filters('is_related_entry_card_category_label_visible', true)); //カテゴリラベルの取得 ?>
  </figure><!-- /.related-entry-thumb -->

  <div class="related-entry-card-content card-content e-card-content">
    <h3 class="related-entry-card-title card-title e-card-title">
      <?php the_title(); //記事のタイトル?>

＜修正後＞

  </figure><!-- /.related-entry-thumb -->

  <div class="related-entry-card-content card-content e-card-content">
  <div class="relatea_category_side">
  <?php the_nolink_category(null, apply_filters('is_related_entry_card_category_label_visible', true)); //カテゴリラベルの取得 ?>
    </div>
    <h3 class="related-entry-card-title card-title e-card-title">
      <?php the_title(); //記事のタイトル?>

変更したのは、下記２点です。

1. カテゴリラベルの表示位置をタイトル（h3）の上に変更
2. レイアウトを調整するために、classを追加

3.レイアウトを調整する

PHPの修正が完了したら、次はCSSを使ったレイアウト調整です。

ダッシュボード > 外観 > カスタマイズ > 追加CSSに、下記のコードを記載してください。

3-1.トップページ

/*トップカテゴリラベル*/
.category_right .cat-label {
	position: static !important;
	display:inline-block;
	margin-top: 3px;
	padding: 2px 10px;
	font-size: 11px;
	border: none;
} 

3.-2.関連記事

/*関連記事カテゴリラベル*/
.related-entry-card .cat-label {
	position: static !important;
	display: inline-block;
	margin-top: 3px;
	padding: 2px 10px;
	border: none;
}

.relatea_category_side{
	margin-bottom: -5px;
}

.related-entry-card-content card-content e-card-content {
	font-size: initial;
}

4.修正する時の注意事項

この記事で紹介した方法は、CocoonのPHPを修正する必要があります。
といっても、データを呼び出す内容を変更するのではなく、表示位置を変更するだけの簡単なもの。

タグを閉じ忘れなければ、エラーコードが表示されたり、レイアウトが崩れたりすることはないと思います。

様々なサイトで「WordPress初心者はPHPの修正をしない方がいい！」と書いてありますが、色々と触って、失敗してみないと知識は身につかないと思っています。

この変更方法は完全に我流なので、「もっといい方法があるよ～！」という声が聞こえてきそうですが…自分メモを兼ねて紹介することにしました。

尚、自分でPHPを修正してみたい方は、必ず下記２点を守ってからカスタマイズするようにしてくださいね！

1. 修正前にBackupをとり、不具合が発生したらすぐ戻せるようにしておく
2. ローカル環境で試してから、本番反映する

5.トップページにカテゴリ名が２つ表示されてしまったら…

テーマをアップデートした影響なのか、バグなのか…

トップページだけカテゴリ名が２つ（タイトル上部と日付下部）表示されるようになってしまいました。

このようにトップページにカテゴリ名が２つ表示されている場合は、赤枠部分の表示をCSSで消してしまいましょう。

ダッシュボード ＞ 外観 ＞ カスタマイズ > 追加CSS　に下記コードを追加して、公開ボタンを押します。

.entry-category {
    display: none;
}

すると、スッキリ！！

記事公開日下のカテゴリ名が消えました。

テーマをアップデートした時は、レイアウトと動作の確認をお忘れなく…