用jQuery改造WordPress網頁

2009/10/27 | WordPress | 作者: 簡睿| 閱讀總數 1145 , 2 (本日)Share/Bookmark

 

前在[WordPress] 使用Anchor在目前網頁裡瞬間移動一文裡提到使用<a name=”下錨點”/><a href=”#下錨點”/>的HTML標籤,讓網頁能快速的移動到要檢視的位置,但這個方法必須修改WordPress的原始檔wp-includes/widgets.php,而WordPress更版速度又很快,每次改版就要再修改一次,實在很煩人,乾脆用JavaScript改寫掉好了,這樣才能一勞永逸。

首先在wp-content/themes/你使用的佈景/header.php的<head>區加入引用jQuery的標籤:

1
<script src="&lt;?php bloginfo(" siteurl"); ?>/wp-includes/js/jquery/jquery.js"></script>

接著在顯示下錨點文字的wp-content/themes/你使用的佈景/anchor.php加上處理的指令,同時也加上側邊欄與文章區的隱藏/切換控制:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
  jQuery(document).ready(function($) {
    var _iContentWidth = $("#content").css("width");  // 文章區的寬度
    $("#toggleContenttext").css("display", "");
    $("#toggleSidebar").css("display", "");
 
    $("<a name='分類'/>").insertBefore("div.widget_categories");
    $("<a name='最新文章'/>").insertBefore("div.widget_recent_entries");
    $("<a name='常用連結'/>").insertBefore("div.widget_wp_dtree_get_links");
    $("<a name='有朋自遠方來'/>").insertAfter("div.widget_wp_dtree_get_links");
    $("<a name='最新留言'/>").insertBefore("div.widget_recent_comments");
 
    $("#toggleContenttext").click(function() {
      var _sText = $("#toggleContenttext").text();
      if (_sText == "隱藏文章") {
        _sText = "顯示文章";
      } else {
        _sText = "隱藏文章";
      }
    $("#toggleContenttext").text(_sText);
    $("div.contenttext").toggle();
    $("p.postmeta").toggle();
    });
    $("#toggleSidebar").click(function() {
      var _sText = $("#toggleSidebar").text();
	    $("#sidebar").toggle();
      if (_sText == "隱藏側邊") {
        _sText = "顯示側邊";
        $("#content").css("width", (screen.availWidth-40)+"px");        
      } else {
        _sText = "隱藏側邊";
        $("#content").css("width", _iContentWidth);
      }
      $("#toggleSidebar").text(_sText);      
    });
  });
</script>

##

類似主題的文章

留言-您的隻字片言對作者都是莫大的鼓勵

 1.  留言 作者: betty 撰寫時間: 2009/11/22 15:03

可以請教一下如何將wordpress側邊欄改成toggle or slide sidebar,謝謝!

回覆

簡睿 回覆:於

這…這篇不就是在講這個嗎…?

