三十路!

1_2_1

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

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

WordPress Popular Posts

WordPress Popular Posts
Developer: Hector Cabrera
Price: Free

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

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

^^

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

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

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

広告

Shortcodes Ultimate

Shortcodes Ultimate
Developer: various
Price: Free

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

カスタマイズ

サイドバーにぶち込む前提の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

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

・・・・

・・・・

いいよね?(フルエ)

コメント歓迎やで!(匿名可)

*

Return Top