CONTENTS
現在満枠のためご新規様のご相談は5月以降のご予約となります。

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プラグインの新規追加
  1. プラグイン→新規追加
  2. 右上の検索窓に「Widget CSS Classes」と入力すると絞り込まれた検索結果が出る
  3. その中の対象のプラグインの「インストール」を押す
Widget CSS Classesプラグインの有効化(Activate)
  1. インストール完了すると「インストール」ボタンが「有効化(Activate)」ボタンに変わるのでそれを押します。

1-B:ダウンロードしてFTPからアップ

Widget CSS Classes 公式ページ

Widget CSS Classes公式ページ
  1. この公式ページからダウンロード
  2. ダウンロードしたファイルを解凍して展開
  3. FTPソフトを使ってwp-content/plugins にアップロードする
プラグイン一覧ページから有効化
  1. プラグイン一覧ページへいく
  2. 対象のプラグインを有効化

Widget CSS Classesの設定

[設定] – [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 IDID付与の有効化
Class Field Typeクラス追加フォームの種類
Predefined Classes定型クラスの追加

Widget CSS Classesの使い方

ウィジェット編集画面

[外観] – [ウィジェット]で、設置しているウィジェットを展開すると、「CSS Classes」という項目が追加されています。

ここに追加したいクラス名を記述して[保存]します。

ウィジェットに任意でクラスを追加して、それぞれ異なるデザインやCSSを適用した装飾をしたいという時に是非使ってみてください!

  • URLをコピーしました!

この記事を書いた人

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。

目次