Agregar Javascript al menú de WordPress

¿Hay alguna manera de poner javascript en la porción de URL de un elemento del menú de WordPress? Tengo una función de chat en vivo en mi sitio, y se supone que debo poner este código en el sitio para hacer un enlace para abrir el chat en vivo (como se sugiere aquí).

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

El cliente quiere el enlace en la barra de navegación de la utilidad, que se creó utilizando un menú de WordPress en el panel de WordPress. Pero cuando copio y pego javascript:void(0);" onclick="olark('api.box.expand')en el cuadro de URL en el panel de WordPress, simplemente desaparece y el enlace permanece inactivo.

Algo que leí decía que tal vez podría poner una clase personalizada en el enlace en cuestión y luego escribir una función Javascript que se active cuando se haga clic en el enlace con esa clase. Sin embargo, intenté eso y no pude hacerlo funcionar. No conozco mucho Javascript, así que es posible que lo estuviera escribiendo completamente mal.

¿Alguien sabe como hacer esto? Me gustaría hacerlo sin usar un complemento.

Bien que funciona. Si es para un cliente o si solo desea un código más limpio, puede hacerlo como sugirió @Tom J Nowell.

Agregue un elemento de menú personalizado, vincúlelo a ninguna parte o lugar. Averigüe la ID del elemento del menú (cada elemento tiene uno) y luego diríjase a esa ID con jQuery.

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

De esta manera, cada vez que un usuario hace clic en eso menu-item, se activará el script anterior. Puede poner en cola el script jquery a través de functions.php.

Actualizar:

1. Asegúrese de que su olark.js se esté cargando. Si lo agrega al pie de página o encabezado, inspeccione su página y asegúrese de que el script esté allí. Además, asegúrese de no recibir ningún error en la consola del navegador.

2. Envuelva su js con un documento listo, para que el script se ejecute en el momento adecuado:

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

El hecho de que el enlace no se cargue significa que hay algo mal con el script en sí o que el script no se está cargando en absoluto.

Solución n. ° 1 (no es ideal, pero 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;
}

Solución # 2 (ideal):

Con la ayuda de los comentarios anteriores, aquí está la solución que funcionó para mí. Creé un nuevo archivo llamado olark.js y puse este código en él:

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

Luego, puse en cola el script en mis functions.php con el siguiente 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' );

Si no funciona, asegúrese de poner en cola su script correctamente. Estoy usando un tema infantil, así que tuve que usarlo en get_stylesheet_directory_uri()lugar de get_template_directory_uri().

Creo que hay una opción 'más confiable'. No se garantiza que dependa del número de elemento del menú si migra su código del desarrollo a la producción, por ejemplo. Si convierte el número en una configuración, está mejorando, pero aún no es realmente bueno.

Una alternativa podría ser vincular a un ancla inexistente, como #olark, desde su elemento de menú. Esto se puede configurar mediante la interfaz de usuario y es confiable en todos los entornos. Luego, su secuencia de comandos separada debe observar el cambio hash (en la barra de direcciones del navegador) y actuar en consecuencia.

Un ejemplo simple de script de café que se compila en JavaScript que escucha el 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 es una función que muestra un cuadro de diálogo que le permite iniciar sesión si el hash es igual a '#login'.

[editar] Curiosamente, el hash en la dirección no cambia si hace clic en un elemento del menú. Esto es inesperado y podría deberse a que otro script impide el evento predeterminado. Así que tuve que agregar otra línea, para hacer que la ubicación de la ventana cambie en respuesta a hacer clic en un enlace:

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

[/editar]

Puede usar esto para functions.php para agregar un script adicional en el elemento del menú de navegación

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