最近几天都在调整网站，添加了一些Widget 侧栏小工具，简化插件。等等

1、侧栏换掉了登录插件，用自定义的；
2、聚合面板由于带有图片，也改成了不带图的，并且自动切换；
3、顶部高度缩小，与浏览器顶边不再保留边距；
4、部分字体改大一号；
5、友链互换页面不再于菜单栏显示。

wordpress小工具

wordpress插件

wordpress functions.php

下面主要是贴一段聚合面板切换的代码：
在functions.php注册小工具+切换用js脚本+CSS

注册小工具

  1. <?php
  2.     class jv_randomwidget extends WP_Widget {
  3.     function jv_randomwidget() {
  4.         $widget_ops = array('description' => '显示最新、热评、随机文章小工具');
  5.         $this->WP_Widget('jv_randomwidget', 'INLOJV-聚合面板', $widget_ops);
  6.     }
  7.     function widget($args, $instance) {
  8.         extract($args);
  9.         global $wpdb;
  10.         $newtitle = strip_tags($instance['newtitle']);
  11.         $hottitle = strip_tags($instance['hottitle']);
  12.         $randtitle = strip_tags($instance['randtitle']);
  13.         $num = strip_tags($instance['num']);
  14.         $days = strip_tags($instance['days']);
  15.         $sticky = get_option( 'sticky_posts' );
  16.         echo '<div class="slide-box jv-tab" id="sb_panel" style="overflow: hidden;">';
  17. ?>
  18. <ul class="tab-title"><span class="selected"><?php echo $newtitle; ?></span><span><?php echo $hottitle; ?></span><span><?php echo $randtitle; ?></span></ul>
  19. <div class="tab-content" style="margin-top:29px;">
  20.         <ul><?php $posts = query_posts(array('orderby' =>'date','showposts'=>$num,'post__not_in' =>$sticky)); while(have_posts()) : the_post(); ?> 
  21.             <li><a class="sb-border" 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(); ?>
  22.         </ul>
  23.         <ul class="hide">
  24.         <?php
  25.             $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 ";
  26.             $hotposts = $wpdb->get_results($hotsql);
  27.             $hotoutput = "";
  28.             foreach ($hotposts as $post){
  29.             $hotoutput .= "\n<li><a class=\"sb-border\" href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". wp_trim_words($post->post_title)."</a></li>";
  30.             }
  31.             echo $hotoutput;
  32.          ?>
  33.     </ul>
  34.         <ul class="hide"><?php $posts = query_posts(array('orderby' =>'rand','showposts'=>$num,'post__not_in' =>$sticky)); while(have_posts()) : the_post(); ?> 
  35.             <li><a  class="sb-border" 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(); ?>
  36.         </ul>
  37.     </div>
  38. <?php   
  39.         echo "</div>\n";
  40.     }
  41.      function update($new_instance, $old_instance) {
  42.          if (!isset($new_instance['submit'])) {
  43.              return false;
  44.          }
  45.          $instance = $old_instance;
  46.          $instance['newtitle'] = strip_tags($new_instance['newtitle']);
  47.          $instance['hottitle'] = strip_tags($new_instance['hottitle']);
  48.          $instance['randtitle'] = strip_tags($new_instance['randtitle']);
  49.          $instance['num'] = strip_tags($new_instance['num']);
  50.          $instance['days'] = strip_tags($new_instance['days']);
  51.          return $instance;
  52.      }
  53.     function form($instance) {
  54.         global $wpdb;
  55.         $instance = wp_parse_args((array) $instance, array('newtitle' => '最新文章','hottitle' => '热评文章','randtitle' => '随机文章','num' => '10','days' => '30'));
  56.         $newtitle = strip_tags($instance['newtitle']);
  57.         $hottitle = strip_tags($instance['hottitle']);
  58.         $randtitle = strip_tags($instance['randtitle']);
  59.         $num = strip_tags($instance['num']);
  60.         $days = strip_tags($instance['days']);
  61. ?>
  62.  <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>
  63.  <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>
  64.  <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>
  65.  <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>
  66.  <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>
  67.          <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
  68. <?php
  69.     }
  70. }
  71. add_action('widgets_init', 'jv_randomwidget_init');
  72. function jv_randomwidget_init() {
  73.     register_widget('jv_randomwidget');
  74. }
  75. ?>

