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



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