【WordPress】カテゴリの投稿数をaタグの中に入れる方法!
WordPressのカテゴリウィジェットはデフォルトで投稿数を表示出来るようになっていますが、この投稿数がaタグの中に入ってくれずにちょっとイケてないので修正することにしました。
投稿数がaタグの中に入ってくれない。
ソースで見るとこんな感じ。
aタグの後ろで特にタグに入れられてないのでスタイルも入れづらい。
プログラミングやWordPressを習得するのに一番近道な方法とは?
投稿数をaタグの中に入れてspanで囲む方法
function.phpの一番下に以下のソースを入れればOKです。
ちなみに投稿数はcountというclassにしています。
■ function.php
1 2 3 4 5 | add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 ); function my_list_categories( $output, $args ) { $output = preg_replace('/<\/a>\s*\((\d+)\)/',' <span class="count">$1</span></a>',$output); return $output; } |
ね、入ってますね。
カテゴリLIGさん風
でもこのままじゃイケてないので、みんな大好きLIG風にしちゃいました。
LIGさんどうか許してください。
ちなみに僕はLIGの大ファンです。
CSSはこちら。
皆さんの環境に合わせて変更してくださいね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | aside ul { overflow: visible !important; } li.cat-item { padding: 0 0 10px 0; background: none; list-style: none; } li.cat-item a { padding: 14px 8px; width: 100%; border-top: #ccc 1px solid; overflow: hidden; background: #fff; display: block; text-decoration: none; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; float: left; } li.cat-item a:hover { background: #ececec; font-weight: bold; } li.cat-item span.count { background: black; color: #fff; font-weight: bold; font-weight: normal; } li.cat-item a span.count { font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; float: right; background: #ececec; color: #999; padding: 0 5px; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } li.cat-item a:hover span.count { background: black; color: #fff; font-weight: bold; } |
どうでしょうか。
お役にたてましたでしょうか。
WordPressをちょちょっとカスタマイズして見栄えが良くなれば嬉しいですね。
Comments: 1