WordPress Anchor Text

WordPress Anchor Text 錨點文字連結，網站內容中經常被使用到，特別是那些一頁式的網站，這個頁內連結就更顯得重要了。

有使用 SEO 外掛程式的朋友，特別像是 Yoast SEO，應該會注意到它的發文建議中，常常提到文章需要建立外部連結與內部連結，而這些連結的文字就是所謂的 Anchor Text。不過今天我想要跟大家分享的是如何將這個錨點文字連結，運用在同一個頁面中，讓訪客可以直接跳到需要的文章段落。特別是那些一頁式網頁的網站，這個功能對於網站內容被確實讀取，有著很大的幫助。有興趣的朋友不妨參看看，如果您想要建置一頁式網頁的網站，那麼今天分享的文章內容不要錯過。

今天的文章內容以 Vantage 佈景主題來做示範，這一款佈景主題提供了很棒的一頁式網頁設計，讓我們可以很輕鬆的建置好一頁式的網站。
關於錨點文字連結的展示功能，我們透過選單建立的方式，讓訪客可以透過選單的點擊，直接跳到頁面的指定文章段落。建立的步驟如下：
- 請點選外觀/選單/新增選單，選單的連結我們使用自訂連結的方式建立，連結的網址先以 http://# 來做臨時的設定值，以此類推依序建立好網站的單項目。
- 接著修改連結網址的設定值，將 http://# 改成專屬獨特的 ID，以示範文章為例專屬的 ID：#max-link-01，依序為每個選單項目建立好各自的 ID。
- 選單建立完成以後，接下來要為文章內容設定段落的錨點，以 Vantage 佈景主題來說，因為搭配的是 Page Builder by SiteOrigin 頁面編輯器，所以我們可以很輕鬆的就對每個指定的段落，建立獨特的 ID，開啟頁面編輯的畫面，點擊區塊的設定符號進行編輯。
- 在 Row ID 欄位，依序填入我們在選單建立的獨特專屬 ID。整個頁面區塊段落的 ID 設定完成以後，這個一頁式網頁的點擊選單跳到指定段落內容的相關作業就完成了。

選單與頁面段落設定完成以後，就可以在網頁上看到點擊連結產生的效果（如下方影片所示）。

不過這個跳到連結的效果太直接，感覺上沒有很平順，所以在接下來的內容，我們將分享增加一點點的程式碼，讓這個跳到文章段落的動作更滑順（Smooth Scrolling），展現更優雅的設計模式。
為了讓網頁跳到指定段落比較滑順，將透過在頁尾加上 js 語法，幫助我們點擊時網頁平順的移到到指定的 ID。基本上有兩個設定值會影響網頁移動效果，一個是：var customoffset = 80; 數值 80 是指距離網頁上方的高度，大家可以自行測試找到最適合的高度值。另外一個設定值是移動的時間（單位是毫秒），({scrollTop:target_offset – customoffset}, 500)：500 是指 500毫秒，一秒等於 1000 毫秒，同樣的可以反覆測試，找到自己最喜歡的滑移速度。

$('a[href^="#"]').live('click',function(event){
    event.preventDefault();
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
    //change this number to create the additional off set        
    var customoffset = 80;
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);
});

$('a[href^="#"]').live('click',function(event){

event.preventDefault();

var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;

//change this number to create the additional off set

var customoffset = 80;

$('html, body').animate({scrollTop:target_offset - customoffset}, 500);

});

要將語法加到 WordPress 的頁尾方法也很多，今天簡單的分享其中兩種方式。第一種是直接在頁尾檔案裡面加上 jQuery 語法，另外一種則是透過編輯子佈景主題的 functiuons.php 檔案，兩種方式都是需要先建立好子佈景主題，只要擇一使用就可以了。
方法一：複製佈景主題的 footer.php 檔案到子佈景主題資料夾，透過文字編輯軟體編輯這個 footer.php 檔案，找到 </body> 在它之前填入程式碼。

<script>
jQuery(function($) { 
 
$('a[href^="#"]').live('click',function(event){
    event.preventDefault();
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
    //change this number to create the additional off set        
    var customoffset = 80;
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);
});
 
}(jQuery));
</script>

jQuery(function($) {

$('a[href^="#"]').live('click',function(event){

event.preventDefault();

var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;

//change this number to create the additional off set

var customoffset = 80;

$('html, body').animate({scrollTop:target_offset - customoffset}, 500);

});

}(jQuery));

</script>

方法二：編輯子佈景主題的 functions.php 檔案，填入以下語法：

add_action( 'wp_footer', function() { ?>
	<script>
		( function( $ ) {
			'use strict';
			$( document ).on( 'ready', function() {
				$('a[href^="#"]').live('click',function(event){
					event.preventDefault();
					var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
					var customoffset = 80;
					$('html, body').animate({scrollTop:target_offset - customoffset}, 500);
				});
			} );
		} ( jQuery ) );
	</script>
<?php } );

add_action( 'wp_footer', function() { ?>

( function( $ ) {

'use strict';

$( document ).on( 'ready', function() {

$('a[href^="#"]').live('click',function(event){

event.preventDefault();

var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;

var customoffset = 80;

$('html, body').animate({scrollTop:target_offset - customoffset}, 500);

});

} );

} ( jQuery ) );

</script>

<?php } );

上述兩種方法擇一使用就可以了，這時選單連結的效果滑順多了（Smooth Scrolling），也不會覺得突兀。

結論

基本上很多提供一頁式網頁的佈景主題，通常都會有點擊選單跳到指定頁面，提供平順移動的效果（Smooth Scrolling），因為今天示範的佈景主題沒有提供，才興起了要尋求其他語法來幫助解決的想法，因而有了今天的文章內容。希望讓新手朋友學習到如何在文章內容建置錨點文字連結，如何在佈景中加入程式碼語法，即使是不懂得程式設計的朋友，也可以運用得很愉快。

參考文件：

How to Add Smooth Scrolling for Anchor Links

Adding Javascript To WordPress Themes The Right Way

Featured

WP Reset 重設工具外掛程式

Featured

WordPress Add New Plugins 安裝外掛程式

如何加強 WordPress 網站安全

WordPress 新手佈景主題推薦

Image Scroll on Hover 圖片捲動效果

WordPress Anchor Text – 錨點文字連結