添加动态切换的js脚本，放在footer.php

  1. // random-panel
  2. jQuery(document).ready(function(a){function b(a,b){var b=document.getElementById(b),a=document.getElementById(a);b&&a&&(b.appendChild(a),a.style.display="block",b.style.display="block")}a.cookie=function(b,c,d){if("undefined"==typeof c){var j=null;if(document.cookie&&""!=document.cookie)for(var k=document.cookie.split(";"),l=0;l<k.length;l++){var m=a.trim(k[l]);if(m.substring(0,b.length+1)==b+"="){j=decodeURIComponent(m.substring(b.length+1));break}}return j}d=d||{},null===c&&(c="",d.expires=-1);var e="";if(d.expires&&("number"==typeof d.expires||d.expires.toUTCString)){var f;"number"==typeof d.expires?(f=new Date,f.setTime(f.getTime()+1e3*60*60*24*d.expires)):f=d.expires,e="; expires="+f.toUTCString()}var g=d.path?"; path="+d.path:"",h=d.domain?"; domain="+d.domain:"",i=d.secure?"; secure":"";document.cookie=[b,"=",encodeURIComponent(c),e,g,h,i].join("")},a("#circle,#circle1,#circletext").show(100),a("#circletext").text("\u52a0\u8f7d\u4e2d"),a(window).load(function(){a("#circle").fadeOut(400),a("#circle1").fadeOut(600),a("#circletext").text("\u5b8c\u6210\u4e86").fadeOut(800)}),a.browser.msie&&a.browser.version<8?a("#nav-menu li:has(> ul) > a").append(""):a("#nav-menu li:has(> ul) > a").append('<b class="caret"></b>'),a("#nav-menu li").hover(function(){a(this).children("ul").stop(!1,!0).slideDown("fast")},function(){a(this).children("ul").stop(!1,!0).slideUp("fast")}),a("#mobile-nav").on("click",function(b){b.preventDefault(),a(" #nav-menu").stop(!1,!0).slideToggle("slow"),a("#nav-menu ul li:has(ul) > a").css("display","initial")}),a("#search-input").removeAttr("placeholder"),""!=a("#search-input").val()&&a("#search-input").css("width","205px"),a("#search-input").on("click",function(){var b=a(this).attr("data-searchtips");a(this).stop(!1,!0).animate({width:"205px"},"fast"),a(this).attr("placeholder",b)}).blur(function(){""==a(this).val()&&(a(this).stop(!1,!0).animate({width:"107px"},"fast"),a(this).removeAttr("placeholder"))}),a("#sb_panel").hover(function(){clearInterval(w_tab_auto),a(".tab-title span").on("click",function(){a(this).addClass("selected").siblings().removeClass("selected"),a.browser.msie&&a.browser.version<8?a(".tab-content > ul").eq(a(".tab-title span").index(this)).show().siblings().hide():a(".tab-content > ul").eq(a(".tab-title span").index(this)).slideDown(300).siblings().slideUp(300)})},function(){var b=a(".tab-title span").index(this),c=a(".tab-content ul"),d=a(".tab-title span");w_tab_auto=setInterval(function(){b<c.length-1?b++:b=0,a.browser.msie&&a.browser.version<8?c.eq(b).show().siblings().hide():c.eq(b).slideDown(800).siblings().slideUp(800),d.eq(b).addClass("selected").siblings().removeClass("selected")},5e3)}).trigger("mouseleave"),"close"==a.cookie("inlojv_sidebar")&&(a("#sidebar").hide(800),a("#content-list,#content-main").animate({width:"99.7%"},800),a("#f_c").hide(300),a("#f_o").show(500)),a("#f_c").on("click",function(){a("#sidebar").hide(800),a("#content-main").animate({width:"99.7%"},800),a("#f_c").hide(300),a("#f_o").show(500),a.cookie("inlojv_sidebar","close",{path:"/"})}),a("#f_o").on("click",function(){a("#sidebar").show(800),a("#content-main").animate({width:"72%"},800),a("#f_o").hide(300),a("#f_c").show(500),a.cookie("inlojv_sidebar",null,{path:"/"})}),a(window).on("scroll",function(){a(this).scrollTop()>100?a("#backtop").css({bottom:"1px"}).attr("title","\u8fd4\u56de\u9876\u90e8"):a("#backtop").css({bottom:"-100px"})}),a("#backtop").on("click",function(){return a("html, body").animate({scrollTop:"0px"},500),!1}),a("img").hover(function(){a(this).stop(!1,!0).fadeTo("fast",.8)},function(){a(this).stop(!1,!0).fadeTo("fast",1)}),a("a[rel*='external']").live("click",function(){return window.open(this.href),!1}),a(".slideBox ul").each(function(){a(this).children("li").size()<2&&a(this).parent().parent().children(".prev,.next").remove()}),a(function(){code_highlight=function(){a("#wrapper-inner").attr("data-inlojvs").indexOf("highlight")>=0&&a("pre").each(function(a,b){hljs.highlightBlock(b)})},code_highlight(),images_error=function(){a("img").error(function(){var b=a(this).attr("src"),c=a("#logo a").attr("href");a(this).unbind("error").attr({"data-original":b,src:c+"wp-content/themes/inlojv/images/images_error.jpg"})})},images_error(),check_thumb=function(){a(".post-thumbnail img").each(function(){var b=a("#logo a").attr("href");""==a(this).attr("src")&&a(this).attr("src",b+"wp-content/themes/inlojv/images/random/inlojv"+Math.floor(1+20*Math.random())+".jpg")})},check_thumb(),auto_sidebar=function(){a("#sidebar").each(function(){for(var b=a("#content-wrap > div")[0].offsetHeight,c=a("#sidebar > .slide-box").size(),d=[],e=0,f=0;c>f;f++)if(d[f]=a(".slide-box")[f].offsetHeight,e+=d[f],a("#sidebar > .slide-box").show(),e>b){a("#sidebar > .slide-box").eq(f-1).nextAll(".slide-box").hide();break}})},auto_sidebar(),mouse_title=function(){a("#wrapper-inner").attr("data-inlojvs").indexOf("mouse-title")>=0&&a("#wrapper-inner *").each(function(){if(this.title){var c=this.title,d=30,e=15;a(this).hover(function(b){this.title="",a("body").append('<div class="tooltip">'+c+"</div>"),a(".tooltip").css({left:b.pageX-e+"px",top:b.pageY+d+"px",opacity:"0.8"}).fadeIn(300)},function(){this.title=c,a(".tooltip").remove()}).mousemove(function(b){a(".tooltip").css({left:b.pageX-e+"px",top:b.pageY+d+"px"})})}})},mouse_title()}),window.onload=function(){b("adsense-loader1","adsense1"),b("adsense-loader2","adsense2"),b("adsense-loader3","adsense3"),b("adsense-loader4","adsense4"),b("adsense-loader5","adsense5"),b("adsense-loader6","adsense6"),b("adsense-loader7","adsense7"),b("adsense-loader8","adsense8"),b("adsense-loader9","adsense9"),b("adsense-loader10","adsense10"),b("adsense-loader11","adsense11")},a.fn.smartFloat=function(){var b=function(b){var c=b.position().top,d=b.css("position"),e=document.getElementById("sidebar").offsetHeight;a(window).scroll(function(){var f=a(this).scrollTop();f>e?window.XMLHttpRequest?a("body").attr("class").indexOf("admin-bar")>=0?b.css({position:"fixed",top:35}):b.css({position:"fixed",top:5}):b.css({top:f}):b.css({position:d,top:c})})};return a(this).each(function(){b(a(this))})};var c=a("#sidebar div.fixed").attr("id");if(a("#"+c).smartFloat(),a("#wrapper-inner").attr("data-inlojvs").indexOf("ajax-posts")>=0){var g,d=null,e=!1,f=document.title,h=window.opera?"CSS1Compat"==document.compatMode?a("html"):a("body"):a("html,body");window.history&&window.history.pushState&&(a(document).on("click","#content-list .pagination a",function(b){b.preventDefault(),null==d?g={url:document.location.href,title:document.title,html:a("#content-list").html(),top:h.scrollTop()}:d.abort(),g.top=h.scrollTop();var c=a(this).attr("href").replace("?action=ajax_posts","");return a("#tooltip").remove(),a("#content-list").html('<div id="ajax_loading"></div>'),a("html, body").animate({scrollTop:"0px"},500),d=a.ajax({url:c+"?action=ajax_posts",beforeSend:function(){a(".tooltip").remove()},success:function(b){e=!0;var d={url:c,title:f,html:b};history.pushState(d,f,c),document.title=f,h.animate({scrollTop:0},0),a("#content-list").html(b)},complete:function(){images_error(),check_thumb(),auto_sidebar(),mouse_title()}}),!1}),window.addEventListener("popstate",function(b){null!=d&&(b&&b.state?(e=!0,document.title=b.state.title,a("#content-list").html(b.state.html)):(e=!1,document.title=g.title,a("#content-list").html(g.html),h.animate({scrollTop:g.top},0)))}))}if(a("#wrapper-inner").attr("data-inlojvs").indexOf("ajax-search")>=0){var i,j=a("#logo a").attr("href");a("#search-input").on("input",function(b){i=b.timeStamp;var c=a(this).val().replace(/\s+/g," ");return" "==c?!1:(""!=c?setTimeout(function(){0==i-b.timeStamp&&a.ajax({type:"GET",url:j,data:"s="+c,dataType:"json",beforeSend:function(){a("#search-cloud").empty().show().addClass("loading"),a("#search-input").css("border-radius","3px 0 0 0")},success:function(b){var c=b.length,d=a("#search-cloud").data("cloudnum");if("all"==d&&(d=b.length),num=d>=c?c:d,0==b.length)a("#search-cloud").empty().show().removeClass("loading").append('<li><a href="javascript:;">\u6ca1\u6709\u627e\u5230\u4f60\u8981\u641c\u7d22\u7684\u5185\u5bb9</a></li>');else{a("#search-cloud").empty().show().removeClass("loading");for(var e=0;num>e;e++)a("#search-cloud").append('<li><a href="'+b[e].url+'">'+b[e].title+"</a></li>")}}})},500):(a("#search-cloud").empty().hide(),a("#search-input").css("border-radius","3px 0 0 3px")),void 0)}).blur(function(){var b=a(this).val().replace(/\s+/g," ");(""==b||" "==b)&&(a("#search-cloud").empty().hide(),a("#search-input").css("border-radius","3px 0 0 3px"))})}});

最后是匹配主题的CSS

  1. .jv-tab .tab-title{ width:100%;font-size:13px}
  2. .jv-tab .tab-title span{cursor:pointer;display:inline-block;float:left;background-color:#4c4c4c;padding:5px 8px;color:#FFF;margin-right:3px;border-radius:2px 2px 0 0;}
  3. .jv-tab .tab-title .selected{background-color:#169fe6}.jv-tab .tab-content{border-top:4px solid #169fe6;}

搞定收工。

TAGS:  

本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。

转载请注明出处链接 : https://www.inlojv.com/3267.html