用jQuery改造WordPress網頁

2009/10/27 | WordPress | 作者: 簡睿| 閱讀總數 1290 , 1 (本日)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. [Cygwin] 用c:、d:切換磁碟機目錄 (2 人次, 2007-01-18)
  2. 參戰ClickClickClick大賽:我的自動點擊程式ccc.exe V1.3 (2 人次, 2007-06-16)
  3. [轉貼數位時代] Google與百度,正式決戰中國! (2 人次, 2005-08-25)
  4. 修改WordPress 2.8最新迴響的顯示格式 (2 人次, 2009-06-17)
  5. 強化Windows Mobile的剪貼簿功能:Clipboard Tool 1.6 (1 人次, 2009-03-23)
  6. 用7-Zip Theme Manager幫7-Zip改頭換面 (1 人次, 2009-03-31)
  7. HTC HD Touch的專屬多媒體轉檔工具:Video Converter 1.21 (1 人次, 2009-04-11)
  8. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (1 人次, 2009-04-18)
  9. 快速切換資料夾之台灣之光:Folder Menu (1 人次, 2009-04-22)
  10. [Firefox] 自動統計的瀏覽紀錄排行榜外掛:New Tab King (1 人次, 2009-04-26)
  11. 設定Spb Mobile Shell 3.0的桌面小元件(Widgets)的步驟 (1 人次, 2009-04-28)
  12. Spb Mobile Shell設定備忘 (1 人次, 2009-02-19)
  13. 功能眾多的開源剪貼簿工具:ArsClip (1 人次, 2009-01-23)
  14. CSS-BuMa (Cascading Style Sheets - Button Maker) :製作樣式表功能表與按鈕的工具 (1 人次, 2007-05-13)
  15. [趣味] 長崎公車站旁出現-龍貓(Totoro)!-的雕像 (1 人次, 2008-01-24)
  16. [jEdit] 使用BeanShell巨集自行擴充功能 (1 人次, 2007-11-17)
  17. 八里小艇地中海餐廳一遊 (1 人次, 2006-06-03)
  18. 《日俄戰爭物語~萬里晴空下的驚濤駭浪》 (1 人次, 2005-12-05)
  19. 川口開治的鉅著-漫畫「次元艦隊」 (1 人次, 2006-05-01)
  20. [WordPress] 資料庫切換成UTF-8的匯出/匯入紀錄 (1 人次, 2008-12-06)
  21. 安裝PmWiki以逐步建立自己的網路知識庫 (1 人次, 2008-12-10)
  22. [Windows] 用mklink與junction建立資料夾連結 (1 人次, 2009-01-11)
  23. 變更Windows Mobile的藍牙檔案接收儲存資料夾 (1 人次, 2009-05-16)
  24. 用gTimeSync讓Windows Mobile做網際網路時間同步校正 (1 人次, 2009-05-17)
  25. Vista IE8的window.open異常 (1 人次, 2009-11-04)
  26. 啟用Vista與Windows 7的無敵模式(God Mode) (1 人次, 2010-01-03)
  27. Windows 7的常用快速鍵速查表 (1 人次, 2010-01-05)
  28. [Plurk] 如何顯示12個噗浪朋友圖示?(結論:別人的是12個,自己的只會顯示8個) (1 人次, 2010-01-24)
  29. ZScreen:一氣呵成的單鍵「抓圖與傳檔」工具 (1 人次, 2010-01-24)
  30. 第3個jqGrid範例: XML與XML STRING格式 (1 人次, 2010-02-14)
  31. 第4個jqGrid範例: 資料列處理 (1 人次, 2010-02-14)
  32. 使用IMETOOL有效控制中文輸入法 (1 人次, 2010-02-27)
  33. 用jQuery改造WordPress網頁 (1 人次, 2009-10-27)
  34. 如何在同一部電腦裡安裝並啟動多套OpenOffice.org (1 人次, 2009-10-13)
  35. 網路帳號不要用懶人密碼! (1 人次, 2009-09-17)
  36. 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (1 人次, 2009-06-06)
  37. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (1 人次, 2009-06-07)
  38. 改寫AutoHotkey輸出中文字串的寫法http://jdev.tw/blog/1434/autohotkey-sendinput-asc (1 人次, 2009-06-20)
  39. 變化你的噗浪暱稱:Unicode我♥你-啦啦啦♪☺〠 (1 人次, 2009-06-23)
  40. HTC Touch HD的Opera無法瀏覽 (1 人次, 2009-06-28)
  41. 把落落長的噗友暱稱變獨立一行的噗浪變身法 (1 人次, 2009-07-03)
  42. 移動噗浪的回應時間位置,使能更清楚看到回應時間[修訂] (1 人次, 2009-07-04)
  43. 能在HD手機上順暢運行的3D賽車+射擊遊戲:Xtrackt (1 人次, 2009-09-12)
  44. 超簡單MSN下載檔案自動分類 (1 人次, 2010-02-27)
  45. 免費計數網站 SiteMeter 換新妝 (1 人次, 2007-05-09)
  46. 經常找不到文件嗎?試試免費的跨平台桌面搜尋工具:DocFetcher (1 人次, 2008-11-02)
  47. Plurk的快速鍵 (1 人次, 2008-10-03)
  48. 中國時報的Blog專題報導: 全研究!Blog究極歷險 (1 人次, 2005-04-16)
  49. HighLight:程式碼顯示的美化工具 (1 人次, 2008-10-04)
  50. HiStats 2.0 Beta終於推出 (1 人次, 2008-10-01)
標籤雲

簡睿隨筆@新世界 使用的快取程式為 WP Super Cache