首先確定你的WordPress已經有包含jQuery了,再找你側邊欄的ID(我的是sidebar),用 $(”#sidebar”).toggle();就可以做顯示/隱藏的切換。

回覆


撰寫留言





隨機文章

本日點擊排行 本周點擊排行 本月點擊排行 歷史點擊排行 | 統計表
  1. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (11 人次, 2008-04-10)
  2. Plurk CSS樣式自訂修改全攻略 (10 人次, 2009-07-04)
  3. 啟用Vista與Windows 7的無敵模式(God Mode) (9 人次, 2010-01-03)
  4. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (9 人次, 2009-02-18)
  5. 從韓劇《市政廳》笑看韓國選舉花招 (8 人次, 2009-09-05)
  6. Windows 7的常用快速鍵速查表 (8 人次, 2010-01-05)
  7. 日劇《仁醫 JIN》與漫畫《仁者俠醫》觀後雜感 (8 人次, 2009-10-29)
  8. 把落落長的噗友暱稱變獨立一行的噗浪變身法 (8 人次, 2009-07-03)
  9. 指定Plurk回應串對話者的小技巧 (7 人次, 2008-09-29)
  10. ZScreen:一氣呵成的單鍵「抓圖與傳檔」工具 (7 人次, 2010-01-24)
  11. 用AutoHotkey輕鬆製作螢幕小鍵盤 (7 人次, 2008-03-16)
  12. 萬用影音轉檔程式:FFMpeg與HD專用的VideoConverter (7 人次, 2009-05-10)
  13. 變化你的噗浪暱稱:Unicode我♥你-啦啦啦♪☺〠 (7 人次, 2009-06-23)
  14. 強化HTC Touch HD的工具軟體 (6 人次, 2009-02-25)
  15. WinHotKey:簡單幾步定義自己的系統快速鍵 (6 人次, 2010-01-18)
  16. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (6 人次, 2009-06-07)
  17. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (6 人次, 2009-04-18)
  18. 幫部落格加上Plurk快速噗文按鈕[修訂] (6 人次, 2009-05-24)
  19. HTC HD Touch的專屬多媒體轉檔工具:Video Converter 1.21 (6 人次, 2009-04-11)
  20. 替資料夾圖示換新妝 (5 人次, 2006-08-18)
  21. phpMyAdmin的替代品:SQL Buddy (5 人次, 2008-12-06)
  22. 視窗工具百寶箱:Commands in Demand (5 人次, 2009-08-14)
  23. 命令提示字元的完美替身:PowerCmd與Console 2.0 (5 人次, 2008-05-09)
  24. [Tools] 7-Zip的命令列指令 (5 人次, 2005-02-23)
  25. FireFox 2.0錯誤的解決方法 (5 人次, 2006-12-18)
  26. 用FinchSync同步Thunderbird與HTC Touch HD的聯絡人資料 (5 人次, 2009-02-01)
  27. 簡單放大Plurk輸入區的方法[修訂] (5 人次, 2008-09-29)
  28. [WordPress] 資料庫切換成UTF-8的匯出/匯入紀錄 (4 人次, 2008-12-06)
  29. 能與Google Reader同步的Windows Mobile RSS reader? (4 人次, 2009-03-09)
  30. 接聽電話後重新顯示螢幕的偵測軟體:Touch InCall Screen Tweak (4 人次, 2009-03-12)
  31. [Windows] 用mklink與junction建立資料夾連結 (4 人次, 2009-01-11)
  32. 如何組成強固又容易記憶的密碼? (4 人次, 2009-01-07)
  33. Spb Mobile Shell設定備忘 (4 人次, 2009-02-19)
  34. [FireFox] 無法使用Copy / Paste的原因 (4 人次, 2005-03-21)
  35. 網路衝浪新幫手-無所不在的Firefox Ubiquity (4 人次, 2008-12-16)
  36. 用gTimeSync讓Windows Mobile做網際網路時間同步校正 (4 人次, 2009-05-17)
  37. Linus談Git與TortoiseGit (4 人次, 2008-12-19)
  38. [轉貼] Smart NTFS Recovery:強力檔案回復專家 (4 人次, 2006-06-09)
  39. 用RMVB多媒體播放器在電視觀賞RMVB影片[修訂] (4 人次, 2009-11-18)
  40. 測試Exec-PHP外掛:開啟插頁於新頁籤 (4 人次, 2009-11-24)
  41. Vista IE8的window.open異常 (4 人次, 2009-11-04)
  42. 部落格被冒名頂替事件紀錄 (4 人次, 2009-11-17)
  43. 把FTP網站變成虛擬磁碟機的工具:NetDrive (4 人次, 2009-01-04)
  44. [WordPress] 在插頁寫PHP的外掛:EXEC-PHP,讓行動版網頁顯示訪客統計 (4 人次, 2009-11-22)
  45. 兼具功能性與方便性的螢幕擷取軟體:Screenpresso (4 人次, 2010-01-17)
  46. 能在HD手機上順暢運行的3D賽車+射擊遊戲:Xtrackt (4 人次, 2009-09-12)
  47. 使用Word 2010 Beta/2007寫Blog文章 (4 人次, 2010-01-19)
  48. 參戰ClickClickClick大賽:我的自動點擊程式ccc.exe V1.3 (4 人次, 2007-06-16)
  49. 和風部落格FC2有中文版了 (4 人次, 2008-08-10)
  50. [Plurk] 如何顯示12個噗浪朋友圖示? (4 人次, 2010-01-24)
標籤雲

簡睿隨筆@新世界 is Digg proof thanks to caching by WP Super Cache