這里我們要實現博客的側邊欄有關閉/顯示的功能我們需要借助于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,到后臺看看效果吧.