カテゴリーの表示を個性的にしてみた。 [WordPress]

カテゴリー表示はテーマそのままだとちょっと寂しいので、少し手を加えてみました。

今回手を加えたのは、style.cssとfunctions.php。

カテゴリーの親子関係の表示を調整。

style.cssで表示の調整

親カテゴリー、子カテゴリーそれぞれ設定。

• 文字サイズ
• 位置調整
• フォントカラー
• リンク設定
• アイコンの追加
• ホバーの設定

/*親カテゴリー*/
.cat-item a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    line-height: 2.2em;
    padding: 0 20px;
    color: #222;
    margin-bottom: 1px;
}

/*子カテゴリー*/
.cat-item li a {
    display: block;
    font-size: 12px;
    padding: 0 20px 0 40px;
}

/*親アイコン*/
.cat-item a:before {
    font-family: FontAwesome;
    content: "\f115";
    color: #222;
    margin-right: 7px;
}

/*子アイコン*/
.cat-item li a:before {
    font-family: FontAwesome;
    content: "\f0da";
    margin-right: 4px;
}

/*ホバー*/
.cat-item a:hover {
    color: #b22222;
    background-color: #f2f2f2;
}
.cat-item a:hover:before {
    color: #b22222;
    background-color: #f2f2f2;
}

functions.phpで投稿数の位置の調整

ここまでだと「display: block;」で投稿数が改行されてしまうので、functions.phpに以下を追記。

add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
  $output = preg_replace('/<\/a>\s*\((\d+)\)/',' <span>[$1]</span></a>',$output);
  return $output;
}

style.cssで投稿数の表示を調整

/*投稿数*/
.cat-item a span {
	float:right;
    font-size: 12px;
}

ついでにタイトルを修正。

• 背景設定
• ボーダー調整
• フォント調整

/*タイトル*/
.st-aside .menu_underh2 {
    font-weight: normal !important;
    border-bottom: 1px solid #cecece;
    background-image: linear-gradient( -45deg, transparent 25%, #f2f2f2 25%, #f2f2f2 50%, transparent 50%, transparent 75%, #f2f2f2 75%, #f2f2f2 );
	background-size: 8px 8px;
    padding: 5px 10px;
}

まとめ

投稿数は数字なので、尻揃えにしたほうが見やすいかなと。カテゴリー名と距離があるけど、そこはhoverで補完。

親子関係は、文字サイズとアイコンで差別化。

だいぶ見やすくなったのではないかと思っております。