• HTML編輯器錨點語法教學

    • 最後更新 2021-10-29 17:14

     

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

    WACA 後台 HTML 編輯器使用範圍

    商品登錄  商品分類  編輯分類(分類廣告文字編輯器)

    商品登錄  商品列表  編輯商品(商品說明)

    商店設定  商店介紹(關於)

    商店設定  購物說明(付款方式/寄送方式/訂單相關/售後服務/隱私權條款)

    行銷推廣  促銷活動  任選活動(任選活動活動說明)

    行銷推廣  促銷活動  紅配綠(紅配綠活動說明)

    行銷推廣  組合活動(組合活動說明)

    行銷推廣  現金積點(現金積點活動說明)

    會員管理  會員等級(會員權益說明)

    文章管理  自訂頁面  新增/編輯自訂頁面(自訂頁面內容編輯)

    文章管理  部落格  新增/編輯部落格(部落格文章編輯)

     

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

     

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

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

    網路開店HTML編輯器紅色小問號說明

     

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

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

     

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

    文字錨點設定方式

    圖片錨點設定方式

    注意事項(必讀!)

     


     

     

     

    文字錨點設定方式

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

    網路開店HTML編輯器文字錨點設定畫面

     

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

    網路開店HTML編輯器原始碼按鈕位置

     

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

    網路開店HTML編輯器純文字原始碼

     

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

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

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

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

    網路開店HTML編輯器原始碼找出放置錨點位置

     

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

    請將『&nbsp;』(空白語法)移除

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

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

    備註:在語法" "內的『11111』僅為示範使用,可以使用自訂的段落名稱(用自己可以識別的段落名稱即可)

     

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

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

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

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

    網路開店HTML編輯器原始碼更改語法

     

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

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

    網路開店HTML編輯器設置文字錨點連結

     

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

    網路開店HTML編輯器插入編輯連結加入錨點

     

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

    網路開店HTML編輯器加入錨點設定後需儲存更新

     

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

    網路開店HTML編輯器顯示藍色文字加底線代表連結設定完成

     

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

    網路開店HTML編輯器原始碼錨點設定完成語法圖示

     

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

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

    網路開店HTML編輯器錨點設完成後編輯器會顯示錨點圖示

     

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

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

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

    網路開店HTML編輯器前台商品頁文字錨點操作

     

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

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

    文字錨點
    HTML原始碼

    <p><a href="#1">▶ 我是連結A,點我會跳到 【1】</a></p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p><a name="1"></a></p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>【1】點連結A會跳到這</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    呈現效果

    ▶ 我是連結A,點我會跳到 【1】

     

     

     

     

    【1】點連結A會跳到這

     

     

     


     

     

     

    圖片錨點設定方式

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

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

    網路開店HTML編輯器圖片錨點圖示

     

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

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

    在圖片網址欄位中放置圖片網址(網址結尾必須是.jpg/.png/.gif)才是完整的圖片網址

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

    網路開店HTML編輯器插入圖片網址

     

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

    網路開店HTML編輯器開啟原始碼

     

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

    網路開店HTML編輯器圖片原始碼

     

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

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

     

    網路開店HTML編輯器找出對應圖片的原始碼

     

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

    備註:在語法" "內的『AAAAA』僅為示範使用,可以使用自訂的段落名稱(用自己可以識別的段落名稱即可)

     

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

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

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

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

    網路開店HTML編輯器目標圖片原始碼上方加入錨點語法

     

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

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

    網路開店HTML編輯器設置錨點完成後會顯示錨點圖示

     

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

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

    網路開店HTML編輯器點擊圖片插入編輯連結

     

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

    網路開店HTML編輯器插入編輯連結設定加入錨點

     

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

    網路開店HTML編輯器加入錨點後點擊儲存

     

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

    網路開店HTML編輯器連結及圖片同時反灰代表圖片連結完成

     

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

    網路開店HTML編輯器完成錨點設定的原始碼

     

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

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

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

    網路開店HTML編輯器前台商品頁實際點擊圖片錨點效果

     

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

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

    圖片錨點
    HTML原始碼

    <p><a href="#A"><img src="https://i.imgur.com/aKABfIy.png" width="162" height="281" /></a></p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p><a name="A"></p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p><img src="https://i.imgur.com/ouGOwxv.png" alt="" width="222" height="281" /></p>

    <p>&nbsp;</p>

    呈現效果

     

     

     

     

     

     


     

     

     

    注意事項

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

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

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

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

     

     

TOP