
有时候我们不希望WordPress侧边栏过长,但是又想能展示多一些东西,那么将2个或者3个进行组合显示成了最佳选择,做个tab选项卡,把最新文章、热评文章、随机文章放在一个tab选项卡里,这样就能轻松实现我们想要的!
我简单讲下使用过程,高手就路过吧。特别提示:编辑代码请用编辑器,如DreamWeaver,请勿使用记事本。
请确保你网页已经包含了Jquery框架。
第一:将下面的代码的复制到主题的function.php文件中。这个是获取热评日志的函数,这里有专门文章介绍:WordPress热评日志的调用
// 获得热评文章function simple_get_most_viewed($posts_num=10, $days=60){ global $wpdb; $sql = SELECT ID , post_title , comment_count FROM $wpdb- posts WHERE 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 .= \n li a\ .get_permalink($post- ID). \\ bookmark\\ .$post- post_title. ( .$post- comment_count. 条评论)\ . mb_strimwidth($post- post_title,0,30). /a /li echo $output;第二:将下面的代码保存为r_tab.php,放到主题的文件夹下面。
h3 span 'numberposts=100');foreach($myposts as $post): ? li a?php the_permalink(); ?bookmark详细阅读 ?php the_title_attribute(); ? ?php echo cut_str($post- post_title,30); ? /a /li ?php endforeach; ? /ul ul 'numberposts=10rand');foreach($myposts as $post): ? li a?php the_permalink(); ?bookmark详细阅读 ?php the_title_attribute(); ? ?php echo cut_str($post- post_title,30); ? /a /li ?php endwhile;endif; ? /ul /div第三:打开sidebar.php,将下面的代码插入合适位置
divtab-title ?php include('r_tab.php'); ? /div第四:JQuery控制切换的代码
scripttext/javascript jQuery(document).ready(function(){jQuery('#tab-title span').click(function(){ jQuery(this).addClass( selected ).siblings().removeClass(); jQuery( #tab-content ul ).slideUp('1500').eq(jQuery('#tab-title span').index(this)).slideDown('1500'); /script第五:CSS
#tab-title .selected{color:#000;font-weight:bold}#tab-title span{padding:5px 18px 8px 1px;border-right:0px;margin-left:-1px;cursor:pointer;}#tab-content .hide{display:none;}#tab-content ul{padding:5px 10px;overflow:hidden;border-right:1px solid #ccc;border-left:1px solid #ccc;background:#fff;}#tab-content ul li{line-height:25px;list-style:none}好了,这样应该就能达到想要的效果了,当然实际效果还要自己根据自己的主题进行微调。