記事を所属させるカテゴリも、一覧でただ置いてあるよりは視覚的に「現在地がどこか？」がわかる方が、親切です。
この記事は、閲覧中の記事のカテゴリに色をつける方法について
- 実装後のサンプル。
- 閲覧中の記事のカテゴリに色をつけるコード一式。
- ちょっとしたコピペ用コードの解説。
の内容です。
WordPressを使っていて、記事数がそれなりに多くカテゴリ一覧でも見やすくしたいと思っている方は、簡単なコピペでできるのでこの記事を参考にカスタマイズしてみてください。
それでは早速ご覧ください。
目次
実装後のサンプル
早速実装後のサンプルです。閲覧中の記事のカテゴリに、色が付き文字も太字になります。
このページの「カテゴリ一覧」も上記のようになっているので、併せてご覧ください。
CSSも簡単な構造で、カスタマイズも簡単なのでサイトに合うよう、色々いじってみてください。
設置と実装の手順
カテゴリの色を変えるjQueryの設置手順についてです。最後にショートコードの設置も含め、以下の3つのSTEPで設置が完了します。
はじめに、閲覧中記事のカテゴリに任意のclassを付与するPHPと、jQueryのファイルを作ります。
それぞれのファイルについてざっくり解説すると、PHPでカテゴリIDを出力し、jQueryでCSSをいじるような形です。
<?php if ( is_single() ) ://投稿ページのみ ?>
<script>
$(document).ready( function(){
// 一致するカテゴリIDの出力
$('.cat-item-<?php
$category = get_the_category();
echo $category[0]->cat_ID;
?>').addClass('view');
});
</script>
<?php endif; ?>PHPは、記事のエディタなどにそのまま記述しても出力されません。その為、ショートコード化や、テンプレートファイル化する必要がありますが、ショートコード の方が取り回しも良くオススメです。
以下の記事を参考にして作りましょう。
次に、STEP.1のjQueryで付与したCSSのクラスの見た目を整えるプロパティを記述します。以下のコードをコピペしましょう。
.widget ul li.view {
background: #f1f8ff;
position: relative;
}
.widget ul li.view a {
color: #6bb6ff;
font-weight: 600;
}STEP.1で作ったショートコード を、設置したい場所に貼り付けすれば完了です。
このコードは、記事内本文に設置する必要があります。使っているテーマによりますが、フッターの</body>など、異なる場所に置くと、閲覧中以外のカテゴリIDを出力してしまう場合があるので、貼り付けする場所には注意ください。
これで設置可能です。
コピペ用コード一式
上記の手順で紹介したコピペ用のコード一式です。
コードを表示する
<?php if ( is_single() ) ://投稿ページのみ ?>
<script>
$(document).ready( function(){
// 一致するカテゴリIDの出力
$('.cat-item-<?php
$category = get_the_category();
echo $category[0]->cat_ID;
?>').addClass('view');
});
</script>
<?php endif; ?>.widget ul li.view {
background: #f1f8ff;
position: relative;
}
.widget ul li.view a {
color: #6bb6ff;
font-weight: 600;
}コピペする時の注意点
この記事で紹介のコピペ用コードには、jQuery本体の組み込みが必要です。
jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><head>〜</head>ちょっとしたコードの解説
ちょっとしたコードの解説です。jQueryのカスタマイズをしたい方はこちらもご覧ください。
PHP+jQuery：記事のカテゴリIDを取得して.cat-itemに出力
WordPressのカテゴリには、全て数字のIDが付与されています。
ウィジェットなどで表示されるカテゴリ一覧には、以下のようにそのIDが付与されて出力されます。 ※cat-item-2 の末尾の数字がカテゴリIDです。
<li class="cat-item cat-item-2"><a href="https://dubdesign.net/category/dtp/dtp_knowledge/">DTPで知っておきたい基本 <span class="entry-count dfont">4</span></a>
</li>ここの数字の部分をPHPで出力して、そのまま対象のカテゴリ一覧に.viewのclassを付与するjQueryのコードになっています。
CSS：jQueryで付与した.viewのプロパティ
上記で付与した.viewのclassにつけるプロパティを書いていけば、閲覧中の色などの変更が可能です。
このCSSのプロパティを記述して、見た目を色々変えましょう。
