Dodaj Javascript do menu WordPress

Czy istnieje sposób na umieszczenie javascript w części URL elementu menu WordPress? Mam funkcję czatu na żywo na swojej stronie i powinienem umieścić ten kod na stronie, aby utworzyć link do otwarcia czatu na żywo (jak sugerowano tutaj).

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

Klient chce linku na pasku nawigacyjnym narzędzia, który został utworzony przy użyciu menu WordPress na pulpicie nawigacyjnym WordPress. Ale kiedy kopiuję i wklejam javascript:void(0);" onclick="olark('api.box.expand')do pola URL w desce rozdzielczej WordPress, po prostu znika, a link pozostaje nieaktywny.

Coś, co przeczytałem, mówiło, że może mógłbym umieścić niestandardową klasę na odnośnym łączu, a następnie napisać funkcję JavaScript, która będzie uruchamiana po kliknięciu łącza z tą klasą. Próbowałem tego jednak i nie mogłem zmusić go do działania. Nie znam dużo Javascript, więc możliwe, że napisałem go całkowicie źle.

Czy ktoś wie jak to zrobić? Chciałbym to zrobić bez użycia wtyczki.

Dobrze, że to działa. Jeśli jest to dla klienta lub chcesz po prostu czystszego kodu, możesz to zrobić zgodnie z sugestią @Tom J Nowell.

Dodaj niestandardowy element menu, połącz go nigdzie lub nigdzie. Znajdź identyfikator elementu menu (każdy element ma jeden), a następnie wybierz ten identyfikator za pomocą jQuery.

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

W ten sposób za każdym razem, gdy użytkownik kliknie, menu-itemskrypt powyżej zostanie uruchomiony. Możesz kolejkować skrypt jquery za pośrednictwem functions.php.

Aktualizacja:

1. Upewnij się, że Twój plik olark.js się ładuje. Jeśli dodajesz go do stopki lub nagłówka, sprawdź swoją stronę i upewnij się, że skrypt tam jest. Upewnij się również, że nie występują błędy w konsoli przeglądarki.

2. Zawiń js gotowym dokumentem, aby skrypt wykonał się we właściwym czasie:

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

Fakt, że link się nie ładuje oznacza, że ​​coś jest nie tak z samym skryptem lub skrypt nie ładuje się wcale.

Rozwiązanie nr 1 (nie idealne, ale działa):

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

Rozwiązanie nr 2 (idealne):

Przy pomocy powyższych komentarzy, oto rozwiązanie, które działało dla mnie. Utworzyłem nowy plik o nazwie olark.js i umieściłem w nim następujący kod:

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

Następnie umieściłem w skrypcie kolejkę skryptu w pliku functions.php następującym kodem:

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

Jeśli to nie działa, upewnij się, że porządkujesz skrypt poprawnie. Używam motywu potomnego, więc musiałem go użyć get_stylesheet_directory_uri()zamiast get_template_directory_uri().

Myślę, że istnieje „bardziej niezawodna” opcja. Poleganie na numerze pozycji menu nie jest gwarantowane, jeśli na przykład migrujesz swój kod z wersji programistycznej do produkcyjnej. Jeśli zmienisz liczbę w ustawienie, będzie ona coraz lepsza, ale nadal niezbyt dobra.

Alternatywą może być link do nieistniejącej kotwicy, takiej jak #olark, z pozycji menu. Można to ustawić za pomocą interfejsu użytkownika i jest niezawodny w różnych środowiskach. Następnie oddzielny skrypt powinien obserwować zmianę skrótu (na pasku adresu przeglądarki) i działać odpowiednio.

Prosty przykład skryptu do kawy, który kompiluje się w javascript, który nasłuchuje 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 to funkcja wyświetlająca okno dialogowe umożliwiające zalogowanie się, jeśli skrót jest równy „#login”.

[edytuj] Zabawne, hash w adresie nie zmienia się po kliknięciu pozycji menu. Jest to nieoczekiwane i może być spowodowane innym skryptem uniemożliwiającym zdarzenie domyślne. Musiałem więc dodać kolejną linię, aby zmienić położenie okna w odpowiedzi na kliknięcie linku:

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

[/edytować]

Możesz użyć tego do functions.php, aby dodać skrypt dodatkowy w elemencie menu nawigacyjnego

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