Agregar Javascript al menú de WordPress

9

¿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.

mcografía
fuente
No debería poder agregar javascript al menú a través de la interfaz de usuario, y nunca debería confiar en el onclickatributo para ejecutar javascript
Tom J Nowell
Por qué no? Ese es el código que me proporcionó la compañía de chat en vivo.
mcography
1
Eso no significa que sea la forma correcta de hacerlo, busque el .click()evento jQuerys
Tom J Nowell
No estaba tratando de decir que así era. Solo intentaba preguntar por qué nunca debería confiar en el onclickatributo. Voy a mirar hacia arriba .click().
mcography
Debido a que HTML es para definir un documento, agregar un atributo onclick es malo de la misma manera que agregar una etiqueta o atributo de estilo en línea es malo, los mezcla. Vea esta pregunta para saber por qué es malo
Tom J Nowell

Respuestas:

7

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.

gdaniel
fuente
Gracias por tu respuesta. No sé mucho sobre Javascript, entonces ¿puede decirme por qué su solución es mejor / más limpia? Solo trato de entender.
mcography
Creé un archivo llamado olark.js y lo coloqué en cola, pero el enlace todavía conduce a #(porque ahí es donde lo configuré en el panel de Wordpress). Esto es lo que puse en olark.js: $("#menu-item-38872").on("click", function(e){ e.preventDefault(); // olark code here olark('api.box.expand'); });¿Qué estoy haciendo mal?
mcography
Ah ja! El jQuery(document).ready(function($) {hizo el truco! ¡Gracias @daniel!
mcography
Me alegro de que funcionó. La idea es mantener el guión separado del contenido. Por eso se sugiere hacerlo de esa manera.
gdaniel
3

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().

mcografía
fuente
1

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]

Bart McLeod
fuente
-2

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');
Rayo PK
fuente
Esta no es una solución adecuada, romperá completamente el menú, porque todos los botones se verán afectados y no hace de qué se trataba la pregunta.
Milan Petrovic