在Elementor替按鈕填好網址後，點擊卻離開原頁，通常先看Link旁邊的選項。要保留原頁並開啟另一個頁面，需要設定連結的開啟方式，也要在儲存後的前台實際點擊。只看編輯器裡的按鈕外觀，無法知道訪客最後會去哪裡。
下面以免費版傳統Button連到https://example.com/為例。開啟Open in new window並儲存草稿後，前台連結具有target=”_blank”；實際點擊會開出example.com的新頁，原預覽頁仍保留。這裡的網址是示範目的地，不代表你應把正式按鈕連到它。
先把目的地寫完整
本例使用WordPress 7.1.2、Elementor Free 4.3.3及Twenty Twenty-Five，選中傳統Container裡的Button。先在Content找到按鈕文字和Link欄位，確認選的是你要改的那顆按鈕，尤其同一頁有好幾個相似按鈕時，不要只憑畫面位置猜。
外部網站可以先填完整的https網址，再核對域名、路徑與必要參數。漏掉路徑、貼到測試站地址或多貼空白，都可能讓按鈕開啟錯誤頁。開新視窗只能改開啟位置，不能修復目的地網址；不應為了讓按鈕有反應，隨便先填一個看起來相似的首頁。
同頁錨點、電話、電子郵件與檔案連結是不同用途。它們都可能放在Link欄位，但點擊後的結果不同。如果目標是讓訪客繼續完成本站流程，先確認是否真的需要開新頁，而不是一律對所有按鈕使用相同開啟方式。
從Link旁的齒輪開啟選項
填好Link後，點它旁邊的齒輪圖示。本例的連結選項裡有Open in new window，將它開啟。這個設定通常對應連結輸出的target屬性，不能只用按鈕顏色或游標樣式判斷。不同版本、不同種類的元件，欄位位置或名稱可能改變，應看目前側欄實際提供的控制。
不要把同一區裡的其他選項也一起打開。nofollow處理的是連結關係，不是開新頁；Custom Attributes則是另一種輸出屬性控制。只想保留原頁時，先處理Open in new window，再依實際需求另外核對其他屬性，會比較容易找到問題來源。
如果你是在Text Editor裡替一段文字加連結，操作入口可能不是這個Button的Link欄位。官方對自訂連結屬性也有適用元件範圍，不能把Button的選單套到所有文字連結。先辨認元件與連結來源，避免在錯誤的側欄找設定。
儲存後，核對真正的前台連結
本例使用Save Draft儲存隔離本地頁面，再開啟具有登入權限的草稿預覽。編輯畫布中的按鈕連結已是https://example.com/，但當時DOM讀到的target和rel都是空值。儲存後前台的同一個按鈕，href保持相同，target則是_blank。
這個差異說明，不能拿編輯畫布的DOM直接代替前台輸出。編輯器為了方便選中與修改元件，可能使用不同的互動方式。你應在重新載入的前台找到真正的a元素，確認href指向正確目的地，再看target是否符合設定。
即使前台已經有_blank，仍要實際點一次。本例確實開出example.com的新頁，原草稿預覽仍留在原網址。瀏覽器可依自己的設定把新瀏覽內容放在分頁或視窗，所以「Open in new window」不是保證一定出現另一個獨立桌面視窗。
開新頁與rel屬性分開看
本例前台的rel讀值仍是空值，因此這個操作結果只證明開新頁，不把它寫成已自動加入noopener、noreferrer或nofollow。若網站對外部連結有特定規則，應查看實際輸出的屬性，再依官方提供的欄位與自己的版本功能處理。
MDN說明現代瀏覽器對target=”_blank”有隱含noopener行為；但這不表示HTML必定會明寫rel=”noopener”。行為、原始屬性和你的站點規範是不同層次。本例沒有另外量測window.opener，不把官方通則冒充這顆按鈕的額外實測。
官方Custom Link Attributes說明可使用key|value格式加入連結屬性，並以空白分開同一rel裡的多個值。如果你要使用這種方式，先確認元件提供該欄位，儲存後再讀前台結果。不要把HTML語法直接貼進網址欄，也不要為了加入一個屬性而覆蓋原有必要值。
點擊沒有照設定開啟時，先查儲存版本
先重新載入前台，確認測的是最新儲存頁，而不是還留著舊內容的分頁。再找到正確按鈕，比對文字、href和target。如果頁面有桌面與手機兩份按鈕，可能只改了其中一份；另一份外觀看起來一樣，卻仍使用舊設定。
如果a元素的屬性已正確，但點擊仍走到不同位置，要查看是否有其他腳本攔截點擊、整張卡片另外包了連結，或上層元素擋住按鈕。本篇的普通Button例子不包含這些額外互動，不能只靠一個成功例子排除你網站的所有插件影響。
不要先連續改網址、關開新頁選項、加自訂腳本又清理全部設定。先保存目前值，逐項核對輸出和點擊結果。每次只調整一個相關控制，比把多個選項一起更動，更容易知道是哪一個設定解決了問題。
也替訪客確認這個選擇是否合適
外部文件或另一個服務平台，可能適合保留目前頁面；本站的下一步表單則可能更適合沿原流程進行。按鈕文字應清楚表達目的地或動作，必要時提示會開新頁，讓訪客知道點擊後會發生什麼。
最後使用滑鼠及鍵盤各核對一次，確認按鈕可聚焦、可啟動，目的地也正確。開新頁不是連結品質的全部：錯誤網址、過時內容或含糊的按鈕文字，即使成功出現另一個分頁，仍會讓訪客無法完成原本的事情。
複製按鈕後再查一次目的地
從另一張卡片複製按鈕，可以保留樣式，但通常也會保留當時的網址與開啟選項。把文字從「了解方案」改成「聯絡我們」之後，Link未必跟著換成聯絡頁。修改按鈕文字時，應同時查看實際網址，不能把文案變更當作目的地已更新的證據。
若網址含有查詢參數，也要確認那些參數是否仍屬於新按鈕的用途。不要把另一項服務的識別值一併帶過來，造成表單預選或追蹤對象錯誤。這些檢查不需要先增加新程式，只要逐項看清楚原有連結內容，便能避免許多複製後遺留的問題。
評論0