WACA 後台以下位置均設有 HTML 編輯器，可自行編輯文字／圖片說明使用

如果在編輯器所放置的的文字／圖片內容很長、在編輯內容時希望讓消費者點擊特定文字／圖片連結，可以快速跳至『同一頁面』的指定段落，此時我們可以使用 HTML 的錨點語法來設置錨點功能使用；

此篇教學適合了解 HTML 語法概念的使用者使用

關於 HTML 編輯器的使用規則與限制，請詳閱 WACA 後台紅色小問號說明，以及《後台 HTML 編輯器》這篇文章教學喔！

HTML 編輯器只允許使用 html tag 及編輯器內所使用的樣式及排版功能，其它非 html tag (例如：CSS) 語法都會篩選過濾移除，

因此，如果需要在編輯器內使用錨點功能，只能使用『name』語法嵌入使用，不支援『id』語法喔！

文章包含以下內容，可點擊連結快速前往段落：(這個就是使用錨點設定的喔！)

• 文字錨點設定方式
• 圖片錨點設定方式
• 注意事項(必讀！)

文字錨點設定方式

以下圖為例，希望讓點擊橘框處文字連結，頁面會跳到下方藍色箭頭處

請在編輯器內將所有的文字編輯完成後，點擊編輯器內『』原始碼按鈕

會顯示編輯器內的原始碼資訊

如開頭的圖示說明為例，我們目標是讓消費者點擊『我是錨點連結Ａ，點我可以跳到錨點【１】』連結後，直接跳至『點連結Ａ可以跳來這段文字』的所在位置

因此需要先從原始碼內，找出『點連結Ａ可以跳來這段文字』的語法位置，

( 可以在原始碼頁面使用 『Ctrl+F／⌘+F』開啟搜尋功能並輸入關鍵字搜尋目標的錨點語法處）

找到目標文字後，請於該段文字上方找出放置錨點的位置

以 HTML 語法來說『<p>&nbsp;</p>』是代表按 Enter 鍵後所顯示的空白行語法

請將『&nbsp;』（空白語法）移除

將語法改為『<a name="11111"></a>』

修改後完整的語法是 ➜ <p><a name="11111"></a></p>

備註：在語法" "內的『11111』僅為示範使用，可以使用自訂的段落名稱（用自己可以識別的段落名稱即可）

● 段落名稱取名規則建議如下：

① 請使用『英文／數字』編輯

② 建議不要使用空白或特殊符號

設定完成後，請點擊右下角的『』按鈕更新，此時您已經將錨點語法埋設在原始碼內

接著我們需要繼續設定連結

在回到編輯器畫面後，請選取欲設定連結的文字連結，將文字框成藍底後，請點擊『』圖示，進入插入/編輯連結設定畫面

在插入/編輯連結頁面，請於『加入錨點』處，選擇剛剛於原始碼內設置錨點的段落名稱

設定完成後請點擊【儲存】

當剛剛框起的文字呈現藍字加底線時，代表已經將連結設定完成

完成設定錨點及連結後的原始碼如下：

在設定錨點成功後，在編輯器內可以看到下方橘框處圖示，

這就是錨點的圖示，錨點圖示只會顯示在編輯器內，從前台網頁是看不到的喔！

按照上方說明設定錨點及連結完成後，我們實際到商店前台頁面操作，

點擊連結後，就會直接跳到同一頁面的指定段落

這個就是 HTML 的文字錨點功能喔！

以上是搭配 HTML 編輯器功能設置錨點的使用教學，

如果您會直接使用原始碼設定語法，可以複製下方表格內的原始碼後再自行編輯使用喔！

圖片錨點設定方式

除了可以使用文字錨點外，圖片也一樣可以設置錨點使用喔！

以下圖為例，我們希望點擊橘框處的圖片連結，頁面會跳到下方藍色箭頭處

請先點擊編輯器內的『』圖示，進入插入/編輯圖片設定頁面，

編輯器放置圖片教學，請參照《後台 HTML 編輯器 ➜ 插入圖片》這篇文章說明

在圖片網址欄位中放置圖片網址（網址結尾必須是.jpg／.png／.gif）才是完整的圖片網址

在設置錨點前，請先在編輯器內將所有的圖片都編輯完成喔！

圖片設置完成後，請點擊編輯器內『』原始碼按鈕

會顯示編輯器內的原始碼資訊

如開頭的圖示說明為例，我們目標是讓消費者點擊『』圖片後，直接跳至『』所在位置

因此我們需要先從原始碼內，找出這二張圖片的語法位置，例如以下圖示：

因為錨點目標是『』，找到『』語法處後，請於目標圖片原始碼的上方加入錨點語法『 <p><a name="AAAAA"></a></p>』

備註：在語法" "內的『AAAAA』僅為示範使用，可以使用自訂的段落名稱（用自己可以識別的段落名稱即可）

● 段落名稱取名規則建議如下：

① 請使用『英文／數字』編輯

② 建議不要使用空白或特殊符號

設定完成後，請點擊右下角的『』按鈕更新，此時您已經將錨點語法埋設在原始碼內

在設定錨點成功後，在編輯器內可以看到下方橘框處圖示，

這就是錨點的圖示，錨點圖示只會顯示在編輯器內，從前台網頁是看不到的喔！

在回到編輯器畫面後，我們要繼續設定圖片連結

選取欲設定連結的圖片（點擊後會顯示藍色外框），請點擊『』圖示，進入插入/編輯連結設定畫面

在插入/編輯連結頁面，請於『加入錨點』處，選擇剛剛於原始碼內設置錨點的段落名稱

設定完成後請點擊【儲存】

若想確認圖片網址是否有設置完成，在點擊圖片後《插入/編輯連結》和《插入/編輯圖片》按鈕同時呈現灰底時，代表圖片已設置連結完成。

完成設定錨點及連結後的原始碼如下：

按照上方說明設定錨點及連結完成後，我們實際到商店前台頁面操作，

點擊『』後，就會直接跳到同一頁面的『』圖片位置

這個就是 HTML 的圖片錨點功能喔！

以上是搭配 HTML 編輯器功能設置錨點的使用教學，

如果您會直接使用原始碼設定語法，可以複製下方表格內的原始碼後再自行編輯使用喔！

注意事項

以上為 HTML 錨點語法設置概念說明，以下是重要的注意事項再請特別留意：

① 在編輯器內設置錨點時，如欲修正文字/圖片的錨點距離，請使用 Enter 鍵自行調整間距。

② 如頁面長度不足(例如頁面文字很少、圖片不多/圖長很短)，建議不要使用錨點功能；原因是如果頁面長度不足，可能導致錨點無法對齊，再請自行評估錨點使用時機。

③ 同一個頁面如需放置多個錨點，請留意語法『 <a name="這裡的段落名稱不能重複"> 』紅字部份不可重複；每一個錨點請設置不同的段落名稱使用。