ウィジェットに独自のCSSクラスを追加する【Widget CSS Classes】

2020 5/23

2019.08.10 2020.05.23

プラグインを有効化してサイドバーなどにウィジェットを追加したとき、使っているテーマとデザインが合わなかったり、表示がおかしなことになったことはありませんか？

使いたいプラグインを入れても、デザインが崩れてしまっては台無し。
でも使うのをあきらめるのはもったいない。

プラグインで指定されているCSSを書き換えるなり追記すればなんとかなるのでしょうが、正直ちょっとめんどくさい……。

ウィジェットにCSSクラスが追加できれば、その問題も簡単に解決できそうです。

【Widget CSS Classes】は、各ウィジェットに独自のCSSクラスを追加することのできるプラグイン。

特定のウィジェットだけデザインを変えたい場合などに、とても便利です。

こんな場合におススメ

プラグインを使ってできること

インストール

インストール方法

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

STEP

ウィジェット

プラグインを有効化すると、各ウィジェットにCSSクラス名を追加できるテキストフィールド『CSS Classes』が追加されます。

STEP

クラス名を記述

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

STEP

CSSを記述

CSSを記述します。
例：テキストカラーを赤に指定

CSS

.widget-css-test{color:red;}

STEP

使用イメージ

CSSクラスを設定したウィジェットはテキストカラーが赤に変更されました。

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	クラスを翻訳するかの選択