どうも、スマコマのコマ太郎です。
プラグインで追加されたウィジェットを使うとテーマ（テンプレート）のデザインと合わなくて、困っていませんか？
テーマは、既存のウィジェットとそれ自身のウィジェットに対してデザインが組み込まれていますが、それ以外のウィジェットには適用されないのが普通です。
だから、折角使いたい機能のあるプラグインを入れても、素っ気ないデザインのサイドバーになってしまうので、使うのを諦めてしまったという人も多いかもしれませんね。
この問題の解決策は、追加したウィジェットで指定されている class に対し、スタイルシートを追加するしかありません。でもこれって面倒だし、普通はできない人も多いことでしょう。
そんなときに試してみたいプラグインが１つあります。
ウィジェットに任意のclass名を追加できるプラグイン
ウィジェットには、それぞれ固有の class名が付与されています。テーマのデザインが合わないのは、新しく追加したウィジェットの class のスタイルシートがないからです。
だから新しくスタイルシートを追加する必要があるのですが、多くのウィジェットは既存のウィジェットと似たような構造になっています。例えば、新着記事やカテゴリー、タグクラウドなどで、これらの機能追加版であるなら、試す価値ありです。
意外とパッツリとハマることもありますよ。
Widget CSS Classes をインストールする
まずは、「Widget CSS Classes」をインストールしてください。
Widget CSS Classes
プラグインのインストール方法の解説は不要かと思いますが、もし分からない場合は、「Widget CSS Classes」をコピペしてから、こちらの記事をご覧くださいね。
Widget CSS Classes の使い方
使い方は簡単です。class名を追加したいウィジェットの設定を開いて、class名を追加するだけです。
Widget CSS Classes の設定の場所
Widget CSS Classes の設定は、各ウィジェット設定の中に追加されています。
では１つ確認してみましょう。WordPress管理メニューの [外観]-[ウィジェット] を開き、設定を変更したいウィジェットの右にある [▼] をクリックしてください。
追加された Widget CSS Classes の設定
各ウィジェット設定の一番下に [CSS Classes:] という項目が追加されているはずです。ここに class名を入れるとウィジェットに class名が追加され、その class のスタイルシートが適用できるという仕組みです。
以下は WordPress に最初から入っているウィジェットの class 名の一覧です。似た構造のウィジェットのclass名を試してみてください。
もしピッタリ合いそうなウィジェットがなくてもまだ諦めるのは早いです。そんなときはとりあえず、テキストか検索を試してみてください。
少なくともサイドバーのボックスとタイトルのデザインは適用されるはずですよ。
WordPress の基本ウィジェットの class名一覧
| 最近の投稿 | widget_recent_entries |
|---|---|
| カテゴリー | widget_categories |
| アーカイブ | widget_archive |
| テキスト | widget_text |
| 検索 | widget_search |
| 最近のコメント | widget_recent_comments |
| ナビゲーションメニュー | widget_nav_menu |
まとめ
今回は、プラグインで追加されたウィジェットのデザインが崩れてしまうときに使えるプラグインをご紹介しました。
既存のデザインの class を適用できるので、わざわざ改めてスタイルシートを用意する必要がないので意外と使えます。
最悪でもボックスとタイトルのデザインだけ適用することもできるので、テーマのデザインと合わないというときに使ってみてくださいね。
↓↓
