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

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

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

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

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

Update:

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'

[/править]

Вы можете использовать это для функций.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');