Adăugare Javascript în Meniul WordPress

Soluția #1 (nu este ideală, dar funcționează):

// Link utilitar pentru Live Chat
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ția #2 (ideală):

Cu ajutorul comentariilor de mai sus, iată soluția care a funcționat pentru mine. Am creat un fișier nou numit olark.js și am pus acest cod în el:

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

Apoi, am încărcat scriptul în functions.php cu următorul cod:

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

Dacă nu funcționează, asigurați-vă că încărcați scriptul corect. Eu folosesc un child theme, așa că a trebuit să folosesc get_stylesheet_directory_uri() în loc de get_template_directory_uri().

Cred că există o opțiune 'mai fiabilă'. Bazarea pe numărul elementului de meniu nu este garantată să funcționeze dacă migrezi codul de la dezvoltare la producție, de exemplu. Dacă transformi numărul într-o setare, devine mai bine, dar tot nu este chiar ideal.

O alternativă ar putea fi să legi un ancore inexistent, cum ar fi #olark, din elementul de meniu. Acest lucru poate fi setat folosind interfața utilizatorului și este fiabil în toate mediile. Apoi, scriptul tău separat ar trebui să observe schimbarea hash-ului (în bara de adresă a browserului) și să acționeze în consecință.

Un exemplu simplu de script CoffeeScript care se compilează în JavaScript și ascultă schimbările de hash:

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
#activează partajarea URL-ului
if location.hash then @showLogin()

@showLogin este o funcție care afișează un dialog care te lasă să te autentifici dacă hash-ul este egal cu '#login'.

[edit] Destul de amuzant, hash-ul din adresă nu se schimbă dacă dai clic pe un element de meniu. Acest lucru este neașteptat și ar putea fi din cauza unui alt script care previne evenimentul implicit. Așa că a trebuit să adaug o altă linie, pentru a schimba locația ferestrei ca răspuns la clic pe un link:

# asigură-te că hash-ul se schimbă când se dă clic pe un link din meniu (cumva, în cazul meu nu se întâmplă)
$('.menu-item a').click (event) =>
  window.location = $(event.currentTarget).attr 'href'

[/edit]

Poți folosi acest cod în functions.php pentru a adăuga un script suplimentar în elementul din meniul de navigare

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