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




您必須保留原作姓名標示
您不得為商業使用本著作
您不得改變或改作本著作
這…這篇不就是在講這個嗎…?
首先確定你的WordPress已經有包含jQuery了,再找你側邊欄的ID(我的是sidebar),用 $(”#sidebar”).toggle();就可以做顯示/隱藏的切換。
回覆