用jQuery改造WordPress網頁
先前在[WordPress] 使用Anchor在目前網頁裡瞬間移動一文裡提到使用<a name=”下錨點”/>與<a href=”#下錨點”/>的HTML標籤，讓網頁能快速的移動到要檢視的位置，但這個方法必須修改WordPress的原始檔wp-includes/widgets.php，而WordPress更版速度又很快，每次改版就要再修改一次，實在很煩人，乾脆用JavaScript改寫掉好了，這樣才能一勞永逸。
首先在wp-content/themes/你使用的佈景/header.php的<head>區加入引用jQuery的標籤：
<script src="<?php bloginfo(" siteurl"); ?>/wp-includes/js/jquery/jquery.js"></script>
接著在顯示下錨點文字的wp-content/themes/你使用的佈景/anchor.php加上處理的指令，同時也加上側邊欄與文章區的隱藏/切換控制：
<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>
##
您可能也會有興趣的類似文章
- [WordPress] 使用Anchor在目前網頁裡瞬間移動 (0則留言, 2008/11/30)
- Step by Step安裝WordPress 3.0與啟用 Multi-Site多站點功能 (20則留言, 2010/07/10)
- [WordPress 3] 修改Twenty Eleven佈景主題在iPad瀏覽側邊欄的問題 (2則留言, 2012/01/23)
- WordPress減肥記：壓縮JavaScript檔的大小 (6則留言, 2010/06/08)
- WordPress 3.0與PHP 5的時區問題 (1則留言, 2010/06/24)
- 自製WordPress-mu 2.7的繁體中文語言檔[修訂] (10則留言, 2009/02/09)
- [WordPress 3] 將Twenty Eleven佈景主題加上分頁導航樣式 (0則留言, 2012/01/22)
- [WordPress] 在插頁寫PHP的外掛：EXEC-PHP，讓行動版網頁顯示訪客統計 (0則留言, 2009/11/22)
- 修改WordPress 2.8最新迴響的顯示格式 (0則留言, 2009/06/17)
- 自動產生文章目錄的WordPress外掛：jQuery Table of Contents (2則留言, 2010/06/13)
- WordPress網站遭植後門網頁 😡 (0則留言, 2022/08/12)
- WordPress網站清除後門Reval.C記錄 (0則留言, 2022/10/13)
- 行動版的WordPress主題樣式：MobilePress外掛 (0則留言, 2009/03/13)
- [WordPress] 用wp-visitors外掛記錄訪客資訊 (6則留言, 2008/12/25)
- 佈景主題Atahualpa 3.5.2增加WordPress 3.0選單功能 (1則留言, 2010/07/21)
![[WordPress] 更換固定網址(permalink)格式為文章標題](https://jdev.tw/blog/wp-content/themes/hueman/assets/front/img/thumb-medium-empty.png)
可以請教一下如何將wordpress側邊欄改成toggle or slide sidebar,謝謝!
這…這篇不就是在講這個嗎…？
首先確定你的WordPress已經有包含jQuery了，再找你側邊欄的ID(我的是sidebar)，用 $(“#sidebar”).toggle();就可以做顯示/隱藏的切換。