MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

WordPress Popular PostsのCSSカスタマイズ

当ページのリンクには広告が含まれています。
WordPress Popular Posts CSSカスタマイズ

当記事では、WordPress Popular PostsのCSSカスタマイズ方法を紹介します。
基本的に各項目ごとに、指定するclassを解説しました。

カスタマイズする際の参考にしてください。

設定方法やブロックの使い方はこちら

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

WordPress Popular PostsのCSSカスタマイズ

ウィジェットサイドバーのタイトルにアイコンを入れる

ウィジェットタイトルにアイコン挿入
#custom_html-〇〇 .c-widget__title::before{
  content: "\f201";
  font-family: "FontAwesome";
  display: inline-block;
  position: relative;
  right: 5px;
}

#custom_html〇〇には、番号が入ります。
ウィジェットのカスタムHTMLを利用している場合に有効です。

ウィジェットカスタムHTML設定
ウィジェットカスタムHTMLの番号の見方

末尾番号はそれぞれ変わるため、サイドバーのウィジェットタイトルの上で「左クリック」→「検証
タイトル上コードから番号を割り当ててください

アイコンは、Font Awesomeの最新バージョンを使用しています。
content:""の中を変更すれば、お好きなアイコンを指定できます。
※.専用コードの前に「\」を入れるのを忘れずに。
サイト内で使えるようにするには、以下を読み込ませる必要があります

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

バージョン6.5.1は2024年3月時点で最新のものです。
アップデートがあった際は、この数値を変更すれば新しいアイコンを使えます。

headタグに読み込ませる

SWELLカスタマイザー

当サイトテーマのように、テーマ側のカスタマイザーにhead項目があればそちらに貼り付けてください。
テーマ側にない方はFTPソフトなどで、親テーマから「header.php」ファイルを子テーマへコピーする必要があります

headに読み込ませると、すべてのページに適用されます。

functions.phpから読み込む方法

functions.php編集
function enqueue_scripts(){
 wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

functions.phpも、すべてのページに適用されます。

アイコンコード
f201
e473
e0e3
e561
f681

使えそうなアイコンをピックアップしました。

ちなみに、当サイトテーマでは、最初からFont Awesomeを使用できます。

見出しタイトルにアイコンを入れる

WordPress Popular Posts見出しにアイコン挿入
.popular-posts h2:before {
  content: "\f201";
  font-family: "FontAwesome";
  padding-right: 5px;
}

ブロックウィジェットをお使いの方は、タイトルブロックにアイコンを入れる必要があります。
デフォルトではh2タグとなっていますので、変更する場合は、上記のh2部分も合わせてください。

WordPress Popular Postsウィジェットブロック

ランキング順位を入れる

WordPress Popular PostsランキングCSS
WordPress Popular Postsランキング丸CSS
ul.wpp-list li{
  counter-increment: wpp-ranking;
}

ul.wpp-list li::before{
  content: counter(wpp-ranking) "位";
  display: block;
  background: #000;
  color: #fff;
  width:35px;
  font-size: 13px;
  padding: 3px 8px;
  white-space: nowrap;
  text-align: center;
}

ul.wpp-list li:nth-child(1):before{
  background: #fcc732;
}
ul.wpp-list li:nth-child(2):before{
  background: #a0a0a0;
}
ul.wpp-list li:nth-child(3):before{
  background: #bf783e;
}

アイキャッチ画像の左上に順位を表示するパターンです。
2行目と6行目の()内は同じものを指定してください。
17行目以降で、ランキングの1〜3位までの背景カラーを指定しています。
背景を丸くする場合は、5行目の中にborder-radius:20px;を追記してください。

アイキャッチ画像の中にランキングを入れる

WordPress Popular Posts画像内ランキングCSS
ul.wpp-list li{
  counter-increment: wpp-ranking;
}

ul.wpp-list li::before{
  content: counter(wpp-ranking) "位";
  position:absolute;
  display: block;
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 2px 5px;
}

ul.wpp-list li:nth-child(1):before{
  background: #fdd35c;
}
ul.wpp-list li:nth-child(2):before{
  background: #a0a0a0;
}
ul.wpp-list li:nth-child(3):before{
  background: #bf783e;
}

5行目ul.wpp-list li::beforeの中身が少し変わっています。

ランキングを三角形にする

WordPress Popular Posts三角形ランキングCSS
ul.wpp-list li{
  counter-increment: wpp-ranking;
  position: relative;
}

ul.wpp-list li::before {
  display: block;
  position: absolute;
  content: "";
  left: -50%;
  top: 0;
  background-color: #000;
  width: 100%;
  height: 45%;
  transform: rotate(-45deg);
}

ul.wpp-list li::after{
  content: counter(wpp-ranking);
  position:absolute;
  left: 2.5%;
  top: 3%;
  color: #fff;
  font-size:15px;
}

ul.wpp-list li:nth-child(1):before{
  background: #fcc732;
}
ul.wpp-list li:nth-child(2):before{
  background: #a0a0a0;
}
ul.wpp-list li:nth-child(3):before{
  background: #bf783e;
}

三角形ランキングは、少し複雑です。
6行目で背景を指定、18行目で数字の指定をしています。

アイキャッチ画像のカスタマイズ

WordPress Popular Postsサムネイル画像CSS
.popular-posts img{

}

上記の中にお好きな指定をしてください。
例えば、マウスホバー時の挙動、画像に影をつける、画像サイズなどを指定できます。

記事タイトルのカスタマイズ

WordPress Popular Posts記事タイトルCSS
.popular-posts .wpp-post-title{

}

上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラー、アンダーバーの有無などを指定できます。

記事抜粋のカスタマイズ

WordPress Popular Posts 抜粋CSS
.popular-posts .wpp-excerpt{

}

上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。

ビュー数のカスタマイズ

WordPress Popular Posts ビュー数CSS
.popular-posts .wpp-views{

}

上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。

コメントのカスタマイズ

WordPress Popular Posts コメントCSS
.popular-posts .wpp-comments{

}

上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。

投稿者のカスタマイズ

WordPress Popular Posts 筆者CSS
/* 投稿者全体 */
.popular-posts .wpp-author{

}
/* 投稿者の名前のみ */
.popular-posts .wpp-author a{

}

上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラー、リンク無効、リンク下線の有無などを指定できます。

/* リンク無効 */ 
pointer-events: none;

/* リンクの下線を消す */
text-decoration: none;

/* リンクに下線を引く */
text-decoration-line;

日付のカスタマイズ

WordPress Popular Posts 
日付CSS
.popular-posts .wpp-date{

}

上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。

タクソノミー(カテゴリー&タグ)のカスタマイズ

WordPress Popular Posts 
タクソノミーCSS
/* タクソノミー全体 */
.popular-posts .wpp-category{

}
/* タクソノミーのリンクのみ */
.popular-posts .wpp-category a{

}

上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラー、リンク無効、リンク下線の有無などを指定できます。

タクソノミーでタグを選択しても、コードは同じです。
また表示は”カテゴリ:タグ名“となります。

結論:WordPress Popular Postsのカスタマイズはclassがわかれば自由に変更できる

以上、WordPress Popular PostsのCSSカスタマイズについて解説しました。

これくらいわかっていれば、ある程度自由にカスタマイズできると思います。
ぜひお好みの人気ランキングを作ってみてください。

最後に、当サイトテーマでは、標準機能で人気記事ランキングを表示できます。
→詳細はこちらで解説しています。

設定方法やブロックの使い方はこちら

WordPress Popular Posts CSSカスタマイズ

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次