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

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

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

使いたいプラグインを入れても、デザインが崩れてしまっては台無し。
でも使うのをあきらめるのはもったいない。
プラグインで指定されているCSSを書き換えるなり追記すればなんとかなるのでしょうが、正直ちょっとめんどくさい……。

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

Widget CSS Classes】は、各ウィジェットに独自のCSSクラスを追加することのできるプラグイン。
特定のウィジェットだけデザインを変えたい場合などに、とても便利です。

こんな場合におススメ

  • ウィジェットにCSSクラスを追加したい

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

  • ウィジェットに任意のCSSクラス・IDを追加できるようになる

インストール

Widget CSS Classes インストール

  1. 管理画面から プラグイン > 新規追加 とクリックする
  2. Widget CSS Classes“で検索する
  3. “今すぐインストール”をクリック。インストール後、有効化する

または、配布サイトからダウンロードして、インストール。
– WordPress プラグイン | WordPress.org

手動でインストールする方法はコチラ
WordPressのプラグインをインストールする方法WordPressのプラグインをインストールする方法

使用方法

プラグインを有効化すると、各ウィジェットにCSSクラス名を追加できるテキストフィールド『CSS Classes』が追加されるので、任意のクラス名を記述してください。
Widget CSS Classes ウィジェット

設定

Widget 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 IDIDを指定できるようにするかの選択
Class Field TypeウィジェットにCSSクラスを定義するためのフィールドタイプを選択
Text:ウィジェットに表示されたテキストフィールドからクラスを定義する
Predefined:事前にクラスを定義し、チェックボックスで選択できるようにする
Both:Text・Predefinedの両方
None:なし
Predefined ClassesPredefined・Bothを選択した場合にのみ有効になる
ここで追加したいクラスを定義する
Fix widget parametersウィジェットのパラメータを修正するかの選択
Remove duplicate classes重複したクラスを削除するかの選択
Translate classesクラスを翻訳するかの選択

ウィジェットにCSSクラスを追加するだけなら、特に設定をいじる必要はないと思います。

Import/Export

Widget CSS Classes 設定
保存した設定をインポート・エクスポートすることができます。

動作確認環境

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

まとめ

  • 【Widget CSS Classes】は、ウィジェットに独自のCSSクラスを追加することのできるプラグイン。
  • 特定のウィジェットだけデザインを変更したい場合などに、とても便利です。

ランキングに参加しています。

にほんブログ村 IT技術ブログ WordPressへ
クリックしていただけると、ブログ更新の励みになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA