Adicionar Javascript ao WordPress Menu

8

Existe uma maneira de colocar o javascript na parte de 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 chat 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, que foi 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 dizia que talvez eu pudesse colocar uma classe personalizada no link em questão e depois escrever uma função Javascript que seja acionada quando o link com essa classe for clicado. Eu tentei isso, porém, e não consegui fazê-lo funcionar. Eu não conheço muito Javascript, então é possível que eu esteja escrevendo completamente errado.

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

    
por mcography 08.07.2014 / 22:28

4 respostas

6

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.

    
por gdaniel 09.07.2014 / 00:52
3

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() .

    
por mcography 08.07.2014 / 23:15
1

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]

    
por Bart McLeod 29.08.2014 / 11:24
-2

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');
    
por Pk Ray 15.11.2017 / 10:01