WordPress 菜單連結失效？修復 Elementor Popup 觸發問題

在 Elementor 中，我們常利用「Action Links」來達成點擊選單開啟 Popup 的功能。但在某些佈景主題或 WordPress 版本中，選單系統會自動對連結進行安全性檢查，導致 #elementor-action 這種特殊格式被強行補上網域前綴，或是直接遭到過濾，最終造成點擊後彈窗毫無反應。這類問題通常發生在 WordPress 的 URL 清理機制（Sanitization）與 Elementor 專屬動作連結產生衝突時。

為什麼選單連結無法觸發 Elementor 彈出視窗？

WordPress 核心為了安全性，會透過 esc_url() 等函式來清理 URL。當你在自訂連結中填入 Elementor 生成的動作代碼時，WordPress 有時會誤判該路徑為相對路徑，並自動補上完整的網址，例如將 #elementor-action... 變成 https://yourdomain.com/#elementor-action...。然而，Elementor 的 JavaScript 監聽器需要精確匹配以「#」開頭的字串才能啟動 Popup。一旦連結格式被修改，瀏覽器只會將其視為一般的頁面錨點跳轉，而非執行特定的 JS 指令。

方案一：前端 JavaScript 全域修復（最推薦）

這是最直接且不影響後端資料庫的做法。透過監聽網頁底部的選單點擊事件，強制移除被誤加的網址前綴，確保 Elementor 能夠接收到純粹的動作代碼。

add_action('wp_footer', 'fix_elementor_popup_menu_links');
function fix_elementor_popup_menu_links() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        // 尋找所有包含 Elementor 動作連結的錨點
        $('a[href*="#elementor-action"]').each(function() {
            var href = $(this).attr('href');
            // 如果 URL 被補上了協議或網域，則將其移除，保留 # 之後的內容
            if (href.indexOf('http:') === 0 || href.indexOf('https:') === 0) {
                var anchorIndex = href.indexOf('#elementor-action');
                if (anchorIndex !== -1) {
                    href = href.substring(anchorIndex);
                    $(this).attr('href', href);
                }
            }
        });

        // 確保點擊時觸發 Elementor 行為而不產生預設跳轉
        $('a[href^="#elementor-action"]').on('click', function(e) {
            e.preventDefault();
        });
    });
    </script>
    <?php
}

方案二：後端 PHP 過濾選單物件

在選單 HTML 輸出之前，透過 wp_nav_menu_objects 鉤子攔截並修正連結。這可以確保原始 HTML 中的 href 屬性就是乾淨的格式。

add_filter('wp_nav_menu_objects', 'allow_custom_menu_urls', 10, 2);
function allow_custom_menu_urls($items, $args) {
    foreach ($items as &$item) {
        // 檢測 URL 是否包含 Elementor 動作指令
        if (strpos($item->url, '#elementor-action') !== false) {
            // 移除可能被 WordPress 自動補上的網域部分
            $item->url = preg_replace('/^https?:\/\/[^\/]+/', '', $item->url);
        }
    }
    return $items;
}

方案三：放寬 URL 驗證規則

直接修改 WordPress 對連結的清理邏輯，讓系統將以 #elementor-action 開頭的字串視為合法且不需額外處理的 URL。

// 禁用菜單項 URL 的 esc_url 過濾
add_filter('esc_url', 'allow_elementor_action_urls', 10, 3);
function allow_elementor_action_urls($url, $original_url, $context) {
    if ($context === 'display' && strpos($original_url, '#elementor-action') !== false) {
        return $original_url;
    }
    return $url;
}

// 修改選單保存時的驗證規則
add_filter('sanitize_url', 'custom_sanitize_menu_url', 10, 3);
function custom_sanitize_menu_url($url, $original_url, $context) {
    if (strpos($original_url, '#elementor-action') === 0) {
        return $original_url;
    }
    return $url;
}

踩坑提醒與實務建議

實作懶人包，照作就能用

1. 到 WordPress 後台安裝並啟用 FluentSnippets 外掛。
2. 進入 FluentSnippets 點擊新增片段，類型選擇 PHP。
3. 複製文章中「方案一：前端 JavaScript 全域修復（最推薦）」的完整程式碼並貼上。
4. 儲存片段並將狀態切換為 啟用。
5. 清除網站快取，到前台確認選單點擊後是否能正常開啟 Elementor 彈出視窗。