簡睿隨筆@新世界

 

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

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

1

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

anchor.php的範例內容：

1
2
3
4
5
6
7

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

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

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

   1 2	<?php echo '<a name="' . $title . '"></a>'; ?> <?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，加入同樣的程式碼即可。加了定錨點後的網頁可以用本網站測試其效果。

##

相關文章

• 在WordPress裡測試PHP指令的方法 (0)
• WordPress 3.0與PHP 5的時區問題 (0)
• 用cPanel Proxy穿透防火牆以操作網站cPanel後台 (0)
• 網站又搬家了；落腳ACSite.NET (4)
• 自動產生文章目錄的WordPress外掛：jQuery Table of Contents (0)

標籤: WordPress