WordPressウィジェットにカスタムスタイルを追加したいですか？
ウィジェットをスタイリングすることで、ブランディングの一貫性を保ち、ユーザーにとって重要な情報を強調することができます。
この投稿では、サイトを壊すことなくWordPressウィジェットにカスタマイザーを簡単に追加する方法を紹介する。
WordPressウィジェットにカスタマイザーを追加する3つの方法を紹介します。あなたに最適なものを選んでください。
- ブロックエディターを使ってWordPressウィジェットにカスタマイザーを追加する
- WordPressのクラシックウィジェットにカスタマイザーを追加する
- CSS Heroを使ってWordPressウィジェットにカスタマイザーを追加する（コードなし）
この投稿を始める前に、ウィジェットのスタイルを設定するためのCSSの知識が必須である。また、WordPressテーマにカスタムCSSを追加する必要があります。
CSSの代わりにコードを使わない方法をお望みなら、3の方法まで読み飛ばして構わない。
始めよう。
ブロックエディターを使ってWordPressウィジェットにカスタマイザーを追加する
WordPressのウィジェットは、ブロックエディターを使ってウィジェット対応エリアやサイドバーにウィジェットやブロックを追加できるようになりました。
ウィジェット用のブロックエディターを使う利点の一つは、各ブロックにカスタマイザー・クラスを簡単に追加できることです。
外観 ” ウィジェットページに行き、カスタムスタイルを追加したいウィジェットをクリックするだけです。
次に、ブロックパネルの下のAdvancedタブまでスクロールダウンする必要があります。ここからカスタムCSSクラスを追加できます。
更新ボタンをクリックして変更を保存することを忘れないでください。
これで、WordPressテーマに特定のCSSクラスをターゲットにしたカスタマイザーを追加できる。
外観 ” カスタマイザーページに行き、追加CSSタブに切り替えるだけです。あなたのサイトのライブプレビューが表示され、CSSルールを追加するボックスが表示されます。
注：外観メニューの下にカスタマイズが表示されない場合は、WordPress管理画面のテーマカスタマイザーが表示されないのを修正する方法の投稿をご覧になるか、WPCodeプラグインを使用してカスタムCSSを追加してください。
以下は、私たちが使用した基本的なCSSです。
.latest-articles {
background-color:#def4f1;
padding:10px;
}
カスタムCSSを追加した後、サイトをプレビューしてその動作を確認することができます。
ブロック・エディター・ウィジェットを使用する際に問題となるのは、対象となる適切なブロックを見つけることである。
より簡単な方法は、ブロックをグループブロックに追加して、簡単にまとめてスタイルを設定することです。ブロックのグループ化については、WordPressブロックエディターの使い方ガイドをご覧ください。
WordPressのクラシックウィジェットにカスタマイザーを追加する
この方法は、WordPressサイトで古いクラシックウィジェットを使用している場合に適しています。
この方法では、Widget Optionsプラグインをインストールして有効化する必要がある。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
Widget Optionsは、WordPressのウィジェットに追加オプションを追加する強力なプラグインです。これには、ユーザー端末、権限グループ、その他の条件に基づいてウィジェットを表示したり非表示にしたりする機能が含まれます。
プラグインはまた、WordPressウィジェットにカスタマイザークラスを追加するオプションを追加します。
外観 ” ウィジェットページに行き、カスタムスタイルを追加したいウィジェットをクリックするだけです。
ウィジェット設定では、幅広いオプションが表示されます。ここから、カスタムCSSクラスを追加するには、歯車アイコンをクリックする必要があります。
設定が完了したら、保存ボタンをクリックしてウィジェット設定を保存することを忘れないでください。
入力したCSSクラスを使って、テーマにカスタムCSSルールを追加できるようになりました。例えば、テストサイトでは以下のCSSを使用しました。
.latest-articles {
background-color:#def4f1;
padding:10px;
}
テストサイトではこのように表示された。
CSS HeroでWordPressウィジェットにカスタマイザーを適用する
上記の2つの方法の1つの問題は、CSSコードを書く必要があるということです。しかし、すべてのユーザーがCSSを知っているわけではないし、自分でコードを書きたくないだけなのだ。
そんなときは、CSS Heroを使えばいい。これはWordPressスタイリングのカスタム・プラグインで、コードを書かずにWordPressテーマにカスタムCSSを追加できる。
まず、CSS Heroプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化すると、WordPress管理画面のツールバー上部に新しいメニュー項目が追加されます。
次に、スタイル設定したいウィジェットが表示されているページにアクセスし、上部にあるCSS Heroボタンをクリックする必要があります。
これでCSSヒーローエディターインターフェースでページが開きます。
ライブエディターで、サイト上の項目をポイント＆クリックするだけで、そのスタイルを変更できる。
スタイル設定したいウィジェットにマウスオーバーし、クリックして選択するだけです。
その後、左側のメニューを使って、好きなようにウィジェットをスタイルすることができます。
これには、グラデーション、タイポグラフィ、パディング、マージン、枠線などの高度なスタイル設定オプションが含まれます。
設定が完了したら、Saveボタンを押して設定を保存することをお忘れなく。
サイトをプレビューして、変更を確認することができます。
この投稿がWordPressウィジェットにカスタマイザーを追加する方法を学ぶのにお役に立てば幸いです。また、WordPressウィジェットの便利な使い方や、コードを書かずにWordPressのカスタムテーマを一から作成するガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ankush says
The Plugin was really Great but I had a problem…
It doesn’t work when i add custom css….
May be plugin css is overriding my code but.. that really sad…
Hey Wpbeginner.com Team.. Please leave me a reply,]
I You can tell me how to fix it…
Rachael says
I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?
Regina says
Does how to instructional above also also include the ability to customize the font of the widget titles?
Thanks!
terry says
Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.
Thanks
Alex says
I don’t have any classes on widgets.
irfan says
There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this
Thomas says
Hi, I tried to do it manually, inspected the element and its class but it did not work.
I am trying to change the style of a WPform.
Could you help me?
WPBeginner Support says
Hey Thomas,
Please take a look at this guide on how to add custom css to WPForms.
管理者
daniel says
i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.
WPBeginner Support says
Hey Daniel,
You’ll need to use place the widget code before your menu and then add custom CSS to position it.
管理者
Deniz Kumru says
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan says
Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.
Rimi says
hallo
I can not make any changes because it is inactive
Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas
Grace says
Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks
WPBeginner Support says
No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.
管理者
Mr.T says
I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?
Erick says
I have the same question
Correen K says
I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options
Abhishek Prakash says
Will using these many CSS not impact the page speed?
WPBeginner Staff says
Not if you do it right.