シンプルすぎるWordpressのカテゴリ一覧表示をカスタマイズしました。
※作業開始前に必ずバックアップを取ってください
※素人のカスタマイズですので同じように設定しても動作しない場合があります。あらかじめご了承ください。
Contents
修正する場所がわからない・・・
普段修正をするとき、Chromeで右クリックをすると「要素の確認」というメニューを使って、何のスタイルが適用されているか確認をして、そこの要素を修正しています。
ですが、カテゴリ一覧については適用されているスタイルの指定がありません。
新たに「.cat-item」のスタイルを指定して、何となく装飾をすることはできたのですが、カテゴリの件数表示がカテゴリ名に続いて括弧で表示されたままで、クリックすることもできません。
お手上げ状態になったので、いつものようにGoogleで検索したところ、「functions.php」を修正する必要があるとの情報が！
こちらのブログを参考にさせていただきました。
【リンク】WordPressのカテゴリーウィジェットの投稿数部分をカスタマイズしてデザインするサンプル（increment Log）
最初に「functions.php」に追記
function theme_list_categories( $output, $args ) {
$replaced_text = preg_replace('/<\/a> \(([0-9]*)\)/', ' <span class="count">${1}</spn></a>', $output);
if($replaced_text != NULL) {
return $replaced_text;
} else {
return $output;
}
}
add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 );
要素については全くわかりませんので、そのままコピペしました。
これをするだけで、カテゴリ名と件数が分離された状態になり、件数の数字もクリック出来るようになりました。
続いてスタイルの設定
参考にしたブログでは「.widget-categories」を設定していましたが、私の場合はこれが上手く動作しなかったので「.cat-item」を設定しました。
.cat-item {
display:block;
font-size: 14px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999999;
margin: 0;
}
.cat-item:last-child {
border-bottom: none;
}
.cat-item ul li {
display: block;
list-style-type: none;
}
.cat-item a {
display: block;
overflow: hidden;
*zoom: 1;
text-decoration : none ;
color : #333333 ;
padding:5px;
}
.cat-item a:hover {
color: #b22222 ;
}
.cat-item a:hover span {
color: #fff;
background: #a1cfb3;
}
.cat-item span {
display: inline;
float: right;
margin-left: 8px;
padding: 1px 8px;
font-weight: bold;
color: #313131;
background: #f6f6ec;
}
上記は私のデザインに合わせた内容となっているので、適宜変更してください。
ここのブロック要素も前回のエントリーに倣って全体をクリック出来るようにしています。
ついでにカスタマイズ
ブロック要素全体をクリックするようにカスタマイズした後、じんわり切り替わるようにしました。
適用させたい要素にこれを追加するだけでOKです。
transition-duration: 0.5s;
「0.5s」は切り替え完了に要する時間の設定です。
「1s」なら1秒、「0.5s」なら0.5秒です。
ランキング表示の箇所の場合、こうやりました。
#popular-post dl {
min-height: 100px;
padding : 10px 0 10px 0 ;
border-bottom : 1px dotted #cccccc ;
transition-duration: 0.5s;
}
ご参考まで。
