動態Tab文章欄位小工具
原本的設定是 最新文章 顯示完後接續顯示熱門和隨機 但是這樣相當佔用版面 於是乎動手修改成動態的方式 方法如下
- 打開主題中的 sidebar.php 新增下述程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="widget_tabcontent"> <h3><span class="selected">最新文章</span> <span>熱門文章</span> <span>隨機文章</span></h3> <ul> <?php $post_query = new WP_Query('showposts=10'); while ($post_query->have_posts()) : $post_query->the_post(); $do_not_duplicate = $post->ID; ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile;?> </ul> <ul class="hide"> <?php tangstyle_get_most_viewed(); ?> </ul> <?php if ( is_home()) { ?> <ul class="hide"> <?php $rand_posts = get_posts('numberposts=10&orderby=rand'); foreach( $rand_posts as $post ) : ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> <?php } ?> <?php if ( is_home()) { ?><?php wp_list_bookmarks('title_before=<h3>&title_after=</h3>&category_before=<div id=%id class="linkcat widget">&category_after=</div>'); ?><?php } ?> <?php endif; ?> </div> |
- 找到主題用的JS Libray 檔案並新增
1 2 3 4 5 6 7 |
//動態Sidebar中的Tab設定 jQuery(document).ready(function($){ $('.widget_tabcontent h3 span').click(function(){ $(this).addClass("selected").siblings().removeClass(); $(".widget_tabcontent > ul").slideUp('1500').eq($('.widget_tabcontent h3 span').index(this)).slideDown('1500'); }); }); |
- 依照自己主題調整 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*側邊欄文章Tab樣式*/ .widget_tabcontent { margin-bottom: 10px; color: #666; padding: 10px 10px 0 10px; overflow: hidden } .widget_tabcontent h3 span { cursor:pointer; font-size: 18px; margin: 0 -10px 0 -10px; padding: 5px 15px 10px 10px; text-shadow: 0 2px 0 #EEE } .widget_tabcontent h3 span:hover { color:#D54E21; } .selected { color:#D54E21; } /*標題被選中時的樣式*/ .widget_tabcontent .hide { display:none; } /*默認讓第一塊內容顯示,其余隱藏*/ .widget_tabcontent ul li:hover { background-color:#EEE; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; cursor:pointer; } .widget_tabcontent ul { padding-top: 10px } .widget_tabcontent li { line-height: 20px; padding: 0 0 5px 8px; margin-bottom: 5px; border-bottom: 1px dashed #e0e0e0 } |
效果圖
相逢就是有緣,留下足跡吧!