如何使用jQuery自訂WordPress選單的點擊行為

在WordPress網站中，某些選單項目預設會觸發展開子選單的功能。但若你希望改為點擊時直接導向特定URL，可以透過jQuery來實現。本文將詳述如何在WordPress中自訂選單的行為。

1. 新增HTML區塊

進入你的WordPress後台。
在網站建構器（例如Elementor、WPBakery等）中選擇你想要加入jQuery程式碼的頁面，並新增一個HTML區塊。
在HTML區塊中，輸入以下程式碼：

				
					<script>
jQuery(document).ready(function($) {
    // 選擇需要修改的選單項目（根據實際情況調整選擇器）
    $('.uael-nav-menu li.menu-item').on('click', function(event) {
        event.preventDefault(); // 阻止預設行為（展開）

        // 取得目標連結
        var targetUrl = $(this).find('a').attr('href');

        // 跳轉至目標連結
        if(targetUrl) {
            window.location.href = targetUrl;
        }
    });
});
</script>

2. 確認選擇器的準確性

$('.uael-nav-menu li.menu-item') 是用來選擇選單項目的選擇器，請確認這與你實際需要修改的選單結構一致。
你可以使用瀏覽器的開發者工具（按 F12 或 Ctrl + Shift + I）查看HTML結構，確定選擇器是否正確。

3. 測試jQuery程式碼是否生效

在網站前台重新整理頁面。
點擊你自訂的選單項目，確認是否會跳轉到指定URL，而不是展開子選單。
若行為沒有如預期，請開啟瀏覽器的開發者工具並在 “Console” 頁籤中檢查是否有任何錯誤訊息。

4. 排除常見問題

jQuery是否正確載入？

在 “Console” 頁籤中輸入以下指令來檢查jQuery是否正確載入：

				
					console.log(typeof jQuery);

如果輸出結果是 "function"，表示jQuery已正確載入；若不是，請確認你的WordPress網站是否正確引入jQuery庫。

選擇器不匹配？

若選單項目未能被正確選中，請檢查你的HTML結構，並根據需要調整選擇器。例如使用 class 或 id 來更精確地選擇元素。

效果展示

預設-有展開動作

選單需要點擊兩次才會導向目標網址。

自訂後-直接導向目標網址

可以直接導向目標網址。

[email protected]