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

2008/11/30 |

| 點擊數: 1 / 5001

在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），以加入設定這些定錨點的程式：

先找到最新文章的函數：function wp_widget_recent_entries
在下面這行的上方增加<a name>如下（注意要加程式碼是否在<?php與?>區域內，若在區域外則前後要附加<?php與?>，在區域內則不用附加）：
```
  <?php echo ''; ?>
  <?php echo $before_title . $title . $after_title; ?>
```
再依序找到最新留言function wp_widget_recent_comments、文章彙整function wp_widget_archives，加入相同程式。定錨點的名稱直接使用側邊欄的Title，即程式裡的$title。

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

##