用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> |
##
類似主題的文章
留言-您的隻字片言對作者都是莫大的鼓勵
撰寫留言
隨機文章
本日點擊排行
本周點擊排行
本月點擊排行
歷史點擊排行 |
統計表
- 輕鬆學會彈指神功-揭露AutoHotkey絕技 (11 人次, 2008-04-10)
- Plurk CSS樣式自訂修改全攻略 (10 人次, 2009-07-04)
- 啟用Vista與Windows 7的無敵模式(God Mode) (9 人次, 2010-01-03)
- 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (9 人次, 2009-02-18)
- 從韓劇《市政廳》笑看韓國選舉花招 (8 人次, 2009-09-05)
- Windows 7的常用快速鍵速查表 (8 人次, 2010-01-05)
- 日劇《仁醫 JIN》與漫畫《仁者俠醫》觀後雜感 (8 人次, 2009-10-29)
- 把落落長的噗友暱稱變獨立一行的噗浪變身法 (8 人次, 2009-07-03)
- 指定Plurk回應串對話者的小技巧 (7 人次, 2008-09-29)
- ZScreen:一氣呵成的單鍵「抓圖與傳檔」工具 (7 人次, 2010-01-24)
- 用AutoHotkey輕鬆製作螢幕小鍵盤 (7 人次, 2008-03-16)
- 萬用影音轉檔程式:FFMpeg與HD專用的VideoConverter (7 人次, 2009-05-10)
- 變化你的噗浪暱稱:Unicode我♥你-啦啦啦♪☺〠 (7 人次, 2009-06-23)
- 強化HTC Touch HD的工具軟體 (6 人次, 2009-02-25)
- WinHotKey:簡單幾步定義自己的系統快速鍵 (6 人次, 2010-01-18)
- 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (6 人次, 2009-06-07)
- 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (6 人次, 2009-04-18)
- 幫部落格加上Plurk快速噗文按鈕[修訂] (6 人次, 2009-05-24)
- HTC HD Touch的專屬多媒體轉檔工具:Video Converter 1.21 (6 人次, 2009-04-11)
- 替資料夾圖示換新妝 (5 人次, 2006-08-18)
- phpMyAdmin的替代品:SQL Buddy (5 人次, 2008-12-06)
- 視窗工具百寶箱:Commands in Demand (5 人次, 2009-08-14)
- 命令提示字元的完美替身:PowerCmd與Console 2.0 (5 人次, 2008-05-09)
- [Tools] 7-Zip的命令列指令 (5 人次, 2005-02-23)
- FireFox 2.0錯誤的解決方法 (5 人次, 2006-12-18)
- 用FinchSync同步Thunderbird與HTC Touch HD的聯絡人資料 (5 人次, 2009-02-01)
- 簡單放大Plurk輸入區的方法[修訂] (5 人次, 2008-09-29)
- [WordPress] 資料庫切換成UTF-8的匯出/匯入紀錄 (4 人次, 2008-12-06)
- 能與Google Reader同步的Windows Mobile RSS reader? (4 人次, 2009-03-09)
- 接聽電話後重新顯示螢幕的偵測軟體:Touch InCall Screen Tweak (4 人次, 2009-03-12)
- [Windows] 用mklink與junction建立資料夾連結 (4 人次, 2009-01-11)
- 如何組成強固又容易記憶的密碼? (4 人次, 2009-01-07)
- Spb Mobile Shell設定備忘 (4 人次, 2009-02-19)
- [FireFox] 無法使用Copy / Paste的原因 (4 人次, 2005-03-21)
- 網路衝浪新幫手-無所不在的Firefox Ubiquity (4 人次, 2008-12-16)
- 用gTimeSync讓Windows Mobile做網際網路時間同步校正 (4 人次, 2009-05-17)
- Linus談Git與TortoiseGit (4 人次, 2008-12-19)
- [轉貼] Smart NTFS Recovery:強力檔案回復專家 (4 人次, 2006-06-09)
- 用RMVB多媒體播放器在電視觀賞RMVB影片[修訂] (4 人次, 2009-11-18)
- 測試Exec-PHP外掛:開啟插頁於新頁籤 (4 人次, 2009-11-24)
- Vista IE8的window.open異常 (4 人次, 2009-11-04)
- 部落格被冒名頂替事件紀錄 (4 人次, 2009-11-17)
- 把FTP網站變成虛擬磁碟機的工具:NetDrive (4 人次, 2009-01-04)
- [WordPress] 在插頁寫PHP的外掛:EXEC-PHP,讓行動版網頁顯示訪客統計 (4 人次, 2009-11-22)
- 兼具功能性與方便性的螢幕擷取軟體:Screenpresso (4 人次, 2010-01-17)
- 能在HD手機上順暢運行的3D賽車+射擊遊戲:Xtrackt (4 人次, 2009-09-12)
- 使用Word 2010 Beta/2007寫Blog文章 (4 人次, 2010-01-19)
- 參戰ClickClickClick大賽:我的自動點擊程式ccc.exe V1.3 (4 人次, 2007-06-16)
- 和風部落格FC2有中文版了 (4 人次, 2008-08-10)
- [Plurk] 如何顯示12個噗浪朋友圖示? (4 人次, 2010-01-24)





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