動態Tab文章欄位小工具

共计 1880 个字符，预计需要花费 5 分钟才能阅读完成。

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

• 打開主題中的 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 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 檔案並新增

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

效果圖