这两天一直在折腾wordpress的侧边栏，基本功能都实现得差不多了。但总还觉得有些不足，就像先看看童鞋所说的折腾点其它功能出来吧。我自然也是不满足于此，正好在木木童鞋小站看到jQuery之Tab切换代码改进这篇文章，于是便想拿过来用在自己的侧边栏，所以便有了下面的折腾过程。所以核心代码都来自于木木童鞋，想要进一步了解的，自己去看看吧。我所做的只是让更多像我这样的小白更加容易操作些，毕竟高手都是言简意赅的，具体实现的目标如我右边的侧边栏所示。
一、首先在自己主题文件下的header.php的head标签里加载jquery库。首先可以先检查下自己的主题是否有jquery.js这个文 件，一般主题本身就带有，像我的主题里就有在/wp-content/themes/shadowblue/lib/里，如果有的话，在head标签里会 看到这样的语句：
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/lib/jquery-1.4.2.min.js"></script> |
这就算是已经加载了，如果没有找到也不要紧，也不用放到自己的主机上，google上就有，只要添加如下的语句到head标签里就可以了：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
二、接下来就是侧边栏的html代码了，我选用了较常用的“最新文章”、“近期热评”、“热门标签”三个栏目作为Tab切换。
<h3><span class="selected">最新文章</span><span>近期热评</span><span>热门标签</span></h3> |
<ul><?php wp_get_archives('type=postbypost&limit=10'); ?></ul> |
<ul class="hide"><?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10"); |
foreach ($result as $post) {setup_postdata($post); $postid = $post->ID; $title = $post->post_title; $commentcount = $post->comment_count; |
if ($commentcount != 0) { ?> |
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>"> |
<?php echo $title ?></a> (<?php echo $commentcount ?>)</li> |
<ul class="hide"><?php wp_tag_cloud('smallest=6&largest=18'); ?></ul> |
对照效果图，自己琢磨琢磨代码就明白其中的意义了。
三、CSS美化，添加下面的代码到主题里style.css文件里：
#sidebar-tab{border:0px;margin-bottom:1.5em;overflow:hidden;} |
#tab-title h3{color:#666;font-size:15px;font-weight:400;} |
#tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/ |
#tab-title span{padding:5px 9px 5px 9px;border:0px;border-right:0px;margin-left:-1px;cursor:pointer;} |
#tab-content .hide{display:none;} /*默认让第一块内容显示，其余隐藏*/ |
#tab-content ul{padding:5px 5px;overflow:hidden;} |
#tab-content ul li{padding-top:5px;overflow:hidden;} |
因为这个是和我的主题相适的，所以要用的话，简单的修改是必要的。至此已经完成一大半了，就差切换了，赶紧利用jquery来实现吧。
四、jQuery控制码。新建一个文本文件，添加如下代码：
jQuery(document).ready(function($){ |
$('#tab-title span').mouseover(function(){ |
$(this).addClass("selected").siblings().removeClass(); |
$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide(); |
然后另存为.js文件，例如ifenwen.js。然后上传到服务器任意目录下，例如我上传到的位置是：/wp-content/themes /shadowblue/lib/，也就是和上面讲的jquery在一个文件夹下，然后再在主题header.php的head标签里添加如下的代码：
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/lib/ifenwen.js"></script> |
这样就大功告成了，赶紧看看效果去吧。
上面讲的主要是针对我的主题所做的一点点修改，核心代码均来自于木木童鞋，有需要的童鞋可以自行察看，当然欢迎与我交流，乐意效劳~~~
😀