Thêm Javascript vào Menu WordPress

Có cách nào để đặt javascript vào phần URL của một mục menu WordPress không? Tôi có một chức năng trò chuyện trực tiếp trên trang web của mình và tôi phải đưa mã này lên trang web để tạo liên kết để mở trò chuyện trực tiếp (như được đề xuất ở đây).

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

Máy khách muốn liên kết trong thanh điều hướng tiện ích, được tạo ra đã sử dụng menu WordPress trong bảng điều khiển WordPress. Nhưng khi tôi sao chép và dán javascript:void(0);" onclick="olark('api.box.expand')vào hộp URL trong bảng điều khiển WordPress, nó sẽ biến mất và liên kết vẫn không hoạt động.

Một cái gì đó tôi đọc nói rằng có lẽ tôi có thể đặt một lớp tùy chỉnh vào liên kết được đề cập và sau đó viết một hàm Javascript sẽ kích hoạt khi nhấp vào liên kết với lớp đó. Tôi đã thử điều đó, mặc dù, và tôi không thể làm cho nó hoạt động. Tôi không biết nhiều Javascript, vì vậy có thể tôi đã viết nó hoàn toàn sai.

Có ai biết cách để làm điều này không? Tôi muốn làm điều đó mà không cần sử dụng một plugin.

Thật tốt khi nó hoạt động. Nếu đó là cho một khách hàng hoặc nếu bạn chỉ muốn một mã sạch hơn, bạn có thể làm điều đó như @Tom J Nowell đề xuất.

Thêm một mục menu tùy chỉnh, liên kết nó đến bất cứ nơi nào hoặc bất cứ nơi nào. Tìm ra ID mục menu (mỗi mục có một), sau đó nhắm mục tiêu ID đó bằng jQuery.

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

Bằng cách này, mỗi khi người dùng nhấp vào menu-itemtập lệnh ở trên sẽ được kích hoạt. Bạn có thể liệt kê tập lệnh jquery thông qua hàm.php.

Cập nhật:

1. Hãy chắc chắn rằng olark.js của bạn đang tải. Nếu bạn đang thêm nó vào chân trang hoặc tiêu đề, hãy kiểm tra trang của bạn và đảm bảo tập lệnh ở đó. Ngoài ra, đảm bảo bạn không gặp phải bất kỳ lỗi nào trong bảng điều khiển của trình duyệt.

2. Gói js của bạn với một tài liệu đã sẵn sàng, để tập lệnh thực thi đúng lúc:

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

Thực tế là liên kết không tải có nghĩa là có gì đó không đúng với chính tập lệnh hoặc tập lệnh hoàn toàn không tải.

Giải pháp số 1 (không lý tưởng, nhưng nó hoạt động):

// 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="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
    }
    return $items;
}

Giải pháp số 2 (lý tưởng):

Với sự giúp đỡ của các ý kiến ​​trên, đây là giải pháp hiệu quả với tôi. Tôi đã tạo một tệp mới gọi là olark.js và đặt mã này vào đó:

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

Sau đó, tôi đã xử lý tập lệnh trong hàm.php của mình với đoạn mã sau:

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' );

Nếu nó không hoạt động, hãy chắc chắn rằng bạn đang mê hoặc kịch bản của mình. Tôi đang sử dụng một chủ đề con, vì vậy tôi phải sử dụng get_stylesheet_directory_uri()thay vì get_template_directory_uri().

Tôi nghĩ có một lựa chọn 'đáng tin cậy hơn'. Dựa vào số mục của menu không được đảm bảo để hoạt động nếu bạn di chuyển mã của mình từ phát triển sang sản xuất chẳng hạn. Nếu bạn biến số thành một cài đặt, nó sẽ trở nên tốt hơn, nhưng vẫn không thực sự tốt.

Một cách khác có thể là liên kết đến một neo không tồn tại, như #olark, từ mục menu của bạn. Điều này có thể được thiết lập bằng giao diện người dùng và là môi trường đáng tin cậy trên các môi trường. Sau đó, tập lệnh riêng biệt của bạn sẽ quan sát thay đổi băm (trong thanh địa chỉ trình duyệt) và hành động tương ứng.

Một ví dụ về tập lệnh cà phê đơn giản sẽ biên dịch thành javascript để nghe hashchange:

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
#enable sharing the url
if location.hash then @showLogin()

@showLogin là một hàm hiển thị hộp thoại cho phép bạn đăng nhập nếu hàm băm bằng '#login'.

[sửa] Đủ buồn cười, hàm băm trong địa chỉ không thay đổi nếu bạn nhấp vào một mục menu. Điều này là bất ngờ và có thể là do một tập lệnh khác ngăn sự kiện mặc định. Vì vậy, tôi đã phải thêm một dòng khác, để làm cho vị trí cửa sổ thay đổi để đáp ứng với việc nhấp vào một liên kết:

# make sure the hash changes when a link in the menu is clicked (somehow, it doesn't in my case)
$('.menu-item a').click (event) =>
  window.location = $(event.currentTarget).attr 'href'

[/biên tập]

Bạn có thể sử dụng điều này cho Hàm.php để thêm tập lệnh bổ sung vào mục menu điều hướng

function add_nav_class($output) {
$output= preg_replace('/<a/', '<a id="join_club" onclick="awf_Form_.showForm(); return false;"', $output, -1);
return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');