WordPress 頁內連結

頁內連結就是像以下的連結，可以跳到同一個頁面裡面的不同區段。

回頂端

▶html連結語法 ▶HTML頁內連結語法 ▶平滑捲動 ▶回頂端浮動端按鈕

HTML 連結語法

因為我們是初心者筆記，所以還是要提一下 HTML 的基本連結語法。

▼一般來說我們要下連結時用的語法如下

<a href=”http://www.google.com“>前往Google</a>

綠色是會出現在頁面上的文字，藍色是要前往的網址，橘色就是HTML標籤。

如果我們在wp的文章編輯欄位右上角把模式從「預覽」切換為「文字」就會看到這一頁實際上的html語法。

HTML 頁內連結語法

指定 id

如果我們是要做頁內連結，語法和上述有點不一樣。

▼首先我們要先標記要前往的段落，比如說如果你切換到「文字」模式，你會看到像上面這個標題的語法可能是：

<h2>HTML 頁內連結語法</h2>

▼我們要在這個<h2>的標籤裡面指定一個 id 給它，名字就取「inpage」好了，語法如下：

<h2 id=”inpage”>HTML 頁內連結語法</h2>

＊所有的 HTML 標籤都可以指定 id ，如<div>, <p>, <table>等。

下連結

▼指定了 id 位置後，我們就可以來下連結，下連結的方式如下：

<a href=”#inpage“>跳到HTML頁內連結語法</a>

就是 id 名字前面加個 # 這樣就好了，其他語法和一般的 HTML 連結一樣。

▼如果你是從別的頁面要連結過來這一頁的這一段，語法如下：

就是在原有的網誌後面加上#idname 這樣就可以了。

平滑捲動

當做好上面的步驟時，會發現頁面在跳到指定段落時，會發現它是瞬間切換，而不是像目前我們看到的這個頁面會有平滑選動的效果。
▼我們還需要加上一段 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 = 90;
$('html, body').animate({scrollTop:target_offset - customoffset}, 500);
});

}(jQuery));
</script>

要加入這段 jQuery 有很多種方式，我推薦的是安裝一個外掛：Code Embed 來讓我們把 jQuery 放進去。

這個外掛在之後有用到 javascript 或是特定頁面需要特別的 CSS 時都會用到。

關於如何使用 Code Embed 可以參考這篇：怎麼在個別文章/頁面加入 javascript 或 CSS?

回頂端 Back to top 浮動端按鈕

▼如果你想要有一個像右下角的「回頂端」按鈕，就是先在頁面的開頭指定一個 id，比如我把最上方的第一行文字放到<p>標籤裡面，並且給他一個 id 叫做 “top”。(這一段是寫在文章裡面，擠得切換到“文字”模式編輯)

<p id="top">頁內連結就是像以下的連結，可以跳到同一個頁面裡面的不同區段。</p>

▼接下來我需要一個 CSS 來定義「回頂端」這個區塊的位置和顏色等等，我們可以直接把它放在「外觀 > 自訂 > 進階 > 進階的CSS」裡面，也可以用 Code Embed 只在需要用到的頁面才呼叫。

.fixedmenu{
position:fixed;
right:20px;
bottom:20px;
background-color:#0073ff;
z-index:500;
color:#fff;
opacity: 0.9;
border-radius:50%;
width:70px;
height:70px;
display:flex;
flex-direction: row;
align-items: center;
justify-content:center;
}

.fixedmenu a{
text-decoration:none!important;
color:#fff!important;
}

▼然後我們就可以在這一頁用一個<div>來放這個「回頂端」的連結選單，這一段放在頁面的任何地方都可以。(這一段也是寫在文章裡面，擠得切換到“文字”模式編輯)

<div class="fixedmenu"><a href="#top">回頂端</a></div>

這樣就完成了。

Daco Note