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

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

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

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

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

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

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

こんな場合におススメ

  • ウィジェットにCSSクラスを追加したい
プラグインを使ってできること

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

インストール

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

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

Widget CSS Classes

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

関連記事

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

WordPressのプラグインをインストールする方法

ウィジェットにCSSを設定する方法

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

    Widget CSS Classes 使用方法

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

    Widget CSS Classes 使用方法

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

    CSS

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

    Widget CSS Classes 使用方法

【Widget CSS Classes】の設定

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

    Widget CSS Classes 設定

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

  • STEP3
    保存
    項目を設定したら変更を保存します。
  • STEP4
    Import/Export
    『Import/Export』タブに切り替えると、保存した設定をインポート・エクスポートすることができます。

    Widget CSS Classes 設定

スポンサーリンク

動作確認環境

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

まとめ

  • 【Widget CSS Classes】は、ウィジェットに独自のCSSクラスを追加することのできるプラグイン。
  • 特定のウィジェットだけデザインを変更したい場合などに、とても便利です。
ウィジェットに独自のCSSクラスを追加する【Widget CSS Classes】の使い方
最新情報をチェックしよう!
スポンサーリンク