¿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.
fuente
onclick
atributo para ejecutar javascript.click()
evento jQuerysonclick
atributo. Voy a mirar hacia arriba.click()
.Respuestas:
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.
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:
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.
Envuelva su js con un documento listo, para que el script se ejecute en el momento adecuado:
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.
fuente
#
(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?jQuery(document).ready(function($) {
hizo el truco! ¡Gracias @daniel!Solución n. ° 1 (no es ideal, pero funciona):
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:
Luego, puse en cola el script en mis functions.php con el siguiente código:
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 deget_template_directory_uri()
.fuente
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:
@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:
[/editar]
fuente
Puede usar esto para functions.php para agregar un script adicional en el elemento del menú de navegación
fuente