感謝㊣贊助鼓勵!

Google搜尋 »

分類

簡睿在噗浪»

有朋自遠方來

用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>

##

相關文章

2 則留言 »用jQuery改造WordPress網頁

  • betty Windows XP Internet Explorer 6.0

    可以請教一下如何將wordpress側邊欄改成toggle or slide sidebar,謝謝!

    • 簡睿 Windows Vista Google Chrome 4.0.222.3

      這…這篇不就是在講這個嗎…?

      首先確定你的WordPress已經有包含jQuery了,再找你側邊欄的ID(我的是sidebar),用 $(“#sidebar”).toggle();就可以做顯示/隱藏的切換。

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

隨機文章

  1. [轉貼Toget] 為MSN增加更多精彩的動畫快遞&圖示 
  2. 文字編輯器印象與jEdit (6)
  3. Meebo: 用IE隨地使用即時通訊軟體 (1)
  4. 自動清除Firefox的快取記憶體:Cache Status (1)
  5. [Java] IDEA 5.0正式釋出 
  6. [報導] Eclipse Casts Shadow on Sun 
  7. 令人廢寢忘食的小說:《時間迴旋》(Spin) 
  8. 資料庫工具Aqua Data Studio躍升至6.0版 
  9. [OOo] 表格製作的快速鍵巨集 
  10. 輕鬆轉換到Subversion的工具:svn importer 

歷史熱門文章

  1. Plurk CSS樣式自訂修改全攻略 (30,962 點擊/2009-07-04)
  2. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (20,274 點擊/2009-02-18)
  3. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (17,547 點擊/2009-06-07)
  4. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (16,753 點擊/2009-04-18)
  5. 強化HTC Touch HD的工具軟體 (14,969 點擊/2009-02-25)
  6. 如何手動輸入Plurk的表情圖示? (13,959 點擊/2008-09-29)
  7. 增加Spb Mobile Shell 3.0生活化桌面頁數的小技巧 (13,743 點擊/2009-04-27)
  8. 簡單放大Plurk輸入區的方法[修訂] (13,049 點擊/2008-09-29)
  9. 將Plurk回應區變成固定寬度 (12,873 點擊/2009-07-11)
  10. 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (12,514 點擊/2009-06-06)