サイドバーに追加したウィジェットのデザインが合わないときに使えるプラグイン

どうも、スマコマのコマ太郎です。元気もりもり

プラグインで追加されたウィジェットを使うとテーマ(テンプレート)のデザインと合わなくて、困っていませんか?

テーマは、既存のウィジェットとそれ自身のウィジェットに対してデザインが組み込まれていますが、それ以外のウィジェットには適用されないのが普通です。

だから、折角使いたい機能のあるプラグインを入れても、素っ気ないデザインのサイドバーになってしまうので、使うのを諦めてしまったという人も多いかもしれませんね。

この問題の解決策は、追加したウィジェットで指定されている class に対し、スタイルシートを追加するしかありません。でもこれって面倒だし、普通はできない人も多いことでしょう。

そんなときに試してみたいプラグインが1つあります。

ウィジェットに任意のclass名を追加できるプラグイン

ウィジェットには、それぞれ固有の class名が付与されています。テーマのデザインが合わないのは、新しく追加したウィジェットの class のスタイルシートがないからです。

だから新しくスタイルシートを追加する必要があるのですが、多くのウィジェットは既存のウィジェットと似たような構造になっています。例えば、新着記事やカテゴリー、タグクラウドなどで、これらの機能追加版であるなら、試す価値ありです。

意外とパッツリとハマることもありますよ。

Widget CSS Classes をインストールする

まずは、「Widget CSS Classes」をインストールしてください。

Widget CSS Classes

Widget CSS Classes

プラグインのインストール方法の解説は不要かと思いますが、もし分からない場合は、「Widget CSS Classes」をコピペしてから、こちらの記事をご覧くださいね。

あわせて読みたい記事
WordPressにプラグインをインストールする方法として3つありますが、この記事ではもっとも簡単に出来る方法をご紹介します。...

Widget CSS Classes の使い方

使い方は簡単です。class名を追加したいウィジェットの設定を開いて、class名を追加するだけです。

Widget CSS Classes の設定の場所

Widget CSS Classes の設定の場所

Widget CSS Classes の設定は、各ウィジェット設定の中に追加されています。

では1つ確認してみましょう。WordPress管理メニューの [外観]-[ウィジェット] を開き、設定を変更したいウィジェットの右にある [▼] をクリックしてください。

追加された Widget CSS Classes の設定

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 を適用できるので、わざわざ改めてスタイルシートを用意する必要がないので意外と使えます。

最悪でもボックスとタイトルのデザインだけ適用することもできるので、テーマのデザインと合わないというときに使ってみてくださいね。

 コメント/質問、お気軽にどうぞ。

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

関連記事

Widget Logic を使ってウィジェット表示を制御する

特定のページのサイドバーにあるウィジェットの表示を制御したいときに使えるプラグイ...

ユーザー名を偽装する

WordPressのログイン ユーザー名をセキュリティ向上のため隠すには?

増えてしまったリビジョンを一括で削除し、最適化できるプラグインWP-Optimi...

画像をポップアップ表示させるプラグイン

画像をクリックするとポップアップさせ、閉じるボタンも表示するプラグイン

「次のページ」ボタンを追加

WordPressの記事投稿画面に「次の記事」ボタンを追加するプラグイン

トップページにカルーセルを配置する

SiteOrigin を使ってカテゴリー単位のカルーセルを配置する