WordPress Popular Postsのタイトルを統一感のあるスタイルに変更する

この記事を書いた理由

ブログをやっている方の多くはウィジェットエリアに人気記事のランキングを表示するために、

WordPress Popular Posts(以下WPP)を使っていると思います。

しかし、WPPブロックのタイトルを設定してもデザインがしょぼくて全体の統一感がなく困っていませんか

「Popular Posts タイトル スタイル」などでグーグル検索してみると、

投稿記事のタイトルを追加CSSで変更する方法はよく見られますが、

WPPブロックのタイトルを変更する記事が見られなかったため、

ここにまとめたいと思います。

やりたいこと

何も考えずWPPのタイトルを設定すると赤枠のようなシンプルなデザインになってしまいます。

しかし当ブログのタイトルは画像のように緑地のタグで表示されるように設定されており、

このままWPPを設置していても統一感がなく気持ちわるいです。

このようにできれば統一感がありGoodです!

どうやるか

①WPPを表示したい場所にグループブロックを置きます

②グループブロック内に表示したいタイトルを見出し<h2>で作成します

③見出しブロックの下にWPPブロックを設置します

※このときタイトル欄には何も入力しないでください

グループの中身がこのような階層になっていたらOKです!

最後に

私はこのWPPのタイトルデザインを変更するために追加CSSをいじってみたり、

WordPressのカスタマイズをいろいろ変更してみたりと難しいことをいろいろやってみましたが全然ダメでした。

グループを作って見出しとWPPを入れて見たのは調べたわけでなく、

なんとなく試してみたところ偶然成功たので備忘録として残します!

おすすめの記事