Aggiungi Javascript al menu WordPress

C'è un modo per inserire javascript nella parte URL di una voce di menu di WordPress? Ho una funzione di chat dal vivo sul mio sito e dovrei inserire questo codice sul sito per creare un collegamento per aprire la chat dal vivo (come suggerito qui).

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

Il client desidera il collegamento nella barra di navigazione dell'utilità, creata utilizzando un menu WordPress nella dashboard di WordPress. Ma quando copio e incollo javascript:void(0);" onclick="olark('api.box.expand')nella casella dell'URL nella dashboard di WordPress, scompare e il collegamento rimane inattivo.

Qualcosa che ho letto ha detto che forse potrei mettere una classe personalizzata sul collegamento in questione e quindi scrivere una funzione Javascript che si attiva quando si fa clic sul collegamento con quella classe. Ci ho provato, però, e non sono riuscito a farlo funzionare. Non conosco molto Javascript, quindi è possibile che lo stia scrivendo completamente sbagliato.

Qualcuno sa come fare questo? Vorrei farlo senza usare un plugin.

Bene che funziona. Se è per un cliente o se vuoi solo un codice più pulito, puoi farlo come suggerito da @Tom J Nowell.

Aggiungi una voce di menu personalizzata, collegala al nulla o ovunque. Scopri l'ID della voce di menu (ogni elemento ne ha uno), quindi scegli come target quell'ID con jQuery.

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

In questo modo, ogni volta che un utente fa clic su di esso menu-itemverrà attivato lo script sopra. Puoi accodare lo script jquery tramite Functions.php.

Aggiornare:

1. Assicurati che il tuo olark.js si stia caricando. Se lo stai aggiungendo al piè di pagina o all'intestazione, controlla la tua pagina e assicurati che lo script sia presente. Inoltre, assicurati di non riscontrare errori nella console del browser.

2. Avvolgi js con un documento pronto, in modo che lo script venga eseguito al momento giusto:

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

Il fatto che il collegamento non venga caricato significa che c'è qualcosa di sbagliato nello script stesso o che lo script non si sta caricando affatto.

Soluzione n. 1 (non ideale, ma funziona):

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

Soluzione n. 2 (ideale):

Con l'aiuto dei commenti sopra, ecco la soluzione che ha funzionato per me. Ho creato un nuovo file chiamato olark.js e ho inserito questo codice:

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

Quindi, ho accodato lo script nel mio function.php con il seguente codice:

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 non funziona, assicurati di accodare correttamente lo script. Sto usando un tema figlio, quindi ho dovuto usare get_stylesheet_directory_uri()invece di get_template_directory_uri().

Penso che ci sia un'opzione "più affidabile". Affidarsi al numero della voce di menu non è garantito se si esegue la migrazione del codice dallo sviluppo alla produzione, ad esempio. Se trasformi il numero in un'impostazione, sta migliorando, ma non è ancora molto buono.

Un'alternativa potrebbe essere quella di collegarsi a un'ancora inesistente, come #olark, dalla tua voce di menu. Questo può essere impostato utilizzando l'interfaccia utente ed è affidabile in tutti gli ambienti. Quindi lo script separato dovrebbe osservare l'hash-change (nella barra degli indirizzi del browser) e agire di conseguenza.

Un semplice esempio di script di caffè che viene compilato in javascript che ascolta l'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 è una funzione che visualizza una finestra di dialogo che ti consente di accedere se l'hash è uguale a '#login'.

[modifica] Abbastanza divertente, l'hash nell'indirizzo non cambia se si fa clic su una voce di menu. Ciò è imprevisto e potrebbe essere dovuto a un altro script che impedisce l'evento predefinito. Quindi ho dovuto aggiungere un'altra riga, per modificare la posizione della finestra in risposta al clic su un collegamento:

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

[/modificare]

Puoi usarlo per Functions.php per aggiungere uno script addizionale nella voce del menu di navigazione

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