SWELLのカテゴリーアイコンを個別に変更する方法【サイドバーのフォルダアイコンをオシャレにカスタマイズ!】

SWELLでサイドバーにカテゴリー一覧を表示するとフォルダのアイコンが表示されます。このフォルダのアイコンを、カテゴリーごとに任意のアイコンを設定する方法を紹介します。

BEFORE(標準)

フォルダのアイコンが表示される

AFTER(カスタマイズ後)

自分の好きなアイコンが表示される
この記事を書いた人
  • IT業界21年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
かんた です

カテゴリーアイコンの色を変更するサンプルコード

カテゴリーアイコンの色を変更するサンプルコード

デモサイトを例に解説します。デモサイトでは次のコードを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";
}

かんた

変更作業はこれだけです。

テーマ内のPHPファイルを変更する必要はありません。

コードのどの部分の編集してコピペすればよいの?

サンプルコードはコピペ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です。

カテゴリーIDの確認
かんた

↑一番上のcampaignのカテゴリーIDは「5」だと分かりますね。

アイコン画像を変更する

/* ポートフォリオのアイコン */
.widget_categories>ul>.cat-item-1>a::before{
content: "\e92e";
}

サンプルコードの3行目の「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;
}

「アイコンのサイズを大きくしたい」「小さくしたい」。そんな場合のサンプルコードです。

5行目の「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です。

追加CSSを貼る場所

CSSコードを追加後にアイコンが変更されない場合はキャッシュをクリアしてください。

【備考】カテゴリーの並び順を変更する方法

【備考】カテゴリーの並び順を変更する方法

サイドバーに表示されるカテゴリー一覧の並び順を好きな順に変更する方法です。

プラグインを使って並び順を変更する方法

次のプラグインを使うとカテゴリーの並び順を変更できます。

Category Order and Taxonomy Terms Order

Category Order and Taxonomy Terms OrderはWordPress公式ディレクトリーに登録されている無料プラグインです。公式サイからダウンロードしたZIP形式のファイルをWordPressにアップロードするか、管理画面上でプラグインを検索しインストールしてください。

かんた

プラグイン有効後の操作手順を説明します。

ダッシュボード上から「投稿」をクリック。一覧から「Taxonomy Order」を選択するとカテゴリー一覧が表示されます。ドラッグ&ドロップ操作で順番を変更できます。ここで設定した上から順に、カテゴリー並びが変わります。

カテゴリーの並び順をプラグインで変更
カテゴリーの並び順をプラグインで変更
かんた

メチャクチャ簡単です。

プラグインを停止すると設定した並び順が元に戻ってしまう点に注意しましょう。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!