Adicionar Javascript ao WordPress Menu

Bom que funcione. Se é para um cliente ou se você quer apenas um código mais limpo, pode fazê-lo como sugerido por @Tom J Nowell.

Adicione um item de menu personalizado, vincule-o a lugar algum ou em qualquer lugar. Descubra o ID do item de menu (cada item tem um) e, em seguida, segmente esse ID com jQuery.

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

Dessa forma, toda vez que um usuário clicar nesse menu-item , o script acima será acionado. Você pode enfileirar o script jquery via functions.php.

Atualização:

1. Verifique se o seu olark.js está carregando. Se você estiver adicionando-o ao rodapé ou cabeçalho, inspecione sua página e verifique se o script está lá. Além disso, verifique se você não está recebendo erros no console do navegador.

2. Quebra seus js com um documento pronto, para que o script seja executado no momento certo:

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

O fato de o link não estar carregando significa que há algo errado com o próprio script ou o script não está sendo carregado.

Solução # 1 (não ideal, mas funciona):

// 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;
}

Solução # 2 (ideal):

Com a ajuda dos comentários acima, aqui está a solução que funcionou para mim. Eu criei um novo arquivo chamado olark.js e coloquei este código nele:

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

Em seguida, enfiei o script em minhas functions.php com o seguinte código:

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

Se não funcionar, verifique se você está enfileirando seu script corretamente. Eu estou usando um tema filho, então eu tive que usar get_stylesheet_directory_uri() em vez de get_template_directory_uri() .

Eu acho que existe uma opção "mais confiável". Não é garantido que o número do item de menu funcione se você migrar seu código de desenvolvimento para produção, por exemplo. Se você transformar o número em um cenário, ele está melhorando, mas ainda não é muito bom.

Uma alternativa poderia ser ligar a uma âncora inexistente, como #olark, do seu item de menu. Isso pode ser definido usando a interface do usuário e é confiável em todos os ambientes. Em seguida, seu script separado deve observar a mudança de hash (na barra de endereço do navegador) e agir de acordo.

Um simples exemplo de script de café que é compilado em javascript e ouve o 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 é uma função que exibe uma caixa de diálogo que permite que você efetue login se o hash for igual a '#login'.

[editar] Engraçado, o hash no endereço não muda se você clicar em um item de menu. Isso é inesperado e pode ser devido a outro script que impede o evento padrão. Então eu tive que adicionar outra linha, para alterar a localização da janela em resposta ao clicar em um link:

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

[/ edit]

Você pode usar isso para functions.php para adicionar o script de adição no item do menu de navegação

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