三十路!

おいさんが調べたことメモってるブログ。

1_2_1

WordPress Popular Posts の CSS をカスタマイズして複数タブ化する方法。

WordPress Popular Posts の CSS をカスタマイズして複数タブ化する方法。

WordPress Popular Posts

WordPress Popular Posts
WordPress Popular Posts

初期のデザインはシンプルすぎて、いまいちだったのでさくっとカスタマイズ!

うそつけwww とことん苦労してやんけwwwww

^^

ばれたwwwww ってことで完成すると、こんな感じになるわ。

snapcrab_2016-10-3_0-33-58_no-00

実際の動作はPC版のサイトの右サイドバーみてな! ってことで作成手順な。

Shortcodes Ultimate

Shortcodes Ultimate
Shortcodes Ultimate

おっとそうだ。複数のタブ化するのにこのプラグイン使ってるからインスコよろしく。ちゃんと、プラグインの更新もしてるし。いれといて大丈夫と思われ。

カスタマイズ

サイドバーにぶち込む前提のCSSだからそこんところよろしく!

.wpp-thumbnail {
 position: relative!important;
 float: left!important;
 overflow: hidden!important;
 width: 98px!important;
 height: 65px!important;
 margin: 0 10px 0 0!important;
 z-index: 1!important;
 background-color: rgba(0,0,0,0.1)!important;
}
.wpp-post-title {
 display: inline;
 line-height: 15px;
 padding: 0;
 margin-right: 6px;
 font-size: 11px;
 border: none !important;
}
.wpp-list li {
 border-bottom: 1px dotted rgba(32, 32,32, 0.3);
}
.wpp-list li:before {
 content: counter(wpp-ranking, decimal);
 counter-increment: wpp-ranking;
 position: absolute;
 /* top: 0px; */
 text-align: center;
 left: 0px;
 z-index: 2;
 color: #ffffff;
 width: 30px;
 height: 25px;
 background-color: #73C6B0;
 font-size: 15px;
}

テキストウィジェットには以下のコード

[Su_tabs]
 [Su_tab title="<strong>24時間</strong>"] [Su_animate type="fadeIn"] [Wpp range="daily" order_by="views" post_type="post" limit=10 title_length=60 stats_views=0 thumbnail_width=98 thumbnail_height=65][/su_animate][/su_tab]
 [Su_tab title="<strong>週間</strong>"] [Su_animate type="fadeIn"] [Wpp range="weekly" order_by="views" post_type="post" limit=10 title_length=60 stats_views=0 thumbnail_width=98 thumbnail_height=65][/su_animate][/su_tab]
 [Su_tab title="<strong>月間</strong>"] [Su_animate type="fadeIn"] [Wpp range="monthly" order_by="views" post_type="post" limit=10 title_length=60 stats_views=0 thumbnail_width=98 thumbnail_height=65][/su_animate][/su_tab]
 [Su_tab title="<strong>累計</strong>"] [Su_animate type="fadeIn"] [Wpp range="all" order_by="views" post_type="post" limit=10 title_length=60 stats_views=0 thumbnail_width=98 thumbnail_height=65][/su_animate][/Su_tab]
[/Su_tabs]

はい終了。使ってるパラメータ一応掲載。

パラメータ説明デフォルト値
range集計期間(”daily”, “weekly”, “monthly”, “all”)daily
order_byソート順
“comments”, “views”, “avg” (1日の平均閲覧数)
views
post_type投稿タイプ 投稿(post), 固定ページ(page)post,page
limit表示件数10
title_length記事タイトルの最大表示文字数25
stats_views閲覧数を表示(1), 非表示(0)表示(1)
thumbnail_widthサムネイル画像の幅15
thumbnail_heightサムネイル画像の高さ15

CSSは素人の付け焼き刃だからさ。多分変なところあると思う(確信)けどもwww

うごけばいいんだよ!(きり)

・・・・

・・・・

いいよね?(フルエ)

コメント歓迎やで! (匿名可)
私はロボットありませんの左側にあるチェックマークを入れてから SEND 押してな!(スパム対策)

*

Return Top