这里我们要实现博客的侧边栏有关闭/显示的功能我们需要借助于jquery了,利用jquery我们就可以方便快捷的实现此功能了,现在我们一起来看看实现过程.

首先,要加载JQuery库,现在一般主题都添加了JQuery,但如果没有的话,在header.php中</head>前加入引用代码.

一种是通过php语句调用wordpress自带的jquery库,代码如下:

<?php wp_enqueue_script('jquery'); ?>

一种是通过html语句添加对应位置的jquery库,可以调用自己下载下来并存放在主题某文件夹中的jquery库,也可以调用google提供的jquery库,代码如下:

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

然后,要添加html显示代码,在适当位置添加文字或者按钮,样式可依主题修改,本主题将其放在文章内容页single.php的面包屑导航中,代码如下：

<span id="close-sidebar"><a>关闭侧边栏</a></span>

最后,要添加jquery控制代码,可在header.php中添加以下代码,或者将以下代码添加至一个新建的js文件中,如global.js,然后调用,调用方法参上,将global.js的存放位置替换在src属性中即可,代码如下:

1. /***关闭/显示侧边栏***/ 
2. jQuery(document).ready(function($){ 
3. //选中“id=close-sidebar”内a标签的内容，即“关闭侧边栏” 
4.  $('#close-sidebar a').toggle(function(){ 
5. //点中后文本显示成“显示侧边栏”。 
6.  $(this).text("显示侧边栏"); 
7. //隐藏“id=sidebar”的内容，即侧边栏，你主题的侧边栏的id或class是什么就改成什么；如果还需隐藏其它部分，可在其后加逗号后继续添加标签，如把滚动条隐藏。 
8.  $('#sidebar, #roll').hide(); 
9. //让“class=main”的宽度伸至990px，时间为1000毫秒；如果还需加宽其它部分，可在其后加逗号后继续添加标签，如文章内容主体同样加宽。 
10.  $('.main').animate({width: "990px"}, 1000); 
11.  },function(){ 
12. //点中后文本显示成“关闭侧边栏”。 
13.  $(this).text("关闭侧边栏"); 
14. //显示“id=sidebar”的内容，即侧边栏，其余注意事项同上。 
15.  $('#sidebar, #roll').show(); 
16. //让“class=main”的宽度缩至700px，时间为1000毫秒，其余注意事项同上。 
17.  $('.main').animate({width: "700px"}, 1000); 
18.  }); 
19. }); 

看懂注释后应该就能很好地将对应的属性和属性值改成自己主题所对应的,修改成功后就能看到效果了,具体细节还要自己做调整,通过这三步,就实现了关闭/显示侧边栏的功能,至于点击关闭的位置和样式、关闭和显示的内容有哪些和关闭显示时的动态效果如何就可以自己去发散了.

如果我们还希望wordpress不同页面侧边栏显示可参考下面方法,首页与文章页的侧边栏是分开的,这样我们可以很好的控制想显示的内容.

那这种效果如何实现呢?方法如下:

1、在主题的functions.php文件中添加如下代码:

1. if ( function_exists('register_sidebar') ) { 
2. register_sidebar(array( 
3.         'name'          => '首页侧栏', 
4.         'id'            => 'widget_homesidebar', 
5.         'before_widget' => '<li id="%1$s">', 
6. 'after_widget' => '</li>', 
7. 'before_title' => '<h2>', 
8. 'after_title' => '</h2>', 
9.     )); 
10.     register_sidebar(array( 
11.         'name'          => '文章页侧栏', 
12.         'id'            => 'widget_postsidebar', 
13.         'before_widget' => '<li id="%1$s">', 
14. 'after_widget' => '</li>', 
15. 'before_title' => '<h2>', 
16. 'after_title' => '</h2>', 
17.     )); 
18.  
19. } 

以上代码注册了两个侧边栏:“首页侧栏”与“文章页侧栏”.

2、在主题的侧边栏文件siderbar.php添加如下代码:

1. <?php  
2.  if(is_home() || is_front_page()) { //首页显示“首页侧栏” 
3.       if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_homesidebar')){}  
4. } 
5. ?> 
6. <?php  
7.  
8. if ( is_single() ) {//文章页显示 “文章页侧栏” 
9.       if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_postsidebar')){} 
10. } 
11. ?> 

OK,到后台看看效果吧.

Tags: WordPress 侧边栏 关闭

分享到：