有时候我们不希望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 post_type = 'post' 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 href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". mb_strimwidth($post->post_title,0,30)."</a></li>"; } echo $output; }
第二:将下面的代码保存为r_tab.php,放到主题的文件夹下面。
<h3><span class="selected">最新日志</span><span>热评日志</span><span>随机日志</span></h3> <div id="tab-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 cut_str($post->post_title,30); ?></a></li> <?php endforeach; ?></ul> <ul class="hide"><?php simple_get_most_viewed(); ?></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 cut_str($post->post_title,30); ?></a></li> <?php endwhile;endif; ?></ul> </div>
第三:打开sidebar.php,将下面的代码插入合适位置
<div id="tab-title"><?php include('r_tab.php'); ?></div>
第四:JQuery控制切换的代码
<script type="text/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}
好了,这样应该就能达到想要的效果了,当然实际效果还要自己根据自己的主题进行微调。
本文固定链接: https://www.weisay.com/blog/wordpress-jquery-tab.html | 威言威语
Parse error: syntax error, unexpected T_ENDWHILE in /www/web/test_heminjie_com/public_html/wp-content/themes/sahifa/r_tab.php on line 1
不知道怎么,加了这句后老是报错,一步一步照着做的,奇怪····博主帮忙看看哈~~~谢谢~~
呵呵,我还把标签弄到一块了,总共4个,可是我还想把评论搞到一块总是出错,能解惑吗?站点是503.hk我弄的新站
我按此方法修改了一下,这个“三合一”的效果显示在正文里面。想请教一下,怎么使用wordpress“小工具”,把他调用到侧边栏里?
谢谢啊,这个方法整理的很完善了,借用下这个思路!
这个功能不错,如果加在自定义widget应该怎么弄
@皇家元林这个世界将代码加载sidebar.php里面就行了