將 Javascript 添加到 WordPress 菜單

問題描述

有沒有辦法把 JavaScript 放在 WordPress 菜單項的 URL 部分？我在我的網站上有一個即時聊天功能，我應該把這個代碼放在網站上，以建立一個鏈接來打開即時聊天 (如這裏建議的) 。

<!-- BEGIN OLARK CHAT LINK -->
<a href="" onclick="olark('api.box.expand')">
    Click here to chat!
</a>
<!-- END OLARK CHAT LINK -->

客户端希望創建的實用程序導航欄中的鏈接在 WordPress 儀錶板中使用 WordPress 菜單。但是當我將 javascript:void(0);" onclick="olark('api.box.expand')複製並粘貼到 WordPress 信息中心的 URL 框中時，它將消失，鏈接保持不活動狀態。

我讀過的內容説，也許我可以在有問題的鏈接上放置一個自定義類，然後編寫一個 Javascript 函數，當該類的鏈接被點擊時觸發。我試過，但是，我不能讓它上班。我不太瞭解 Javascript，所以有可能我寫的完全錯了。

有誰知道如何做到這一點？我想做，而不使用插件。

最佳解決方案

好的，它的作品。如果它是一個客户端，或者如果你只是想要一個更乾淨的代碼，你可以這樣做 @Tom J Nowell 建議。

添加自定義菜單項，將其鏈接到任何地方或任何地方。找出菜單項 ID(每個項目都有一個)，然後使用 jQuery 定位該 ID 。

$("#menu-item-num").on("click", function(e){ 
      e.preventDefault();
      // olark code here
});

這樣，每次用户單擊該 menu-item 時，將觸發上述腳本。您可以通過 functions.php 排列 jquery 腳本。

更新：

確保您的 olark.js 正在加載。如果要將其添加到頁腳或頁眉中，請檢查您的頁面，並確保腳本在那裏。另外，請確保您沒有在瀏覽器的控制枱中收到任何錯誤。

將您的 js 與一個準備好的文檔包起來，以便腳本在正確的時間執行：

jQuery(document).ready(function($) {
  $("#menu-item-38872").on("click", function(e){
  e.preventDefault();
  olark('api.box.expand');
  });
});

鏈接沒有加載的事實意味着腳本本身有問題或腳本沒有加載。

次佳解決方案

解決方案＃1(不理想，但它有效)：

// Live Chat Utility Link
add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
function live_chat_utility_link ( $items, $args ) {
    if ( $args->theme_location == 'utility' ) {
        $items .= '<li><a href="" onclick="olark('api.box.expand')" class="livechat">Live Chat</a></li>';
    }
    return $items;
}

解決方案＃2(理想)：

在上面的評論的幫助下，這裏是為我工作的解決方案。我創建了一個名為 olark.js 的新文件，並將此代碼放在其中：

jQuery(document).ready(function($) {
    $("#menu-item-38872").on("click", function(e){ 
          e.preventDefault();
          // olark code here
          olark('api.box.expand');
    });
});

然後，我使用以下代碼在我的 functions.php 中排隊了腳本：

function olark_script() {
    wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
    wp_enqueue_script( 'olark' );
}

add_action( 'wp_enqueue_scripts', 'olark_script' );

如果不起作用，請確保正確排列您的腳本。我正在使用一個小孩主題，所以我不得不使用 get_stylesheet_directory_uri()而不是 get_template_directory_uri()。

參考文獻

Add Javascript to WordPress Menu

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

將 Javascript 添加到 WordPress 菜單