プラグインを有効化してサイドバーなどにウィジェットを追加したとき、使っているテーマとデザインが合わなかったり、表示がおかしなことになったことはありませんか?
使いたいプラグインを入れても、デザインが崩れてしまっては台無し。
でも使うのをあきらめるのはもったいない。
プラグインで指定されているCSSを書き換えるなり追記すればなんとかなるのでしょうが、正直ちょっとめんどくさい……。
ウィジェットにCSSクラスが追加できれば、その問題も簡単に解決できそうです。
【Widget CSS Classes】は、各ウィジェットに独自のCSSクラスを追加することのできるプラグイン。
特定のウィジェットだけデザインを変えたい場合などに、とても便利です。
こんな場合にオススメ
- ウィジェット毎にデザインを変更したい
- ウィジェットにCSSクラスを追加したい
プラグインを使ってできること
- ウィジェットに任意のCSSクラス・IDを追加できるようになる
- 特定のウィジェットのCSSデザインを変更することができる
目次
インストール


インストール方法
- ダッシュボード > プラグイン > 新規追加 とクリックする
- Widget CSS Classesで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
ウィジェットにCSSを設定する方法
STEP
ウィジェット
プラグインを有効化すると、各ウィジェットにCSSクラス名を追加できるテキストフィールド『CSS Classes』が追加されます。

STEP
クラス名を記述
『CSS Classes』に任意のクラス名を記述したら保存します。


STEP
CSSを記述
CSSを記述します。
例:テキストカラーを赤に指定
CSS
.widget-css-test{color:red;}
STEP
使用イメージ
CSSクラスを設定したウィジェットはテキストカラーが赤に変更されました。

【Widget CSS Classes】の設定
STEP
Widget CSS Classesを開く
プラグインを有効化すると、管理画面 > 設定 内に【Widget CSS Classes】項目が追加されるので、そこから設定を行います。

STEP
項目の設定

Add Widget Number Classes | ウィジェットに番号のクラスを追加するかの選択 (widjet-1・widget-2と番号が割り振られるようになる) |
---|---|
Add First/Last Classes | 最初と最後のウィジェットにクラスを追加するかの選択 (最初のウィジェット:widget-first / 最後のウィジェット:widget-last がクラスとして追加される) |
Add Even/Odd Classes | 奇数番目・偶数番目を識別するクラスを追加するかの選択 (奇数番目:widget-odd / 偶数番目:widget-even がクラスとして追加される) |
Show Additional Field for ID | IDを指定できるようにするかの選択 |
Class Field Type | ウィジェットにCSSクラスを定義するためのフィールドタイプを選択 Text:ウィジェットに表示されたテキストフィールドからクラスを定義する Predefined:事前にクラスを定義し、チェックボックスで選択できるようにする Both:Text・Predefinedの両方 None:なし |
Predefined Classes | Predefined・Bothを選択した場合にのみ有効になる ここで追加したいクラスを定義する |
Fix widget parameters | ウィジェットのパラメータを修正するかの選択 |
Remove duplicate classes | 重複したクラスを削除するかの選択 |
Translate classes | クラスを翻訳するかの選択 |
ウィジェットにCSSクラスを追加するだけなら、特に設定をいじる必要はないでしょう。
STEP
保存
項目を設定したら変更を保存します。
STEP
インポートとエクスポート
『Import/Export』タブに切り替えると、保存した設定をインポート・エクスポートすることができます。

動作確認環境
- バージョン 1.5.4.1
- WordPress 5.7.2
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【Widget CSS Classes】は、ウィジェットに独自のCSSクラスを追加することのできるプラグイン。
- 特定のウィジェットだけデザインを変更したい場合などに、とても便利です。