自定义wordpress侧边栏小工具

作者：matrix 发布时间：2014 年 1 月 25 日 分类：Wordpress

WordPress后台的小工具可随意拖动，在前台实现相应的功能。自定义的话更加强大。

我这正好使用了非插件添加文章浏览次数统计的代码：

/* 访问计数 */  
function record_visitors()  
{  
    if (is_singular())  
    {  
      global $post;  
      $post_ID = $post->ID;  
      if($post_ID)  
      {  
          $post_views = (int)get_post_meta($post_ID, 'views', true);  
          if(!update_post_meta($post_ID, 'views', ($post_views+1)))  
          {  
            add_post_meta($post_ID, 'views', 1, true);  
          }  
      }  
    }  
}  
add_action('wp_head', 'record_visitors');  

/// 函数名称：post_views  
/// 函数作用：取得文章的阅读次数  
function post_views($before = '(点击 ', $after = ' 次)', $echo = 1)  
{  
  global $post;  
  $post_ID = $post->ID;  
  $views = (int)get_post_meta($post_ID, 'views', true);  
  if ($echo) echo $before, number_format($views), $after;  
  else return $views;  
}

就利用上面的非插件统计功能在侧边栏添加个文章TOP列表，列出浏览次数最多的文章。

过程： 阅读剩余部分 »

添加WordPress开启关闭侧边栏功能

作者：matrix 发布时间：2013 年 10 月 1 日 分类：Wordpress

图片4819－添加WordPress开启关闭侧边栏功能

此功能有点鸡肋，不过还是在折腾出来了。

1.加载JQ库，有了的跳过。

2.主题的header上加入js代码：

<script>  
jQuery(document).ready(function($){  
(function(){  
function SetCookie(c_name,value,expiredays){  
var exdate=new Date();  
exdate.setDate(exdate.getDate()+expiredays);  
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())+";path=/";  
//如果你希望每个页面都有个独立的 Cookies 设置的话请去掉+";path=/"，这样的话leeiio.me/xxx/ 和leeiio.me/yyy/ 的侧边栏状态都将是独立的  
}  
window['RootCookies'] = {};  
window['RootCookies']['SetCookie'] = SetCookie;  
//JavaScript 的命名空间，假使你已有一个 SetCookie 的函数的话将不会与之冲突，通过 RootCookie.SetCookie() 调用  
})();  
//Toggle Sidebar  
$('#close-sidebar').click(function(){RootCookies.SetCookie('show_sidebar', 'no', 7);$('#close-sidebar').hide();$('#show-sidebar').show();$('#celan').hide();$('.grid_10').animate({width: "870px"}, 1000);});  
$('#show-sidebar').click(function(){RootCookies.SetCookie('show_sidebar', 'no', -1);$('#show-sidebar').hide();$('#close-sidebar,#celan').show();$('.grid_10').animate({width: "640px"}, 800);$('#celan').delay(800).show(0);});  
});  
</script>

上面的代码也可保存为*.js加载，需要去掉<script>标签。

3.显示开关侧边栏的代码，需要在哪显示就添加到哪：

<div style="position: absolute;right: 0px;">  
          <?php if(!$_COOKIE['show_sidebar']=='no'):?>  
            <li id="close-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
            <li id="show-sidebar" style="display:none;"title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
        <?php else: ?>  
            <li id="close-sidebar" style="display:none;" title="显示/关闭侧边栏"><a href="javascript:void()">关闭侧边栏</a></li>  
            <li id="show-sidebar" title="显示/关闭侧边栏"><a href="javascript:void()">显示侧边栏</a></li>  
        <?php endif;?>  
            <?php if($_COOKIE['show_sidebar']=='no'): ?>  
<style type="text/css">  
#content {width:870px;}  
.grid_10 {width:870px;}  
#celan {display:none;}  
</style>  
        <?php endif; ?>  
</div>

说明：第一行的样式可自定义。

#celan为侧边栏样式，#content和.grid_10为文章内容边框的样式。主题不同，此样式也就需要更改。

其他代码我也不懂，记录END。

参考：http://cnsunbin.com/wordpress/wordpress-close-or-show-sidebar.html

http://isayme.com/2011/09/make-the-theme-thiner.html

http://code.google.com/p/jieim/downloads/detail?name=all.zip&can=2&q=