WACA 後台以下位置均設有 HTML 編輯器,可自行編輯文字/圖片說明使用。如果在編輯器所放置的的文字/圖片內容很長、在編輯內容時希望讓消費者點擊特定文字/圖片連結,可以快速跳至『同一頁面』的指定段落,此時我們可以使用 HTML 的錨點語法來設置錨點功能使用。
此篇教學適合了解 HTML 語法概念的使用者使用
關於 HTML 編輯器的使用規則與限制,請詳閱 WACA 後台紅色小問號說明,以及《後台 HTML 編輯器》這篇文章教學喔!
HTML 編輯器只允許使用 html tag 及編輯器內所使用的樣式及排版功能,其它非 html tag (例如:CSS) 語法都會篩選過濾移除,因此,如果需要在編輯器內使用錨點功能,只能使用『name』語法嵌入使用,不支援『id』語法喔!
文章包含以下內容,可點擊連結快速前往段落:(這個就是使用錨點設定的喔!)
-
文字錨點設定方式
以下圖為例,希望讓點擊橘框處文字連結,頁面會跳到下方藍色箭頭處:
請在編輯器內將所有的文字編輯完成後,點擊編輯器內『』原始碼按鈕。
會顯示編輯器內的原始碼資訊:
如開頭的圖示說明為例,我們目標是讓消費者點擊『我是錨點連結A,點我可以跳到錨點【1】』連結後,直接跳至『點連結A可以跳來這段文字』的所在位置。
因此需要先從原始碼內,找出『點連結A可以跳來這段文字』的語法位置( 可以在原始碼頁面使用 『Ctrl+F/⌘+F』開啟搜尋功能並輸入關鍵字搜尋目標的錨點語法處)
找到目標文字後,請於該段文字上方找出放置錨點的位置:
以 HTML 語法來說『<p> </p>』是代表按 Enter 鍵後所顯示的空白行語法,請將『 』(空白語法)移除,將語法改為『<a name="11111"></a>』
修改後完整的語法是 ➜ <p><a name="11111"></a></p>
- 備註:在語法" "內的『11111』僅為示範使用,可以使用自訂的段落名稱(用自己可以識別的段落名稱即可)
- 段落名稱取名規則建議如下:
- 請使用『英文/數字』編輯
- 建議不要使用空白或特殊符號
設定完成後,請點擊右下角的『』按鈕更新,此時您已經將錨點語法埋設在原始碼內。
接著我們需要繼續設定連結,在回到編輯器畫面後,請選取欲設定連結的文字連結,將文字框成藍底後,請點擊『』圖示,進入插入/編輯連結設定畫面。
在插入/編輯連結頁面,請於『加入錨點』處,選擇剛剛於原始碼內設置錨點的段落名稱。
設定完成後請點擊【儲存】。
當剛剛框起的文字呈現藍字加底線時,代表已經將連結設定完成。
完成設定錨點及連結後的原始碼如下:
在設定錨點成功後,在編輯器內可以看到下方橘框處圖示,這就是錨點的圖示,錨點圖示只會顯示在編輯器內,從前台網頁是看不到的喔!
按照上方說明設定錨點及連結完成後,我們實際到商店前台頁面操作,點擊連結後,就會直接跳到同一頁面的指定段落。這個就是 HTML 的文字錨點功能喔!
以上是搭配 HTML 編輯器功能設置錨點的使用教學,如果您會直接使用原始碼設定語法,可以複製下方表格內的原始碼後再自行編輯使用喔!
文字錨點 |
HTML原始碼 |
<p><a href="#1">▶ 我是連結A,點我會跳到 【1】</a></p> <p> </p> <p> </p> <p><a name="1"></a></p> <p> </p> <p> </p> <p>【1】點連結A會跳到這</p> <p> </p> <p> </p> |
呈現效果 |
【1】點連結A會跳到這
|
-
圖片錨點設定方式
除了可以使用文字錨點外,圖片也一樣可以設置錨點使用喔!以下圖為例,我們希望點擊橘框處的圖片連結,頁面會跳到下方藍色箭頭處。
請先點擊編輯器內的『』圖示,進入插入/編輯圖片設定頁面,編輯器放置圖片教學,請參照《後台 HTML 編輯器 ➜ 插入圖片》這篇文章說明
在圖片網址欄位中放置圖片網址(網址結尾必須是.jpg/.png/.gif)才是完整的圖片網址,在設置錨點前,請先在編輯器內將所有的圖片都編輯完成喔!
圖片設置完成後,請點擊編輯器內『』原始碼按鈕。
會顯示編輯器內的原始碼資訊。
如開頭的圖示說明為例,我們目標是讓消費者點擊『』圖片後,直接跳至『
』所在位置,因此我們需要先從原始碼內,找出這二張圖片的語法位置,例如以下圖示:
因為錨點目標是『』,找到『
』語法處後,請於目標圖片原始碼的上方加入錨點語法『 <p><a name="AAAAA"></a></p>』
- 備註:在語法" "內的『AAAAA』僅為示範使用,可以使用自訂的段落名稱(用自己可以識別的段落名稱即可)
- 段落名稱取名規則建議如下:
- 請使用『英文/數字』編輯
- 建議不要使用空白或特殊符號
設定完成後,請點擊右下角的『』按鈕更新,此時您已經將錨點語法埋設在原始碼內:
在設定錨點成功後,在編輯器內可以看到下方橘框處圖示,這就是錨點的圖示,錨點圖示只會顯示在編輯器內,從前台網頁是看不到的喔!
在回到編輯器畫面後,我們要繼續設定圖片連結,選取欲設定連結的圖片(點擊後會顯示藍色外框),請點擊『』圖示,進入插入/編輯連結設定畫面。
在插入/編輯連結頁面,請於『加入錨點』處,選擇剛剛於原始碼內設置錨點的段落名稱。
設定完成後請點擊【儲存】
若想確認圖片網址是否有設置完成,在點擊圖片後《插入/編輯連結》和《插入/編輯圖片》按鈕同時呈現灰底時,代表圖片已設置連結完成。
完成設定錨點及連結後的原始碼如下:
按照上方說明設定錨點及連結完成後,我們實際到商店前台頁面操作,點擊『』後,就會直接跳到同一頁面的『
』圖片位置,這個就是 HTML 的圖片錨點功能喔!
以上是搭配 HTML 編輯器功能設置錨點的使用教學,如果您會直接使用原始碼設定語法,可以複製下方表格內的原始碼後再自行編輯使用喔!
圖片錨點 |
HTML原始碼 |
<p><a href="#A"><img src="https://img.waca.net/uploads/blog/427/aKABfIy.png" width="162" height="281" /></a></p> <p> </p> <p> </p> <p><a name="A"></p> <p> </p> <p> </p> <p><img src="https://img.waca.net/uploads/blog/427/ouGOwxv.png" alt="" width="222" height="281" /></p> <p> </p> |
呈現效果 |
|
-
注意事項
以上為 HTML 錨點語法設置概念說明,以下是重要的注意事項再請特別留意:
- 在編輯器內設置錨點時,如欲修正文字/圖片的錨點距離,請使用 Enter 鍵自行調整間距。
- 如頁面長度不足(例如頁面文字很少、圖片不多/圖長很短),建議不要使用錨點功能;原因是如果頁面長度不足,可能導致錨點無法對齊,再請自行評估錨點使用時機。
- 同一個頁面如需放置多個錨點,請留意語法『 <a name="這裡的段落名稱不能重複"> 』紅字部份不可重複;每一個錨點請設置不同的段落名稱使用。