WP「STORK(ストーク)」でカテゴリーラベル色をカテゴリーごとに変更する。

カテゴリーラベル変更

当サイトは、OPENCAGE(オープンケージ)WordPressテーマ「ストーク」を使用しています。

今回ご紹介するのは、WordPressテーマ「STORK(ストーク)」を使用していると表示される「カテゴリラベルの色」をカテゴリーごとに変更する方法をご紹介します。

記事のサムネイル画像の右上に表示されるコレ↓
カテゴリーラベル


はじめに

ちなみに「カテゴリーラベルが全て同じ色でいい場合」の変更方法は下記の通りです。

  1. WordPressのダッシュボード>外観>カスタマイズ>サイトカラー設定>「ラベル背景、ラベルテキスト」で変更できます。
    カテゴリーラベルの色設定

今回ご紹介するのは、上記とは違い、カテゴリーごとに色を変える方法です。

※設定の前に※
テーマはできれば、子テーマを利用しましょう。(すでに子テーマの方は問題ないです。)詳しくは公式サイトをご覧ください。子テーマをダウンロードして、アップロードして、適用するだけです。

設定方法

それでは、カテゴリーごとに色を変更していきます。2つのファイルを少しだけ変更して、CSSで装飾するだけです。

カテゴリーごとに色を変更

変更するファイル

まず下記の2つのファイルを変更します。

  • yarpp-template-relative.php(記事ページ下に表示される関連記事)
  • parts_singlefoot.php(記事ページ下に表示される新着記事)

※もしもYARPPプラグインを使用していない場合は、上記ではなく下記の2ファイルを変更してください。

  • parts_singlefoot.php
  • related-entries.php

YARPPプラグインはストークの公式サイトでも推奨されている、関連記事の精度を高めるための無料のプラグインです。設定がまだの方はこの機会に設定してみてください。設定方法は過去の記事で詳しくご紹介しています。>>WPテーマ「STORK(ストーク)」で関連記事の精度を上げる方法

1.ファイルをコピーする

「yarpp-template-relative.php」は子テーマに元々ありますが「parts_singlefoot.php」や「related-entries.php」は存在しませんので、FTPソフトで親テーマからコピー&ペーストしてください。

「/wp-content/themes/jstork」から「parts_singlefoot.php」をFTPソフトで一度ダウンロードし「/wp-content/themes/jstork_custom」のフォルダへアップロードします。親テーマのファイルは消さないでください。コピーするだけです。
ファイルコピー
WordPressは、子テーマと親テーマに同じファイル名がある場合は、子テーマの方を読み込んでくれます。よって親テーマのファイルは消さないでください。

※FTP設定が不明な場合はこちらの公式サイトでご確認ください。>>テーマカスタマイズに!FTPソフト(FileZilla)の設定方法 | OPENCAGE

2.ファイルを修正する

それでは、子テーマにコピーしたファイルをこれから修正します。

  1. ダッシュボード>外観>テーマの編集>
    テーマの編集
  2. 右側のファイル一覧から変更するファイルを選択>
    テーマの編集
  3. ファイル内の
    <span class="cat-name">

    <span class="cat-name cat-id-<?php $cat = get_the_category();$cat = $cat[0];echo $cat->cat_ID; ?>">

    へ変更してください。「Ctrl+F」で検索すると早いです。(※エディターソフトをお持ちの方は、ダッシュボードで編集せずに、FTPソフトでダウンロードしたファイルを修正してアップロードした方が早いかもです。)

  4. 各ファイルに1箇所ずつありますので、それぞれ変更してください。
    変更箇所

上記の設定後は、例えば、<span class=”cat-name cat-id-1″>や<span class=”cat-name cat-id-2″>などと出力されます。これでIDごとに色を指定する下準備が完了しました。

3.CSSで装飾

子テーマの「style.css」へ下記のCSSをコピー&ペーストしてください。

3-1.下記のCSSを全てコピーしてください。
span.cat-name.cat-id-● {
 background:#ffdb21 !important;/*背景色*/
 color: #333333 !important;/*文字色*/
}
  • span.cat-name.cat-id-●の「●」部分を半角の数字へ変更してください。span.cat-name.cat-id-1やspan.cat-name.cat-id-2などの「存在するカテゴリーID番号」へ変更してください。
  • IDの数だけコピーして指定してください。
  • 背景色や文字色を、ご希望の色へ変更してください。

WEB色見本 原色大辞典さんなどで好きな色を見つけてください。

カテゴリーIDの確認方法

ちなみに、カテゴリーID番号の確認方法は下記のサイトで詳しくご紹介されています。カテゴリー設定で確認できます。>>ページID、カテゴリーIDを確認する方法 | ワードプレステーマTCD

一気に確認したい場合は、Catch IDsという無料のプラグインをインストールするだけで、IDを確認することができます。プラグインインストール&有効後に、ダッシュボード>投稿>カテゴリーで確認できます。
ID確認
上記の様にIDを分かりやすく表示してくれます。確認できたらもうこのプラグインは必要ないので、後ほど停止や削除してください。

3-2.下記へペーストしてください。

先程コピーしたCSSを下記へペーストしてください。

ダッシュボード>外観>テーマの編集>style.cssへペースト
CSS編集
既に何か記載されている場合は、その下へペーストしてください。以上で完了です。

お疲れ様でした。これで下記のように、カテゴリーごとにラベルの色を変更できました。
色変更後

参考サイト

WPでカテゴリーアイコンにclassを付与して色変更、画像変更する方法 | ウェブマスターがウェブのことを書いたら

おまけ

記事ページのラベルをまっすぐに

下記のように斜めに傾いたラベルを、まっすぐに変更する方法です。
ラベル斜め
記事ページに表示されるラベルは上記のように傾いた装飾が施されています。

詳しくは公式サイトの「記事ページでカテゴリラベルが斜め・・・」の項目でご確認ください。

ラベルのアイコンを変更する

ラベルのアイコン

上記のように「押しピンのアイコン」がデフォルトでは表示されています。別の「Font Awesomeのアイコン」などへ変更できます。私は「#」へ変更しています。

下記のCSSを、子テーマのstyle.cssへコピー&ペーストしてください。

.byline .cat-name:before{content:"\f292";}

別のアイコンがいい方は「\f292」の部分を他のアイコンへ変更してみてください。アイコンについては、下記のサイトで詳しく紹介されています。>>スタイルシートだけでFont Awesomeのアイコンを表示する | Web技術指南書

感想

元からIDが指定されていれば楽なのになぁと思いました。でも処理速度を優先したのだろうと思います。

シェアしていただけると、両手をあげて外へ飛び出します。

コメントを残す

お気軽にコメントをどうぞ。

ABOUTこの記事をかいた人

「やってみたこと」や「ライフハック」が中心のブログです。 少しでも多く役立つことができればうれしいです。 お気軽にコメントやフォローしていただけると、励みになります。 よろしくお願いします。