STINGER7：サイドバーのカテゴリーをカスタマイズする方法【ウィジェット】

STINGER7を使っているほとんどの方はサイドバーにカテゴリーの一覧を表示していると思います。
ウィジェットを使って簡単に表示できるので便利ですよね。

デフォルトだと見た目がイマイチなので、サイトのデザインに合わせてカスタマイズしてオリジナリティを出してみましょう！
今回はこんな感じにしてみます↓

記事数も含めた表示のデザインですが、記事数なしにも簡単にできます。
それじゃあやってみよう〜♪

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

ウィジェットでカテゴリーの一覧を表示する

すでにやってる方も多いと思いますが、まずはカテゴリーの一覧を表示方法です。
管理画面左側のメニューから「 外観 → ウィジェット 」を選択します。

左側にある「カテゴリー」を右側の「サイドバーウィジェット」の中にドラッグ＆ドロップで持っていきましょう。

「タイトル」に入力した文字が見出しになりますのでお好きな文字に変えてください。

投稿数の表示が必要ない方はチェックを外してください。
今回のカスタマイズは「子カテゴリー」は使用しないことが前提なので、「階層を表示」もチェックを外しています。
設定したら「保存」を押すのをお忘れなく。

記事数を<a>タグの中に入れる

まずは記事数を表示する場合に必要なカスタマイズです。
記事数を表示しなくてもよいという方はここは飛ばしてください。

デフォルトだとこんな感じで記事数はリンクタグの外に出ています↓

<li><a href="リンク先" >カテゴリー名</a> (記事数)</li>

これだとcssでのスタイリングがやりにくいので、リンクタグの中に記事数も含めるようにします。
以下のコードを子テーマの「functions.php」に追加してください↓

function theme_list_categories( $output, $args ) {
	$replaced_text = preg_replace('/<\/a> \(([0-9,]*)\)/', ' <span class="count">${1}</span></a>', $output);
	if($replaced_text != NULL) {
		return $replaced_text;
	} else {
		return $output;
	}
}
add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );

すると下記のようなコードが吐き出され、記事数にもclass名が付けたのでスタイリングしやすくなりました↓

<li><a href="リンク先" >カテゴリー名 <span class="count">記事数</span></a></li>

あとは見た目を調整すれば完了です。

CSSでデザインをカスタマイズ！

子テーマの「style.css」に以下のコードを追加します↓

#side aside ul li ul li { /* デフォルトのアイコンと余白を削除 */
	background: none;
	padding-left: 0;
}
#side aside li.cat-item a { /* リンク全体の装飾 */
	display: block;
	overflow: hidden;
	font-size: 16px; /* 文字サイズ */
	line-height: 2.4em; /* 行（ボックス）の高さ */
	text-decoration: none;
	vertical-align: middle;
	padding: 0 8px; /* 左右の余白 */
	color: #fff; /* 文字色 */
	background: #47bea0; /* 背景色 */
	margin-bottom: 2px; /* 次のカテゴリーとの余白 */
}
#side aside li.cat-item a:hover { /* マウスオーバー時の設定 */
	background: #f9d635; /* 背景色 */
	color: #278a71; /* 文字色 */
}
#side aside li.cat-item span { /* 記事数部分の装飾 */
	line-height: 1em;
	float: right; /* 右端に寄せる */
	margin: 8px 0 0 8px; /* 位置の調整 */
	padding: 4px 8px; /* 文字周りの余白 */
	border-radius: 4px; /* 角の丸み */
	color: #fff; /* 文字色 */
	background: #278a71; /* 背景色 */
}

コメント内容を参考に色やサイズなどサイトに合わせてお好みで変えてみてください(^^)

カテゴリーごとにアイコンを表示してみる

カテゴリー毎に違うアイコンを表示することもできます。
WordPressでは自動でカテゴリーごとに違うclass名が付くのでまずはソースを確認しましょう。

class名の確認方法

ブラウザごとの拡張機能を使ったり色々と方法はありますが、手っ取り早いのは「右クリック → ソースを表示」です。

サイトの背景部分など何もないところで右クリックすると「ソースを表示」という項目が出てくると思うのでクリックしてみてください。

ズラズラ〜っとコードが表示されて慣れてないと「なんじゃこりゃー！」って感じですがよく見るとページの文章もちらほら書いてあるので何となくどの部分か分かると思います。
サイドバーのカテゴリー部分のコードを探してみましょう↓

<ul><li><h4 class="menu_underh2">CATEGORY</h4>
    <ul>
	<li class="cat-item cat-item-13"><a href="https://web-ashibi.net//archives/category/web" >WEB <span class="count">1</span></a>
</li>
	<li class="cat-item cat-item-9"><a href="https://web-ashibi.net//archives/category/wordpress" >WordPress <span class="count">27</span></a>
</li>
	<li class="cat-item cat-item-15"><a href="https://web-ashibi.net//archives/category/blog" >ブログ運営 <span class="count">3</span></a>
</li>
    </ul>
</li></ul>

「Ctrl ＋ f」で文字検索を開いて「cat-item」を検索するとすぐに見つかると思います。

見つけたらカテゴリーごと付いている固有のclass名を確認してください。

<li class="cat-item cat-item-13">

上記の「WEB」カテゴリーの場合は「 cat-item-13 」ですね。

Font Awesomeでアイコンを表示

確認した固有のclass名を使って「 style.css 」にこのように追加します↓

li.cat-item-13 a:before {
    font-family: "FontAwesome";
    content: "\f108";
    padding-right: 6px;
}

これをカテゴリーごとに指定するとこんな感じでアイコンを表示できます↓

ちなみに「 color: #000000; 」など色の指定も追加すればアイコンだけ色を変えることもできますよ！

STINGER7では「Font Awesome」が最初から使えるようになっています。
他にもたくさんの種類のアイコンがあるので、こちらのページから好きなアイコンを選んでみてください↓

Site not found · GitHub Pages

fortawesome.github.io

上記CSS「 content: “\f108“; 」の赤字の部分を変えると好きなアイコンにすることができます。
それぞれのコードはこの部分で確認できます↓

まとめ

いかがでしたでしょうか？
カテゴリーのメニューが目立つとサイトの回遊率も上がるかもしれないので試してみてください♪
Font Awesomeも色々と使えて便利なので、ぜひ使い方をマスターしてください！

ではまた〜♪

STINGER7のカスタマイズ記事をまとめました↓

STINGER7：カスタマイズまとめ

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

web-ashibi.net

2016.03.24