用jQuery改造WordPress網頁

2009/10/27 | WordPress | 作者: 簡睿| 閱讀總數 1317 , 8 (本日)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,謝謝!

回覆

簡睿 回覆:於11月 22nd, 2009 17:43

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

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

回覆


撰寫留言





隨機文章

本日點擊排行 本周點擊排行 本月點擊排行 歷史點擊排行 | 統計表
  1. 超方便下載[Google圖書]的資料 (21 人次, 2010-02-27)
  2. 令人動容的日劇《不毛地帶》片尾曲：Tom Traubert's Blue[修訂] (21 人次, 2009-11-22)
  3. 超簡單MSN下載檔案自動分類 (21 人次, 2010-02-27)
  4. DOS命令使用技巧4：由DOS視窗迅速切換資料夾的方法 (20 人次, 2010-02-27)
  5. 另一套適用手機的影片轉檔工具：WinAVI 3GP/MP4/PSP/iPod Video Converter (19 人次, 2009-04-18)
  6. 使用Memory Fox附加元件為Firefox進行定期記憶體瘦身 (19 人次, 2010-02-27)
  7. 日劇《仁醫 JIN》與漫畫《仁者俠醫》觀後雜感 (17 人次, 2009-10-29)
  8. 將Google Buzz、Twitter與Facebook在Gmail裡合而為一的步驟 (17 人次, 2010-02-18)
  9. [轉貼] 转：容易弄错的繁体字 (17 人次, 2010-02-18)
  10. DOS命令使用技巧3：由DOS視窗將目前資料夾用檔案總管開啟的方法 (16 人次, 2010-02-27)
  11. 將噗浪的視窗高度變大，加上分隔線，以方便閱讀 (16 人次, 2009-06-06)
  12. Plurk CSS樣式自訂修改全攻略 (16 人次, 2009-07-04)
  13. 強化HTC Touch HD的工具軟體 (15 人次, 2009-02-25)
  14. DOS命令使用技巧1：最快把文字檔案貼入剪貼簿的方法 (15 人次, 2010-02-27)
  15. 使用IMETOOL有效控制中文輸入法 (15 人次, 2010-02-27)
  16. 把HTC Touch HD操作介面換成Spb Mobile Shell，美觀又便利! (14 人次, 2009-02-18)
  17. DOS使用技巧2：檢視超大檔案檔尾內容的指令WinTail.exe (14 人次, 2010-02-27)
  18. 從韓劇《市政廳》笑看韓國選舉花招 (13 人次, 2009-09-05)
  19. 強化閱讀第２噗：變更噗浪回應的字體與背景顏色 (13 人次, 2009-06-07)
  20. Windows Mobile使用的完美聯絡人軟體：Inesoft Phone [修訂] (13 人次, 2009-02-28)
  21. jQuery選擇器測試與範例 (13 人次, 2007-09-29)
  22. 用FinchSync同步Thunderbird與HTC Touch HD的聯絡人資料 (12 人次, 2009-02-01)
  23. Spb Mobile Shell設定備忘 (12 人次, 2009-02-19)
  24. 第4個jqGrid範例: 資料列處理 (11 人次, 2010-02-14)
  25. [Vista] 把桌面行事曆Rainlendar鎖定在Vista桌面上 (11 人次, 2008-04-27)
  26. 第2個jqGrid範例：增加額外選項設定 (11 人次, 2010-02-13)
  27. jQuery神奇的選擇器(Selector) (11 人次, 2007-09-28)
  28. 用AutoHotkey輕鬆製作螢幕小鍵盤 (11 人次, 2008-03-16)
  29. 用WordPress的WPtouch外掛顯示iPhone與HTC Touch HD的精簡樣式[修訂] (11 人次, 2009-02-02)
  30. [WM6] 自動再次提醒未接來電等事件：ReRemind (11 人次, 2009-04-19)
  31. 第一個jqGrid範例：Local array (10 人次, 2010-02-13)
  32. 開始使用Cygwin以取代cmd.exe (10 人次, 2007-01-11)
  33. ZScreen：一氣呵成的單鍵「抓圖與傳檔」工具 (10 人次, 2010-01-24)
  34. Windows 7的常用快速鍵速查表 (10 人次, 2010-01-05)
  35. 第3個jqGrid範例: XML與XML STRING格式 (10 人次, 2010-02-14)
  36. 變更資料夾與檔案的屬性：Attribute Changer 6.0 Beta (10 人次, 2008-02-10)
  37. Vista IE8的window.open異常 (10 人次, 2009-11-04)
  38. 增加Spb Mobile Shell 3.0生活化桌面頁數的小技巧 (9 人次, 2009-04-27)
  39. 能在HD手機上順暢運行的3D賽車+射擊遊戲：Xtrackt (9 人次, 2009-09-12)
  40. Subversion權限設定範例說明 (9 人次, 2009-09-09)
  41. [Tools] 幫Skype加上影像功能：vSkype (9 人次, 2005-06-20)
  42. 改寫AutoHotkey輸出中文字串的寫法http://jdev.tw/blog/1434/autohotkey-sendinput-asc (9 人次, 2009-06-20)
  43. [Cygwin] 用c:、d:切換磁碟機目錄 (9 人次, 2007-01-18)
  44. Joomla! 1.0.12網站建置2－安裝佈景主題樣板(多圖) (9 人次, 2008-07-05)
  45. [Java] 終於解決IntelliJ-IDEA 8.0.1的中文輸入法問題 (9 人次, 2008-12-04)
  46. 支持國片－《賽德克‧巴萊》的開鏡紀念套票到貨了! (9 人次, 2009-11-10)
  47. [iReport] Text Field中引用的欄位、變數與參數 (9 人次, 2005-04-16)
  48. 初試TortoiseSVN的收穫 (9 人次, 2005-09-16)
  49. 使用QNAP TS-109 NAS設備的心得 (8 人次, 2007-10-18)
  50. 用jQuery改造WordPress網頁 (8 人次, 2009-10-27)
標籤雲
有趣 SQL BT Firefox NAS TS-109 雜記 Windows-Mobile 設備 壓縮工具 GMail 啟動程式 NetBeans 滑鼠手勢 噗浪 Graphics IM AutoHotkey Download!雜誌 資料庫 電影 網路服務 資料夾 Freeware jEdit 論壇 Vista 桌面 Microsoft 繪圖 jQuery backup RSS Ubiquity MSN 輸入法 剪貼簿 備份 PDF 螢幕擷取 Joomla Windows ThinkPad Google 閱讀 資安 檔案管理 MySQL ADS Shell Console 郵件軟體 OpenOffice Wiki funP Batch 編輯器 Office WordPress Plurk PHP JavaScript 網站服務 HTC Thunderbird Java 漫畫 Apache CMS Subversion 搜尋工具 新聞 tortoiseSVN 旅遊 Media iReport 書籤 科技 工作列 行事曆 環境變數 Windows-7 Mozilla X61 Linux FTP Oracle 附中 工作管理員 Trac Xuite Cygwin 瀏覽器 DOS WordPress外掛 system Blogging

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