パソコン・ウェブ制作

WordPressのカテゴリ一覧表示をカスタマイズしました。

投稿日:2014年10月5日 更新日:

カテゴリ

シンプルすぎるWordpressのカテゴリ一覧表示をカスタマイズしました。
※作業開始前に必ずバックアップを取ってください
※素人のカスタマイズですので同じように設定しても動作しない場合があります。あらかじめご了承ください。

修正する場所がわからない・・・

普段修正をするとき、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;
}

ご参考まで。

-パソコン・ウェブ制作
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

関連記事

キャプチャ

WordPressのブロック要素全体をクリックできるように修正

※記述に間違いがあったので訂正しました。(2014.10.8) 今日は天気があまり良くないので、朝一で外出した後は家でじっとしていたので、ちょこちょことサイトの修正をしました。 ※作業開始前に必ずバッ …

FC2ブログからWordPressに移行しました

約4年前から、キャンプレポートに特化したブログをFC2で更新していたのですが、2014年からWordpressに切り替えてリニューアルしました。 キャンプに頻繁に行くことが出来なくなり、更新が出来なか …

ちょこっとリニューアル

シンプルな構成にしました ほんとうにちょこっとなんですけど、ブログリニューアルしました。 このブログはWordpressで作っていますが、テーマを新しくしてカラフルだったサイトを白ベースのシンプルな色 …

Hit bit HB-101

ソニーPC事業譲渡で思い出したMSXとの出会い

Hit bit HB-101 VAIOブランド譲渡のニュースで思い出したのだけど、私のパソコンルーツはソニーのMSX、HiTBiTを購入したのが始まりだったということ。 今後何回か書いていきたいと思っ …

WordPress Popular Posts

WordPress Popular Postsを導入しました

閲覧数をランキング表示してくれるWordpressのプラグイン「WordPress Popular Posts」を導入しました。 普通にランキング表示するだけであれば、難しくはないのですが、Sting …

散水栓から立水栓に変更しました
2018年10月10日 に投稿された
宝台樹キャンプ場
2010年5月4日 に投稿された
バンドブレーキからサーボブレーキに交換
2017年2月26日 に投稿された
ピルツ19買っちゃった!
2018年8月17日 に投稿された
ベアボーンズ エジソンリビングライトLED
ベアボーンズ エジソンペンダントライトLEDの収納にはチャムスチャムス ブービーマルチハードケースが最適!
2020年3月3日 に投稿された
日産キューブ
キーレス連動ドアミラー格納装置取り付けました
2014年3月1日 に投稿された
ニュー田代オートキャンプ場
2016年10月24日 に投稿された
山伏オートキャンプ場
2016年10月31日 に投稿された
THV-2000
Thermos(サーモス)お客様相談室の対応に感動した
2014年11月14日 に投稿された
ランボルギーニ・カウンタック LP400と500の違いって?
2014年1月5日 に投稿された
follow us in feedly
にほんブログ村に参加しています
にほんブログ村 アウトドアブログ ファミリーキャンプへ