將 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 選單