SWELLでサイドバーにカテゴリー一覧を表示するとフォルダのアイコンが表示されます。このフォルダのアイコンを、カテゴリーごとに任意のアイコンを設定する方法を紹介します。
BEFORE（標準）
AFTER（カスタマイズ後）
カテゴリーアイコンの色を変更するサンプルコード
デモサイトを例に解説します。デモサイトでは次のコードをCSSに追加しています。
/* ポートフォリオのアイコン */
.widget_categories>ul>.cat-item-1>a::before{
content: "\e92e";
}
/* スタッフブログのアイコン */
.widget_categories>ul>.cat-item-4>a::before{
content: "\e7fd";
}
/* キャンペーンのアイコン */
.widget_categories>ul>.cat-item-5>a::before{
content: "\e925";
}
変更作業はこれだけです。
コードのどの部分の編集してコピペすればよいの？
サンプルコードはコピペOKです。
自分のサイト用にサンプルコードをアレンジしてください。
変更する点
- カテゴリーID（必須）
- アイコンの画像（必須）
- アイコンの色（任意）
- アイコンのサイズ（任意）
かんたそれぞれを詳しく解説していきます。
カテゴリーIDの変更について
/* ポートフォリオのアイコン */
.widget_categories>ul>.cat-item-1>a::before{
content: "\e92e";
}2行目の「.cat-item-1」に注目です。この右端の数字「1」がポートフォリオのカテゴリーのIDです。
サンプルコードの数字を自分のサイトのカテゴリーIDに変更するのが最初のステップです。
初心者カテゴリーIDってどこから確認するの？
カテゴリーIDは、WordPressダッシュボードの「投稿」→「カテゴリー」の順に進むと、カテゴリー一覧ページが表示されます。このページの「ID」がカテゴリーIDです。
かんた↑一番上のcampaignのカテゴリーIDは「5」だと分かりますね。
アイコン画像を変更する
/* ポートフォリオのアイコン */
.widget_categories>ul>.cat-item-1>a::before{
content: "\e92e";
}サンプルコードの３行目の「content」でアイコンを指定しています。
SWELLでは一部のアイコンをフォントファイルとして読み込んでいるので、サンプルサイトではフォントファイルのアイコン「\e92e」を指定しました。「\e92e」部分を任意のアイコンに変更してください。
利用できるアイコンの一例
| アイコン | CSS |
|---|---|
\e936 | |
\e91d | |
\e915 | |
\e914 | |
\e934 | |
\e923 | |
\e921 | |
\e91a | |
\e929 | |
\e935 | |
\e96b | |
\e96b | |
\e9cd | |
\e9da | |
\e9d9 |
利用できるアイコンは他にもあります！
アイコンの色を指定する方法
/* ポートフォリオのアイコン */
.widget_categories>ul>.cat-item-1>a::before{
content: "\e92e";
color:black;
}アイコンの色をカテゴリーごとに変更するサンプルコードです。先程のサンプルコードに「color」のプロパティーを足しています。カラーコードや16進数等で指定してください。
アイコンサイズを変更する方法
/* ポートフォリオのアイコン */
.widget_categories>ul>.cat-item-1>a::before{
content: "\e92e";
color:black;
font-size:24px;
}「アイコンのサイズを大きくしたい」「小さくしたい」。そんな場合のサンプルコードです。
５行目の「font-size」プロパティーでアイコンサイズを指定できます。指定する単位はpx、emなど管理しやすいものを自由に選びましょう。
かんたfont-sizeを大きくすると横に並ぶカテゴリー名と距離が使くなります↓
距離の調整をするにはpadding-leftの値を変更してください。
.widget_categories>ul>.cat-item>a, .wp-block-categories-list>li>a {
padding-left: 1.5em; ←変更しましょう！
}CSSを追加する場所
CSSの追加コードは自分の管理しやすい場所であればでどこに書いても構いません。どこにコードを追加して良いかわからない人は、外観→カスタマイズ→追加CSSにコードを書けばOKです。
【備考】カテゴリーの並び順を変更する方法
サイドバーに表示されるカテゴリー一覧の並び順を好きな順に変更する方法です。
プラグインを使って並び順を変更する方法
次のプラグインを使うとカテゴリーの並び順を変更できます。
Category Order and Taxonomy Terms Order
Category Order and Taxonomy Terms OrderはWordPress公式ディレクトリーに登録されている無料プラグインです。公式サイからダウンロードしたZIP形式のファイルをWordPressにアップロードするか、管理画面上でプラグインを検索しインストールしてください。
かんたプラグイン有効後の操作手順を説明します。
ダッシュボード上から「投稿」をクリック。一覧から「Taxonomy Order」を選択するとカテゴリー一覧が表示されます。ドラッグ＆ドロップ操作で順番を変更できます。ここで設定した上から順に、カテゴリー並びが変わります。
かんたメチャクチャ簡単です。
