有时候我们希望在侧栏放更多内容,但是容易让侧栏显得过长。网上比较常见的做法是,用 Tab 选项卡的形式将多个小工具合并到一起,例如热门文章、最新文章、随机文章等等,这样同样的空间包含的内容更多,用户体验也增强不少。
网上可以下到不少类似的插件,也有很多非插件的实现方式。我使用了William同学WordPress侧边栏JQuery版TAB选项卡文章中介绍的方法来实现,效果可以看我的博客侧栏:
下面讲讲具体的实现步骤,主要分成三块内容:PHP部分、JQuery切换实现以及 CSS样式。
PHP添加 Tab 内容
如上图所示,在选项卡中有一栏是热评文章,它根据文章的评论数来排列热门文章,Wordpress 默认并没有提供该功能。所以需要自己来实现,将以下代码放到主题目录下的 function.php 文件中:
// 获得热评文章 function wpex_get_most_viewed($posts_num = 10, $days = 60) { global $wpdb; $sql = "SELECT ID , post_title , comment_count FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' AND TO_DAYS(now()) - TO_DAYS(post_date) < $days ORDER BY comment_count DESC LIMIT 0 , $posts_num "; $posts = $wpdb->get_results($sql); $output = ""; foreach ($posts as $post) { $output .= "<li><a href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". wp_trim_words($post->post_title, 30)."</a></li>"; } echo $output; }
wpex_get_most_viewed函数用来获取最近N天的评论数最多的M篇文章。
接下来,将下面的代码放到主题目录下的 sidebar.php 文件中,这段代码主要描述了侧栏小工具的结构:
<div class="sidebar-box tabber-widget"> <div class="tabber-title"> <ul class="tabnav clr"> <li class="selected">最新文章</li> <li class="">热评文章</li> <li class="">随机文章</li> </ul> </div> <div class="tabber-content"> <ul><?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post): ?> <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo wp_trim_words($post->post_title,30); ?></a></li> <?php endforeach; ?></ul> <ul class="hide"><?php wpex_get_most_viewed(10, 180); ?></ul> <ul class="hide"><?php $myposts = get_posts('numberposts=10&orderby=rand');foreach($myposts as $post): ?> <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo wp_trim_words($post->post_title,30); ?></a></li> <?php endforeach; ?></ul> </div> </div>
JQuery 实现切换Tab
Tab 选项卡的最重要的一个功能点是,点击标签可以切换到对应的内容。我们可以选择用JQuery来实现切换的效果,这样代码会显得很干净和简单。
将以下的代码放到你自己的某个 js 文件中:
jQuery(function($) { $('.tabber-title li').click(function() { var $cur_tab = $(this); var $tabber = $cur_tab.parents('.tabber-widget'); $cur_tab.addClass("selected") .siblings().removeClass("selected"); $tabber.find('.tabber-content ul').slideUp('fast') .eq($tabber.find('.tabber-title li').index(this)).slideDown('fast'); });});
CSS 美化样式
现在我们要给 Tab 选项卡披上一件漂亮的衣服,这件衣服可能并不适合每个人,所以需要根据自己的情况调整改进。
将以下代码放到主题目录下的 style.css 文件中:
/* Tabber widget */ .tabber-title {margin:0 0 15px} .tabnav { color: #000; font-weight: bold; font-size: 14px; border-bottom: 1px solid #ddd; } .tabnav li { float:left; width:86px; height:30px; line-height:30px; border:1px solid #ddd; border-bottom:none; text-align:center; cursor:pointer; margin-left:10px; color: #666; } .tabnav .selected { cursor:default; background: #efefef; color: #000; } .tabber-content .hide {display:none;} .tabber-content ul {overflow:hidden;list-style:none} .tabber-content li {overflow:hidden;padding-bottom: 2px;} .tabber-content {padding: 0 10px;}
到此就大功告成了,你也可以举一反三,将其它内容放到 Tab 选项卡中。
Hello to all
In this puzzling continuously, I honey you all
Rise your one's nearest and friends
哈哈 这个有点意思 哈哈 你博客还这牛逼啊
没有效果哈!
@烂番茄网:自己检查下,看看是不是哪里搞错了