WordPressでウィジェットをデザインしたいなら！ウィジェットにCSSクラス名を追加できるプラグイン「Widget CSS Classes」
Widget CSS Classesというプラグインは、各箇所のウィジェットの吐き出されるHTML要素にCSSクラスを付与することができるようになるWordPressプラグインです。
ウィジェット毎にCSSでデザインをあてて装飾したい時に使えるプラグインなので是非使ってみてください。
WordPressでは、テーマファイルに直にソースを書いてしまうとそのテーマの更新を行った時に、せっかくカスタマイズしたコードが消えてしまうというリスクがあります。
そのため、基本的には子テーマを使ってカスタマイズを行います。
ですが、ウィジェットで吐き出される要素はテーマからも直接変更することができないため、このプラグイン「Widget CSS Classes」が役に立つんです！
目次
Widget CSS Classesプラグインのインストール
インストール手順は以下の通りで、プラグインの新規追加をするか公式ページからダウンロードしてFTPソフトを使ってアップします。
1-A：プラグインの新規追加
- プラグイン→新規追加
- 右上の検索窓に「Widget CSS Classes」と入力すると絞り込まれた検索結果が出る
- その中の対象のプラグインの「インストール」を押す
- インストール完了すると「インストール」ボタンが「有効化（Activate）」ボタンに変わるのでそれを押します。
1-B：ダウンロードしてFTPからアップ
- この公式ページからダウンロード
- ダウンロードしたファイルを解凍して展開
- FTPソフトを使ってwp-content/plugins にアップロードする
- プラグイン一覧ページへいく
- 対象のプラグインを有効化
Widget CSS Classesの設定
[設定] – [Widget CSS Classes]で、プラグインの設定を行います。
| Add Widget Number Classes | ウィジェットナンバーのクラスを追加(例：widget-1) |
| Add First/Last Classes | 最初と最後のウィジェットにクラスを追加(例：widget-first) |
| Add Even/Odd Classes | 奇数番目・偶数番目を識別するクラスを追加(例：widget-odd) |
| Show Additional Field for ID | ID付与の有効化 |
| Class Field Type | クラス追加フォームの種類 |
| Predefined Classes | 定型クラスの追加 |
Widget CSS Classesの使い方
[外観] – [ウィジェット]で、設置しているウィジェットを展開すると、「CSS Classes」という項目が追加されています。
ここに追加したいクラス名を記述して[保存]します。
ウィジェットに任意でクラスを追加して、それぞれ異なるデザインやCSSを適用した装飾をしたいという時に是非使ってみてください！
