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

Решение #1 (не идеальное, но рабочее):

// Ссылка на Live Chat в утилитарном меню
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 здесь
          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, в пункте меню. Это можно настроить через пользовательский интерфейс, и такой подход будет надежным в разных средах. Затем отдельный скрипт должен отслеживать изменения хэша (в адресной строке браузера) и действовать соответствующим образом.

Простой пример на CoffeeScript, который компилируется в JavaScript и слушает событие изменения хэша:

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
# включить возможность делиться URL
if location.hash then @showLogin()

@showLogin — это функция, которая отображает диалоговое окно для входа в систему, если хэш равен '#login'.

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

# убедиться, что хэш меняется при клике на ссылку в меню (в моем случае это почему-то не работает)
$('.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');