Добавить JavaScript в меню WordPress

Есть ли способ поместить javascript в часть URL пункта меню WordPress? У меня есть функция чата на моем сайте, и я должен поместить этот код на сайт, чтобы создать ссылку для открытия чата (как предлагается здесь).

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

Клиенту нужна ссылка в навигационной панели утилиты, которая была создана с использованием меню WordPress на панели инструментов WordPress. Но когда я копирую и вставляю javascript:void(0);" onclick="olark('api.box.expand')в поле URL на панели инструментов WordPress, он просто исчезает, а ссылка остается неактивной.

Что-то, что я прочитал, говорит, что, возможно, я мог бы поставить собственный класс в рассматриваемой ссылке, а затем написать функцию Javascript, которая запускается при нажатии на ссылку с этим классом. Я попробовал это, хотя, и я не мог заставить это работать. Я не знаю много Javascript, так что, возможно, я написал это неправильно.

Кто-нибудь знает как это сделать? Я хотел бы сделать это без использования плагина.

Хорошо, что это работает. Если это для клиента или если вы просто хотите более чистый код, вы можете сделать это, как предложил @Tom J Nowell.

Добавить пользовательский пункт меню, связать его нигде или в любом месте. Определите идентификатор пункта меню (у каждого элемента есть один), а затем нацельтесь на этот идентификатор с помощью jQuery.

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

Таким образом, каждый раз, когда пользователь нажимает на этот menu-itemсценарий, он будет запущен. Вы можете поставить в очередь скрипт jquery через functions.php.

Обновить:

1. Убедитесь, что ваш olark.js загружается. Если вы добавляете его в нижний колонтитул или верхний колонтитул, проверьте свою страницу и убедитесь, что скрипт там. Также убедитесь, что вы не получаете никаких ошибок в консоли браузера.

2. Оберните ваш 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="javascript:void(0);" 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().

Я думаю, что есть «более надежный» вариант. Полагаться на номер пункта меню не гарантируется, если вы, например, перенесете свой код из разработки в производство. Если вы превращаете число в настройку, оно становится лучше, но все же не очень хорошо.

Альтернативой может быть ссылка на несуществующий якорь, такой как #olark, из вашего пункта меню. Это может быть установлено с использованием пользовательского интерфейса и является надежным в любой среде. Тогда ваш отдельный скрипт должен наблюдать за изменением хеша (в адресной строке браузера) и действовать соответственно.

Простой пример кофейного сценария, который компилируется в javascript, который прослушивает 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 это функция, которая отображает диалог, который позволяет вам войти в систему, если хеш равен '#login'.

[править] Достаточно забавно, хэш в адресе не меняется, если вы щелкнете по пункту меню. Это неожиданно и может быть связано с тем, что другой сценарий предотвращает событие по умолчанию. Поэтому мне пришлось добавить еще одну строку, чтобы изменить расположение окна в ответ на нажатие ссылки:

# 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'

[/редактировать]

Вы можете использовать это для functions.php, чтобы добавить скрипт добавления в пункт меню навигации.

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