動態Tab文章欄位小工具

原本的設定是最新文章顯示完後接續顯示熱門和隨機但是這樣相當佔用版面於是乎動手修改成動態的方式方法如下

打開主題中的 sidebar.php 新增下述程式碼

<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 rel="nofollow" target="_blank" rel="nofollow" target="_blank" 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 rel="nofollow" target="_blank" rel="nofollow" target="_blank" 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>

<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>

<?php tangstyle_get_most_viewed(); ?>

</ul>

<?php if ( is_home()) { ?>

<?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 檔案並新增

//動態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');
});
});

//動態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

/*側邊欄文章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
}