[WordPress] 使用Anchor在目前網頁裡瞬間移動

在WordPress網頁上陸續增加側邊欄（Sidebar）後，整個網頁的長度變長，有時想要移動到某個側邊欄時，都要捲動很多次，於是動手改造以定錨（Anchor，就是使用<a href>和<a name>標籤來設定位置）的方法來達成瞬間移動的功能。想要自己修改的原因是沒找到類似的外掛程式，如果讀者們知道有此功能的外掛時請通知我，套用外掛會比修改原始碼的方法好多了。

首先我在表頭檔（wp-content/themes/使用的佈景主題/header.php）的適當位置增加引入anchor.php，再將移動的連結都放在anchor.php裡：

<?php include (TEMPLATEPATH . '/anchor.php'); ?>

anchor.php的範例內容：

<table>
  <tbody>
    <tr>
      <td><a href="#最新文章">最新文章 | </a></td>
      <td><a href="#最新留言">最新留言 | </a></td>
      <td><a href="#文章彙整">文章彙整 |</a></td>
    </tr>
  </tbody>
</table>

以上做了定錨點的連結，接著就要修改側邊欄的呈現程式（wp-includes/widgets.php），以加入設定這些定錨點的程式：

1. 先找到最新文章的函數：function wp_widget_recent_entries
2. 在下面這行的上方增加<a name>如下（注意要加程式碼是否在<?php與?>區域內，若在區域外則前後要附加<?php與?>，在區域內則不用附加）：

     <?php echo ''; ?>
     <?php echo $before_title . $title . $after_title; ?>

3. 再依序找到最新留言function wp_widget_recent_comments、文章彙整function wp_widget_archives，加入相同程式。定錨點的名稱直接使用側邊欄的Title，即程式裡的$title。

最後，以Text加入的任意文字或HTML的側邊欄則要修改function wp_widget_text，加入同樣的程式碼即可。加了定錨點後的網頁可以用本網站測試其效果。


##

您可能也會有興趣的類似文章

• Step by Step安裝WordPress 3.0與啟用 Multi-Site多站點功能 (20則留言, 2010/07/10)
• 用jQuery改造WordPress網頁 (2則留言, 2009/10/27)
• [WordPress] 在插頁寫PHP的外掛：EXEC-PHP，讓行動版網頁顯示訪客統計 (0則留言, 2009/11/22)
• 測試Exec-PHP外掛：開啟插頁於新頁籤 (0則留言, 2009/11/24)
• 在WordPress裡測試PHP指令的方法 (1則留言, 2010/06/26)
• 修改WordPress 2.8最新迴響的顯示格式 (0則留言, 2009/06/17)
• 手動撰寫WordPress隨機文章功能 (2則留言, 2010/07/13)
• WordPress 3.0與PHP 5的時區問題 (1則留言, 2010/06/24)
• 自製WordPress-mu 2.7的繁體中文語言檔[修訂] (10則留言, 2009/02/09)
• WordPress網站清除後門Reval.C記錄 (0則留言, 2022/10/13)
• [WordPress 3] 將Twenty Eleven佈景主題加上分頁導航樣式 (0則留言, 2012/01/22)
• WordPress減肥記：壓縮JavaScript檔的大小 (6則留言, 2010/06/08)
• 網站又搬家了；落腳ACSite.NET (18則留言, 2010/06/20)
• [WordPress] 顯示網頁的資料庫查詢次數與執行秒數 (0則留言, 2008/12/20)
• [WordPress 3] 以Child Theme機制修改Twenty Eleven佈景主題為中文版 (0則留言, 2012/01/19)