Aggiungere Javascript al Menu WordPress

Soluzione #1 (non ideale, ma funziona):

// Link per la Live Chat nel menu utility
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 #2 (ideale):

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

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

Poi, ho caricato lo script nel mio functions.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 caricare correttamente il tuo script. Sto usando un child theme, quindi ho dovuto usare get_stylesheet_directory_uri() invece di get_template_directory_uri().

Penso che ci sia un'opzione "più affidabile". Fare affidamento sul numero dell'elemento del menu non garantisce il funzionamento se si migra il codice dallo sviluppo alla produzione, ad esempio. Se si trasforma il numero in un'impostazione, la situazione migliora, ma non è ancora davvero ottimale.

Un'alternativa potrebbe essere collegare a un'ancora inesistente, come #olark, dal tuo elemento del menu. Questo può essere impostato utilizzando l'interfaccia utente ed è affidabile in tutti gli ambienti. Quindi, il tuo script separato dovrebbe osservare il cambiamento dell'hash (nella barra degli indirizzi del browser) e agire di conseguenza.

Un semplice esempio in CoffeeScript che si compila in JavaScript e ascolta l'evento hashchange:

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
#abilita la condivisione dell'URL
if location.hash then @showLogin()

@showLogin è una funzione che mostra una finestra di dialogo per il login se l'hash è uguale a '#login'.

[modifica] Curiosamente, l'hash nella barra degli indirizzi non cambia se si clicca su un elemento del menu. Questo è inaspettato e potrebbe essere dovuto a un altro script che previene l'evento predefinito. Quindi ho dovuto aggiungere un'altra riga per far sì che la posizione della finestra cambi in risposta al clic su un link:

# assicurati che l'hash cambi quando viene cliccato un link nel menu (per qualche motivo, nel mio caso non succede)
$('.menu-item a').click (event) =>
  window.location = $(event.currentTarget).attr 'href'

[/modifica]

Puoi utilizzare queste funzioni nel file functions.php per aggiungere script aggiuntivi agli elementi 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');