プラグインを有効化してサイドバーなどにウィジェットを追加したとき、使っているテーマとデザインが合わなかったり、表示がおかしなことになったことはありませんか？
使いたいプラグインを入れても、デザインが崩れてしまっては台無し。
でも使うのをあきらめるのはもったいない。
プラグインで指定されているCSSを書き換えるなり追記すればなんとかなるのでしょうが、正直ちょっとめんどくさい……。
ウィジェットにCSSクラスが追加できれば、その問題も簡単に解決できそうです。
【Widget CSS Classes】は、各ウィジェットに独自のCSSクラスを追加することのできるプラグイン。
特定のウィジェットだけデザインを変えたい場合などに、とても便利です。
こんな場合におススメ
- ウィジェットにCSSクラスを追加したい
プラグインを使ってできること
- ウィジェットに任意のCSSクラス・IDを追加できるようになる
スポンサーリンク
インストール
- 管理画面から プラグイン > 新規追加 とクリックする
- “Widget CSS Classes“で検索する
- “今すぐインストール”をクリック。インストール後、有効化する
または、配布サイトからダウンロードして、インストール。
– WordPress プラグイン | WordPress.org
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする […]
使用方法
プラグインを有効化すると、各ウィジェットにCSSクラス名を追加できるテキストフィールド『CSS Classes』が追加されるので、任意のクラス名を記述してください。
設定
Widget CSS Classes
| 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クラスを追加するだけなら、特に設定をいじる必要はないと思います。
Import/Export
保存した設定をインポート・エクスポートすることができます。
動作確認環境
- バージョン 1.5.4
- WordPress 5.2.2
まとめ
- 【Widget CSS Classes】は、ウィジェットに独自のCSSクラスを追加することのできるプラグイン。
- 特定のウィジェットだけデザインを変更したい場合などに、とても便利です。