HTML編輯器錨點語法教學
最後更新 2023-10-31

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://img.waca.net/uploads/blog/427/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://img.waca.net/uploads/blog/427/ouGOwxv.png" alt="" width="222" height="281" /></p>

<p>&nbsp;</p>

呈現效果

 

 

 

 

 

 


 

 

注意事項

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

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

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

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

 

 

elearning

 

相關文章
馬上預約諮詢,整合線下與線上商機
您有興趣的內容
必填
您的姓名
必填
連絡電話
必填
電子信箱
必填
目前使用什麼工具進行預約管理
必填
服務類型與產業別
必填
商店規模
必填
公司/商店名稱
所在區域
專人諮詢
預約專人諮詢
馬上免費註冊