前提・実現したいこと
WordPressの記事をランキング形式で表示するプラグインPopular Postsで
文字列としてランキングと一緒に記事ごとにカテゴリー名を表示させたい。
CSSの装飾もカテゴリーごとに変えたいです。
また、1つの投稿に2つのカテゴリを設定してるので2つ表示させたい。
テーマはtwentyninteenを使っています。
該当のソースコード
index.phpのソース
<article> <?php echo do_shortcode('[wpp range=last10days thumbnail_width=150 thumbnail_height=150 limit=10 stats_views=0]'); ?> </article>
/*ランキング順位表示*/ ul.wpp-list li { border-bottom: 1px dashed #77776E; position: relative; list-style: none; } /*記事タイトル*/ ul.wpp-list li a.wpp-post-title { display: block; text-decoration: none; font-size: 15px; color: #333; margin: 10px 10px 10px 0px; } ul.wpp-list li a.wpp-post-title:hover { color: #3fa3ff; } /*アイキャッチ*/ ul.wpp-list li img { margin: 10px; } /*ランキングカウンター*/ ul.wpp-list li:before { content: counter(wpp-count); display: block; position: absolute; font-size: 13px; font-weight: bold; color: #fff; background-color: #555; padding: 3px 10px; border-radius:50%; z-index: 1; } /*カウント数*/ ul.wpp-list li { counter-increment: wpp-count; } /*ランキング1〜3の色変更*/ ul.wpp-list li:nth-child(1):before{ background-color: #EFAF00; } ul.wpp-list li:nth-child(2):before{ background-color: #9EACB4; } ul.wpp-list li:nth-child(3):before{ background-color: #BA6E40; }
Popular Posts内
<h2></h2> <ul class="wpp-list wpp-tiles"> <li class="{current_class}">{thumb}<div class="wpp-post-data">{taxonomy} {title}{category}</div></li> </ul>
カテゴリーのCSS
.cat1 a { font-size:12px; background:red; color:#fff; display:block; text-decoration:none; text-align:center; }
カテゴリーは投稿のところで設定してあります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。