WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
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を利用している場合に有効です。
末尾番号はそれぞれ変わるため、サイドバーのウィジェットタイトルの上で「左クリック」→「検証」
タイトル上コードから番号を割り当ててください。
アイコンは、Font Awesomeの最新バージョンを使用しています。content:""の中を変更すれば、お好きなアイコンを指定できます。
※.専用コードの前に「\」を入れるのを忘れずに。
サイト内で使えるようにするには、以下を読み込ませる必要があります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">headタグに読み込ませる
当サイトテーマSWELL
のように、テーマ側のカスタマイザーにhead項目があればそちらに貼り付けてください。
テーマ側にない方はFTPソフトなどで、親テーマから「header.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');| アイコン | コード |
|---|---|
| f201 | |
| e473 | |
| e0e3 | |
| e561 | |
| f681 |
使えそうなアイコンをピックアップしました。
ちなみに、当サイトテーマSWELLでは、最初からFont Awesomeを使用できます。
見出しタイトルにアイコンを入れる
.popular-posts h2:before {
content: "\f201";
font-family: "FontAwesome";
padding-right: 5px;
}
ブロックウィジェットをお使いの方は、タイトルブロックにアイコンを入れる必要があります。
デフォルトではh2タグとなっていますので、変更する場合は、上記のh2部分も合わせてください。
ランキング順位を入れる
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;を追記してください。
アイキャッチ画像の中にランキングを入れる
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の中身が少し変わっています。
ランキングを三角形にする
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行目で数字の指定をしています。
アイキャッチ画像のカスタマイズ
.popular-posts img{
}上記の中にお好きな指定をしてください。
例えば、マウスホバー時の挙動、画像に影をつける、画像サイズなどを指定できます。
記事タイトルのカスタマイズ
.popular-posts .wpp-post-title{
}上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラー、アンダーバーの有無などを指定できます。
記事抜粋のカスタマイズ
.popular-posts .wpp-excerpt{
}上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。
ビュー数のカスタマイズ
.popular-posts .wpp-views{
}上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。
コメントのカスタマイズ
.popular-posts .wpp-comments{
}上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。
投稿者のカスタマイズ
/* 投稿者全体 */
.popular-posts .wpp-author{
}
/* 投稿者の名前のみ */
.popular-posts .wpp-author a{
}上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラー、リンク無効、リンク下線の有無などを指定できます。
/* リンク無効 */
pointer-events: none;
/* リンクの下線を消す */
text-decoration: none;
/* リンクに下線を引く */
text-decoration-line;日付のカスタマイズ
.popular-posts .wpp-date{
}上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラーなどを指定できます。
タクソノミー(カテゴリー&タグ)のカスタマイズ
/* タクソノミー全体 */
.popular-posts .wpp-category{
}
/* タクソノミーのリンクのみ */
.popular-posts .wpp-category a{
}上記の中にお好きな指定をしてください。
例えば、フォントサイズ、カラー、リンク無効、リンク下線の有無などを指定できます。
結論：WordPress Popular Postsのカスタマイズはclassがわかれば自由に変更できる
以上、WordPress Popular PostsのCSSカスタマイズについて解説しました。
これくらいわかっていれば、ある程度自由にカスタマイズできると思います。
ぜひお好みの人気ランキングを作ってみてください。
最後に、当サイトテーマSWELLでは、標準機能で人気記事ランキングを表示できます。
→詳細はこちらで解説しています。
設定方法やブロックの使い方はこちら
この記事が気に入ったら
フォローしてね！
記事への質問等はこちらからどうぞ