这个是自动切换版的,经过一番整理,代码容易看一些 —— 聚合标签、聚合面板、聚合tab 小工具。
随机、热评、最新文章小工具集合。
自定义小工具
加入functions.php自定义聚合面板小工具,可以单独写一个widget-tab-2.php文件
<?php // 聚合Tab-2 add_action('widgets_init', 'Inlo_Widget_Tabs2_init'); function Inlo_Widget_Tabs2_init() { register_widget('Inlo_Widget_Tabs2'); } class Inlo_Widget_Tabs2 extends WP_Widget { function Inlo_Widget_Tabs2() { $widget_ops = array('description' => '聚合多种小工具'); $this->WP_Widget('Inlo_Widget_Tabs2', 'INLO-聚合Tab-2', $widget_ops); } function widget($args, $instance) { extract($args); global $wpdb; $randtitle = strip_tags($instance['randtitle']); $hottitle = strip_tags($instance['hottitle']); $newtitle = strip_tags($instance['newtitle']); $num = strip_tags($instance['num']); $days = strip_tags($instance['days']); $sticky = get_option( 'sticky_posts' ); echo '<div class="widget jv_tabb">'; ?> <h3 class="widget-title tab-title"><span class="selected"><?php echo $randtitle; ?></span><span><?php echo $hottitle; ?></span><span><?php echo $newtitle; ?></span></h3> <div class="tab-content"> <ul><?php $posts = query_posts(array('orderby' =>'rand','showposts'=>$num,'post__not_in' =>$sticky)); while(have_posts()) : the_post(); ?> <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo wp_trim_words(get_the_title()); ?></a></li><?php endwhile; wp_reset_query(); ?> </ul> <ul class="hide"> <?php $hotsql = "SELECT ID , post_title , comment_count FROM $wpdb->posts WHERE post_type = 'post' AND TO_DAYS(now()) - TO_DAYS(post_date) < $days AND ($wpdb->posts.`post_status` = 'publish' OR $wpdb->posts.`post_status` = 'inherit') ORDER BY comment_count DESC LIMIT 0 , $num "; $hotposts = $wpdb->get_results($hotsql); $hotoutput = ""; foreach ($hotposts as $post){ $hotoutput .= "\n<li><a href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". wp_trim_words($post->post_title)."</a></li>"; } echo $hotoutput; ?> </ul> <ul class="hide"><?php $posts = query_posts(array('orderby' =>'date','showposts'=>$num,'post__not_in' =>$sticky)); while(have_posts()) : the_post(); ?> <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo wp_trim_words(get_the_title()); ?></a></li><?php endwhile; wp_reset_query(); ?> </ul> </div> <?php echo "</div>\n"; } function update($new_instance, $old_instance) { if (!isset($new_instance['submit'])) { return false; } $instance = $old_instance; $instance['randtitle'] = strip_tags($new_instance['randtitle']); $instance['hottitle'] = strip_tags($new_instance['hottitle']); $instance['newtitle'] = strip_tags($new_instance['newtitle']); $instance['num'] = strip_tags($new_instance['num']); $instance['days'] = strip_tags($new_instance['days']); return $instance; } function form($instance) { global $wpdb; $instance = wp_parse_args((array) $instance, array('randtitle' => '随机文章','hottitle' => '热评文章','newtitle' => '最新文章','num' => '6','days' => '30')); $randtitle = strip_tags($instance['randtitle']); $hottitle = strip_tags($instance['hottitle']); $newtitle = strip_tags($instance['newtitle']); $num = strip_tags($instance['num']); $days = strip_tags($instance['days']); ?> <p><label for="<?php echo $this->get_field_id('randtitle'); ?>">随机文章标题:<input class="widefat" id="<?php echo $this->get_field_id('randtitle'); ?>" name="<?php echo $this->get_field_name('randtitle'); ?>" type="text" value="<?php echo $randtitle; ?>" /></label></p> <p><label for="<?php echo $this->get_field_id('hottitle'); ?>">热门文章标题:<input class="widefat" id="<?php echo $this->get_field_id('hottitle'); ?>" name="<?php echo $this->get_field_name('hottitle'); ?>" type="text" value="<?php echo $hottitle; ?>" /></label></p> <p><label for="<?php echo $this->get_field_id('newtitle'); ?>">最新文章标题:<input class="widefat" id="<?php echo $this->get_field_id('newtitle'); ?>" name="<?php echo $this->get_field_name('newtitle'); ?>" type="text" value="<?php echo $newtitle; ?>" /></label></p> <p><label for="<?php echo $this->get_field_id('num'); ?>">各类文章显示数量:<input class="widefat" id="<?php echo $this->get_field_id('num'); ?>" name="<?php echo $this->get_field_name('num'); ?>" type="text" value="<?php echo $num; ?>" /></label></p> <p><label for="<?php echo $this->get_field_id('days'); ?>">热评文章控制天数:<input class="widefat" id="<?php echo $this->get_field_id('days'); ?>" name="<?php echo $this->get_field_name('days'); ?>" type="text" value="<?php echo $days; ?>" /></label></p> <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" /> <?php } } ?>
css代码
/*小工具-聚合Tab2*/ #sidebar .tab-title span{background:#F9F9F9;width:25%;color:#666;border:1px solid #eee;border-bottom:0;display:inline-block;margin-right:1px; cursor:pointer;font-weight:normal;text-align:center} #sidebar .tab-title .selected{background:#737F99;cursor:default;color:#fff} #sidebar .tab-content{padding:10px 15px;border:1px solid #ddd} #sidebar .tab-content ul li{font-size:13px;padding:5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #sidebar .tab-content .hide{display:none}
js代码
分成两部分,一部分控制自动切换、一部分控制手动切换,看注释:
//聚合Tab-2效果 $(function() { // 自动切换 var o = 0; var timeInterval = 2000; var $cont = $(".tab-content ul"); var $title = $(".tab-title span"); $cont.hide(); $($cont[0]).show(); function auto() { o < $cont.length - 1 ? o++:o = 0; $cont.eq(o).fadeIn(800).siblings().hide(); $title.eq(o).addClass("selected").siblings().removeClass("selected"); } set = window.setInterval(auto, timeInterval); }); $('body').on('click','.tab-title span',function(){ //手动切换 jQuery(this).addClass("selected").siblings().removeClass(); jQuery(".tab-content > ul").eq(jQuery('.tab-title span').index(this)).fadeIn(500).siblings().hide(); });
以上。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4392.html