【yStandard】WordPressのタグとカテゴリーをcssでカスタム

タグの使用頻度が高いものは文字が大きくなっていく仕組みですよね。アレはなぜなんだろう、、、、

1 「ウィジェットのカテゴリー」と「タグクラウド」のCSSデザイン変更
2 まとめ

「ウィジェットのカテゴリー」と「タグクラウド」のCSSデザイン変更

サイドバーのウィジェットで表示させているタグとカテゴリーのデザインを追加していきます。
まずは変更前の状態から。

カテゴリーとタグ部分の変更前

Before

まずはこの状態から。
（カテゴリーのフォントがBoldになっていたりタイトルの上下にラインが入っていたりしますが、本当の「yStandard」初期状態はもっとスッキリしています。）

以下のコードをcssに追記します。

/*タグクラウドのデザイン*/
.widget_tag_cloud .tagcloud a {
 display: inline-block;
 background:#e5e5e5;
 border:none;
 color: #0f4471;
 padding:4px;
 margin:4px;
 font-size:12px !important;
 font-style:italic;
 font-weight: bold;
}
.widget_tag_cloud .tagcloud a:hover {
 background: #fc3c3c;
 color: #f6f6f6;
}

/*ウィジェットカテゴリーのデザイン*/
.cat-item a {
 text-decoration: none !important;
 display: inline-block !important;
 background:#e5e5e5 !important;
 border:none;
 color: #0f4471 !important;
 padding:4px !important;
 margin-top:0;
 margin-bottom:8px;
 font-size:12px !important;
 font-style:italic;
 font-weight: bold;
}
.cat-item a:hover {
 background: #fc3c3c !important;
 color: #f6f6f6 !important;
}

カテゴリーとタグ部分の変更後

反映させた結果がコチラ。

After

部分的に赤いのはホバー時のアクションです。

並べてみます。

初期状態と比べると見やすさが段違いになりました。ダンチ。
色選びはとても難しいのでまだまだ迷走しています。
色を決めたときのアレはこちらです。

YUSUKEITO.co

【WordPress】サイトに使用するカラーを選びました

https://yusukeito.co/wordpress-colorcode-pickup-colorhunt

当サイトで使用する色を選びました。色に対する知識がほぼゼロの為、まだまだ改善しなくてはならない部分が多いですがまずは方向性を決めようと思います。参考にしたツール「Color Hunt」という色の組み合わせがたくさん掲載されているサイトです。選んだ組み合わせたくさんありすぎて悩みましたがコレにしました。僕の選んだ色のカラーコードは上から順にコチラです。 #083358 #0f4471 #fc3c3c #f6f6f6ページ内の組み合わせにカーソルをあわせるとカラーコードが表示されコピーできます。これをhタグやリンク、背景等に使っていく感じ...

最後に使用頻度順に並び替え

初期設定ではアルファベット順になっているタグの並び順を使用頻度順に変更するためのコードです。
子テーマのfunctions.phpに以下を記述します。

//タグの並び順序
function custom_wp_tag_cloud($args) {
 $myargs = array(
 'orderby' => 'count', //使用頻度順
 'order' => 'DESC', // 降順（使用頻度の高い順）
 'number' => 100 // 表示数
 );
 $args = wp_parse_args($args, $myargs);
 return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_wp_tag_cloud' );

これで使用頻度順に変更されました！！