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

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

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

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

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

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

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

こんな場合におススメ

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

インストール

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

Widget CSS Classes

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

WordPressのプラグインをインストールする方法は、全部で3つあります。ダッシュボードから検索してインストールするダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]

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

STEP2

Widget CSS Classes Settings

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クラスを追加するだけなら、特に設定をいじる必要はないでしょう。

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

最新情報をチェックしよう！