Cocoon サイドバーのカテゴリーカスタマイズ

サイドバーにカテゴリー設置

外観 ➡ ウィジェット ➡ サイドバーに追加していきます。

ウィジェット

ウィジェット1

カテゴリーをサイドバーにウィジェット追加していきます。

ウィジェット2

カテゴリーの表示設定をして保存します。

サイドバーのカスタマイズ

初期設定のカテゴリーサイドバーを、アイコン付きに変更していきます。

ウィジェット3

今回、使ったアイコンフォント

使ったCSS

/* カテゴリーfa5アイコン表示 */
.widget_categories ul li a{ 			
  border-bottom: 1px dashed #CCCCCC;  		
}			
.widget_categories ul li a::before{			
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/			
  content: "\f07b";
  color:#a6baf5;			
  padding-right: 6px;	
  font-weight: 900;		
	  font-size: 16px;		
}						
.widget_categories > ul > li > a:first-child{ 			
  border-top: none;		
}								
.widget_categories ul li a{ 			
  border-bottom: 1px dashed #CCCCCC;		
}			
.widget_categories ul li ul li a::before{ 		
  font-family: "Font Awesome 5 Free";
  content: "\f101"; 
  color:#a6baf5;		
  padding-right: 6px;	
  font-weight: 900;	
	  font-size: 16px;		
}

content の所が、アイコンの場所になります。

Font Awesome 5 で、好きなアイコンの番号を入力してください。

親カテゴリーと、子カテゴリー両方変更してください。

私の画像のアイコンでよければ、そのままCSSを貼ってください。

Font Awesome 5の使い方

アイコンフォント番号

・Font Awesome 5でアイコンを探す。

使いたいアイコンをクリックして、番号をコピーしてCSSのアイコン番号を貼り替えてください。

 

うまくいかないときの対処方法。

Cocoon設定の、全体から、Font Awesome 5 にチェックが入っているか、確認しましょう。

 

ウィジェット4

tonton
tonton
チェックしていない場合うまくアイコンが表示されません。

それでもダメな場合は、キャッシュを削除する。