用jQuery改造WordPress網頁

2009/10/27 | WordPress | 作者: 簡睿| 閱讀總數 928 , 6 (本日)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. 日劇《仁醫 JIN》與漫畫《仁者俠醫》觀後雜感 (73 人次, 2009-10-29)
  2. Plurk CSS樣式自訂修改全攻略 (58 人次, 2009-07-04)
  3. 用ClipMagic的連續貼上加速剪貼操作 (34 人次, 2009-12-02)
  4. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (33 人次, 2008-04-10)
  5. 如何手動輸入Plurk的表情圖示? (29 人次, 2008-09-29)
  6. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (28 人次, 2009-02-18)
  7. PhraseExpress:凡人版的AutoHotkey [修訂] (28 人次, 2009-11-28)
  8. Joomla! 1.0.12網站建置2-安裝佈景主題樣板(多圖) (27 人次, 2008-07-05)
  9. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (27 人次, 2009-06-07)
  10. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (27 人次, 2009-04-18)
  11. HTC HD Touch的專屬多媒體轉檔工具:Video Converter 1.21 (26 人次, 2009-04-11)
  12. 開源的專案管理工具:GanttProject與OpenProj (22 人次, 2007-08-18)
  13. 將Plurk回應區變成固定寬度 (22 人次, 2009-07-11)
  14. 強化HTC Touch HD的工具軟體 (21 人次, 2009-02-25)
  15. HTC Touch HD完整重置與升級ROM的步驟 (20 人次, 2009-05-16)
  16. 簡單放大Plurk輸入區的方法[修訂] (19 人次, 2008-09-29)
  17. 令人動容的日劇《不毛地帶》片尾曲:Tom Traubert's Blue[修訂] (18 人次, 2009-11-22)
  18. 測試Exec-PHP外掛:開啟插頁於新頁籤 (17 人次, 2009-11-24)
  19. 設定Spb Mobile Shell 3.0的桌面小元件(Widgets)的步驟 (17 人次, 2009-04-28)
  20. Windows Mobile使用的完美聯絡人軟體:Inesoft Phone [修訂] (17 人次, 2009-02-28)
  21. 增加Spb Mobile Shell 3.0生活化桌面頁數的小技巧 (17 人次, 2009-04-27)
  22. [WordPress] 在插頁寫PHP的外掛:EXEC-PHP,讓行動版網頁顯示訪客統計 (16 人次, 2009-11-22)
  23. Vista IE8的window.open異常 (16 人次, 2009-11-04)
  24. Windows 7試用小記 (15 人次, 2009-08-19)
  25. 網頁編輯軟體KompoZer 0.8b1新版推出 (15 人次, 2009-11-15)
  26. 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (15 人次, 2009-06-06)
  27. 移動噗浪的回應時間位置,使能更清楚看到回應時間[修訂] (14 人次, 2009-07-04)
  28. 令人讚賞的電子書集中站:好讀網站與好讀閱讀器 (14 人次, 2009-04-25)
  29. 支持國片-《賽德克‧巴萊》的開鏡紀念套票到貨了! (14 人次, 2009-11-10)
  30. 用RMVB多媒體播放器在電視觀賞RMVB影片[修訂] (14 人次, 2009-11-18)
  31. ActiveSync無法連線... (13 人次, 2009-04-23)
  32. Open source的資料庫建模工具:Db Designer Fork (13 人次, 2007-05-16)
  33. Spb Mobile Shell設定備忘 (13 人次, 2009-02-19)
  34. 指定Plurk回應串對話者的小技巧 (13 人次, 2008-09-29)
  35. 從韓劇《市政廳》笑看韓國選舉花招 (13 人次, 2009-09-05)
  36. 讓MSN的Esc鍵失效 (13 人次, 2008-10-22)
  37. 命令提示字元的完美替身:PowerCmd與Console 2.0 (13 人次, 2008-05-09)
  38. Google Chrome自我救濟小變身:改佈景樣式、加滑鼠手勢 (12 人次, 2008-09-07)
  39. 用AutoHotkey輕鬆製作螢幕小鍵盤 (12 人次, 2008-03-16)
  40. 把VMWare丟掉! Free的x86模擬器: QEMU (12 人次, 2004-12-16)
  41. 萬用影音轉檔程式:FFMpeg與HD專用的VideoConverter (12 人次, 2009-05-10)
  42. 中文版的資料庫前端工具:Aqua Data Studio 7.0 (11 人次, 2009-01-25)
  43. 部落格被冒名頂替事件紀錄 (11 人次, 2009-11-17)
  44. 自動隱藏特定視窗的工具:OuttaSight (11 人次, 2009-11-21)
  45. 功能眾多的開源剪貼簿工具:ArsClip (11 人次, 2009-01-23)
  46. 三款「桌面便利貼」試用、剖析與建議 (11 人次, 2008-05-03)
  47. 修改WordPress 2.8最新迴響的顯示格式 (11 人次, 2009-06-17)
  48. 用gTimeSync讓Windows Mobile做網際網路時間同步校正 (11 人次, 2009-05-17)
  49. 能與Google Reader同步的Windows Mobile RSS reader? (11 人次, 2009-03-09)
  50. 能在HD手機上順暢運行的3D賽車+射擊遊戲:Xtrackt (11 人次, 2009-09-12)
標籤雲

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