Adicionar Javascript ao menu do WordPress

Existe uma maneira de colocar o javascript na parte da URL de um item de menu do WordPress? Eu tenho uma função de bate-papo ao vivo no meu site e devo colocar esse código no site para criar um link para abrir o bate-papo ao vivo (como sugerido aqui).

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

O cliente deseja o link na barra de navegação do utilitário, criada usando um menu do WordPress no painel do WordPress. Mas quando copio e colo javascript:void(0);" onclick="olark('api.box.expand')na caixa URL no painel do WordPress, ele simplesmente desaparece e o link permanece inativo.

Algo que li disse que talvez eu pudesse colocar uma classe personalizada no link em questão e depois escrever uma função Javascript que é acionada quando o link com essa classe é clicado. Eu tentei isso, porém, e não consegui fazê-lo funcionar. Eu não sei muito sobre Javascript, então é possível que eu estivesse escrevendo errado.

Alguém sabe como fazer isso? Eu gostaria de fazer isso sem usar um plugin.

Bom que funciona. Se for para um cliente ou se você quiser apenas um código mais limpo, poderá fazê-lo como sugerido pelo Tom J Nowell.

Adicione um item de menu personalizado, vincule-o a lugar nenhum ou em qualquer lugar. Descubra o ID do item de menu (cada item possui 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 nele, menu-itemo script acima será acionado. Você pode enfileirar o script jquery através de functions.php.

Atualizar:

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

2. Envolva 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á carregando.

Solução 1 (não é 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. Criei um novo arquivo chamado olark.js e coloquei esse código:

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

Em seguida, coloquei o script em enfileirado em minhas funções.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. Estou usando um tema filho, então tive que usar em get_stylesheet_directory_uri()vez de get_template_directory_uri().

Eu acho que existe uma opção 'mais confiável'. Não é garantido que confiar no número do item de menu funcione se você migrar seu código do desenvolvimento para a produção, por exemplo. Se você transformar o número em uma configuração, está ficando melhor, mas ainda não é muito bom.

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

Um exemplo simples de script de café que é compilado em javascript que ouve a alteração de hash:

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 na qual você pode fazer login se o hash for igual a '#login'.

[editar] Engraçado o bastante, 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 fazer a localização da janela mudar 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'

[/editar]

Você pode usar isso em functions.php para adicionar scripts adicionais no item do menu nav

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