パソコン・ウェブ制作

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

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

カテゴリ

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

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

普段修正をするとき、Chromeで右クリックをすると「要素の確認」というメニューを使って、何のスタイルが適用されているか確認をして、そこの要素を修正しています。

ですが、カテゴリ一覧については適用されているスタイルの指定がありません。
新たに「.cat-item」のスタイルを指定して、何となく装飾をすることはできたのですが、カテゴリの件数表示がカテゴリ名に続いて括弧で表示されたままで、クリックすることもできません。

お手上げ状態になったので、いつものようにGoogleで検索したところ、「functions.php」を修正する必要があるとの情報が!
こちらのブログを参考にさせていただきました。
【リンク】WordPressのカテゴリーウィジェットの投稿数部分をカスタマイズしてデザインするサンプルincrement Log

最初に「functions.php」に追記

要素については全くわかりませんので、そのままコピペしました。
これをするだけで、カテゴリ名と件数が分離された状態になり、件数の数字もクリック出来るようになりました。

続いてスタイルの設定

参考にしたブログでは「.widget-categories」を設定していましたが、私の場合はこれが上手く動作しなかったので「.cat-item」を設定しました。

上記は私のデザインに合わせた内容となっているので、適宜変更してください。
ここのブロック要素も前回のエントリーに倣って全体をクリック出来るようにしています。

ついでにカスタマイズ

ブロック要素全体をクリックするようにカスタマイズした後、じんわり切り替わるようにしました。
適用させたい要素にこれを追加するだけでOKです。

「0.5s」は切り替え完了に要する時間の設定です。
「1s」なら1秒、「0.5s」なら0.5秒です。

ランキング表示の箇所の場合、こうやりました。

ご参考まで。





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

執筆者:


comment

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

*

関連記事

キャプチャ

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

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

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

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

ちょこっとリニューアル

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

WordPress Popular Posts

WordPress Popular Postsを導入しました

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

transmit

MacでFTP接続するとSocket write errorになってしまう

※12月1日(月)20時時点、ノートンの設定を変更せずとも接続ができています。 Contents FTP接続ができない同じような症状で困っている人多数でも設定がたくさんあるんです・・・ノートンのファイ …

バンドブレーキからサーボブレーキに交換
2017年2月26日 に投稿された
ピルツ19買っちゃった!
2018年8月17日 に投稿された
散水栓から立水栓に変更しました
2018年10月10日 に投稿された
ランボルギーニ・カウンタック LP400と500の違いって?
2014年1月5日 に投稿された
ワンポールテントが欲しい
2018年8月8日 に投稿された
THV-2000
Thermos(サーモス)お客様相談室の対応に感動した
2014年11月14日 に投稿された
トイレタンクのオーバーフロー管を交換しました
2015年11月8日 に投稿された
森のまきばオートキャンプ場
2017年1月15日 に投稿された
花の森オートキャンピア4
2019年5月15日 に投稿された
イワタニ マーベラス
イワタニカセットフーマーベラスが不完全燃焼
2015年1月17日 に投稿された
follow us in feedly
にほんブログ村に参加しています
にほんブログ村 アウトドアブログ ファミリーキャンプへ