用jQuery改造WordPress網頁

2009/10/27 |

| 點擊數: 2 / 2044

先前在[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>