Hay varias maneras de insertar javascript en WordPress, pero no todas son correctas, en este artículo explicaremos detalladamente algunas buenas prácticas para insertar código javascript en nuestro sitio.
1- Insertar javascript usando la funcionalidad del theme
Si sólo quieres insertar una porción de código, esta es la primera opción que debes considerar. Algunos themes tienen integrado un campo en el cual se puede insertar código javascript adicional, por ejemplo para los themes basados en el framework Genesis aparecerá a nivel global, pero también en cada entrada, una caja de texto como se muestra en la siguiente imagen.
2- Insertar código javascript con plugins
En caso tu theme no tenga funcionalidad para insertar código, esta sería la manera más sencilla, . Usaremos por ejemplo el plugin Script n Styles, este plugin no sólo inserta javascript sino también CSS y variaciones de ambos como Less y Cofee Script.
El plugin permite la inserción de código de manera global, en todas las páginas de nuestro sitio y en distintas posiciones.
Para insertar código en una página o entrada específica puede hacerse a través del tab de Hooks, sin embargo la opción más sencilla es a través de la misma pantalla, cuando ingresamos a una entrada veremos que tenemos una sección para añadir código javascript y CSS.
3- Insertar código javascript en un archivo .js existente
En caso quieras evitar el uso de plugins adicionales, podrías evaluar insertar tu código javascript directamente en un archivo .js que ya esta cargando tu theme. Para saber que archivos .js carga nuestro theme podemos verificar el código HTML generado por nuestro sitio y buscar los archivos .js, usualmente se localizan dentro de la carpeta /wp-content/themes/TUTHEME/js/
Tener en cuenta que el código insertado se cargará de manera global siempre que se llame al archivo .js.
4- Insertar un archivo javascript con código
Esta sería la manera definitiva y la más recomendable en caso necesitemos insertar mucho código javascript ya que estaría en un archivo .js independiente.
Podemos insertar el siguiente código en el archivo functions.php de nuestro theme, este código también es válido en la construcción de un plugin que requiere un archivo .js.
add_action("wp_enqueue_scripts", "dcms_insertar_js");
function dcms_insertar_js(){
wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/script.js', array('jquery'), '1', true );
wp_enqueue_script('miscript');
}
En el código anterior:
- La función add_action usa el Hook wp_enqueue_scripts el cual ejecutará la función dcms_insertar_js que posteriormente codificaremos.
- La función wp_register_script sirve para registrar el script.
- El primer parámetro es el manejador o ID, lo usamos para poner en cola el script, para desregistralo, o para marcar dependencia.
- El segundo parámetro es la ruta en donde esta el archivo script.js, usaremos una función get_template_directory() de WordPress para encontrar la url completa.
- El tercer parámetro es un array y se usa para definir las dependencias, en nuestro caso es dependiente del manejador o ID jquery, quiere decire que nuestro script se debe cargar luego de la librería jQuery por que posiblemente usaremos algunas funciones de jQuery dentro.
- El cuarto parámetro es la versión, esto se concatenará a la url en el código HTML, es muy útil cuando actualizamos nuestro script para que el navegador no mantenga en cache la versión anterior.
- El parámetro final es un booleano, indica si el script se insertará en la parte superior como parte del header o en la parte final del código luego del body, esto es muy útil para optimización, google recomienda insertar los scripts siempre al final (valor true).
- La función wp_enqueue_script sirve para poner en cola el script, es en esta función en donde realmente el script será mostrado en el front-end del sitio, usa como parámetro el manejador o ID definido en el registro.
El código anterior carga el archivo de manera global, podemos agregar funciones de comprobación como is_single para cargar este archivo sólo en determinadas páginas; por ejemplo para cargar el archivo .js sólo en el detalle de las entradas, nuestro código quedaría como:
add_action("wp_enqueue_scripts", "dcms_insertar_js");
function dcms_insertar_js(){
//Cargar sólo en las entradas
if (is_single()){
wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/script.js', array('jquery'), '1', true );
wp_enqueue_script('miscript');
}
}
5- Recomendaciones
- Si decides hacer modificaciones en el archivo .js del theme, documenta estos cambios, ya que podrías perder las modificaciones hechas en una actualización del theme.
- Si usarás el archivo funcions.php de tu theme para insertar un archivo javascript, ten en cuenta que podrías perder las modificaciones en una actualización del theme, evalúa usar child-themes o un plugin de shortcodes para conservar los cambios.
- Si vas a usar jquery dentro de tu script .js asegúrate de que jquery este cargado antes de la llamada al código.
¿Aún con dudas?, en el siguiente artículo se detalla cada uno de los puntos tratado anteriormente.
Artículos Relacionados
(10 votos, promedio: 4,90 de 5)
Cargando...
Disculpa hay una condicion para que solo se ejecute en una pagina en particular asi como en las entradas?
Hola, si, puedes usar la función is_page() , funciona similar a la función de entradas, también acepta opcionalmente el ID de la página como parámetro.
gracias. me sirvio.. suerte y sigan con tan buenos tutoriales
El pequeño tutorial solo sirve para gente avanzada en el tema.
Para gente de conocimiento básico o nada es hablar en chino. No se entiende nada.
Hola Julio, has revisado el video?, tal vez si usas un plugin sea más fácil. Si tienes alguna duda me la puedes comentar.
Tienes razón Julio. Yo llevo 20 años usando WordPress y este post me es perfectamente válido, pero cuando busco info sobre aprender a programar javascripts, me cuesta bastante comprender algunas cosas básicas. Mi recomendación es que instales campo en tu equipo, después instala WordPress y allí practiques…da igual si lo destripas o te lo cargas…lo que se aprende pasando a la práctica este tipo de tutoriales no tiene precio y es un gran aliciente. Después de un tiempo podrás meterle mano a un WordPress en producción sabiendo lo que estás haciendo. Un saludo y no te desanimes. Salud.
Buenas tardes
Utilizo wordpress y quiero que al pinchar un botón llame a una function de un archivo .js aparte.
Como llamo a esa funcion desde otro archivo?
Gracias
Lo mejor es que incluyas tu archivo .js en WordPress a través de wp_enqueue_scripts, luego simplemente puedes colocar en el botón el evento onclick, o mejor aún hacer todo en el archivo .js sin tocar tu código HTML, puedes usar jquery ya que entiendo que tu theme carga jquery.
Hola, queria insertar un javascript en un tema hijo. Supongo que lo tendría que registrar y ejecutar en functions del tema hijo. Pero dónde para escribir el script, Que debo hacer mejor: generar un nuevo archivo javascript con un nuevo nombre o crear un archivo javascrip con el mismo nombre que el del tema?
Hola efectivamente, debes usar el functions.php del theme hijo, el nombre del archivo javascript que uses es indiferente ya que estará en otra ruta, sin embargo el ID o handler (parámetro de la función) este si que tiene que ser único.
Hola, Como lo hago para la validacion de Rut, (Chile)
Hola, supongo que te refieres a la raíz (root), aunque no me queda claro que quieres validar.
Hola, aun necesitas hacer esa validación. Me imagino que no.. pero si la necesitas escribeme.
Y si quiero registrar dos archivos diferentes de JS debo hacer dos funciones o agrego otro «wp_register_script» o los separo por comas? cómo debo hacer?
Hola debes agregar un nuevo wp_register_script, ya que el parámetro de ID sólo acepta un id como cadena, revisa la sintaxis: https://developer.wordpress.org/reference/functions/wp_register_script/
Que pasa si al añadir una librería de Jquery me da error de compatibilidad con otros plug-ins.?
Cómo debo escribir el código para que se ejecute en un Custom Post Type?
Gracias. ☺
Hola, buen tutorial.
Ya venia usando el plugin que comentas, funciona bien, pero la otra forma que comentas de «insertar un archivo javascript mediante codigo» me gusta más, principalmente para no usar tanto plugin.
Sólo quería comentarte también, que creo que tienes una pequeña errata, hablas de usar:
get_template_directory(),
pero has puesto:
get_stylesheet_directory_uri()
que aunque no estoy muy puesto en wordpress me da que tiene más que ver con la hoja de estilos que con javascript, supongo que se te escapó ese detalle, por eso te lo comento.
Por lo demás, gracias por la información y me gusta el diseño de tu página. Mucho éxito! Saludos
Hola, la función get_stylesheet_directory_uri() te funcionará también con un child-theme, por eso es mejor usarla en lugar de get_template_directory(), revisa la descripción de: https://codex.wordpress.org/Function_Reference/get_template_directory.(Es posible que en futuras versiones de WP se mejore la función get_template_directory() que en realidad el nombre tiene más sentido que hacer referrencia al stylesheet). Saludos.
La forma correcta es la que comentas pero si tenemos prisa yo haría un buscar de una cadena de texto de nuestra web en el código, para saber donde esta y lo metería como html. No es lo correcto pero si es lo rápido.
buenos dias
como puedo insertar el codigo de personalizacion de esta pagina:
http://webvieja.laspegatinas.com/pegatinas-con-texto-personalizado
en esta otra :
https://www.laspegatinas.com/personalizar/design/22016/
quiero quitar el plugin de la de wordpress porque es muy lento y el codigo de la primera va genial
gracias por tu ayuda
Hola. Este tipo de funcionalidad no sólo tiene archivos javascript, sino también funcionalidad en el backend, posiblemente por Ajax, que no estas viendo por lo que se te complicará la vida si tratas de copiar sólo código javascript.
Yo no quiero descargar un pluyig con solo añadir esas lineas .¿me ira bien la pág?
Hola, supongo que te refieres al punto 4, si que debería funcionarte sin problemas ese código si se ha copiado o modificado correctamente.
Hola buenas tardes, tengo una situación, estoy agregando videos directamente de facebook a mi tema de wordpress, el objetivo es que se pueda ver el video y las vistas que lleva como los likes, en la pagina web al verlo desde una laptop o pc se ve muy bien, solo que en el móvil si se ven los videos pero no se ven las vistas ni los likes, y se generan espacio muy grandes uno tras otro pongo una fila de 3 videos, alguna sugerencia de como hacer que en el móvil se vean los likes y las vistas de cada video, muchas gracias y felicidades gran explicación, saludos a todos.
Por lo que comentas, si hay elementos que no se muestran en móvil es posible que sea por lo que te esta enviando facebook y poco podrías hacer aquí, con respecto a lo que comentas de la disposición de videos, parece ser un problema con el CSS de tu theme, si aún no solucionas tu problema puedes escribirme a través del formulario de contacto, envía la url de tu sitio igualmente. Saludos.
Hola saludo cordial.
Transferi un sitio via ftp que diseñe en exelearning compuesto por texto, imagenes, videos y cuestionarios., pero al final 18 archivos no se permitieron trasladar por asuntos de seguridad. los archivos en mención tienen extensión js, css, xml y swf.
Cómo hago para que wp me permita subirlos?. Gracias por su colaboración
Hola,
Salvo que estes subiendo los archivos desde la opción de medios de WordPress, allí si hay restricciones.
Pero no necesitas subirlo así, ya que entiendo que lo haces por FTP, más bien parece ser una restricción de tu hosting, consulta a tu hosting.
Buenas tardes, Bien me ha costado un poquito pero he logrado sacar un alert en una página concreta. pero gracias por la explicación.
Habiendo avanzado y poniendo líneas de JQuery, ya me da error pq no sabe que es $() «is not a function». he revisado lo que dices, y la Libreria JQuery se carga antes que mi .js personalizado. Viéndolo en el visor de código.
Qué puedo hacer más?
Hola
Prueba usándolo como closure, es decir:
Saludos.
Hola consulta quiero agregar JavaScript en un child themes que me conviene crear una carpeta nueva en mi child themes js y hay agregar mi archivo js?
Hola, crear la carpeta es opcional, sólo es para organizar mejor los archivos.
Jhon que tal, una consulta. Estoy usando Elementor y esta contiene la librería Swiper.js y Swiper.min.js por lo cual esta desactualizado, Estuve en contacto con los de soporte de Swiper sobre unos códigos de Mousewheel por lo cual me indica agregarlos, pero no quiero tocar esos archivos ya que en una futura actualización quizas no incluya el código y a la vez las borre. Me puedes dar un ejemplo de como agregaría desde Function.php, Gracias.
Hola, has probado usando la opción 4 de este artículo?, es decir lo insertarías en un nuevo archivo.
Saludos.
Hola amigo yo quiero agregar un js pero para que cague dentro de un plugin en el dashboard… me indicarias como podria hacerlo? No necesito que se cargue en el frontend sino en el dashboard del plugin
Hola, puedes registralo igual, sin embargo al momento de ponerlo en cola usa admin_enqueue_scripts en lugar de wp_enqueue_scripts, revisa: https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/
Hola Jhon, ante todo quería felicitarte por el aporte de calidad y el compromiso con el que estás construyendo este increíble espacio. Sinceramente fue una muy grata sorpresa encontrar el post sobre Mover la carga al footer en WordPress, de ahí este y el resto del sitio..
Ahora te consulto, ¿cuál sería la mejor manera de incluir el código de seguimiento de Google Analytics en el footer de WordPress (obviamente sin plugins)?
Nuevamente felicitaciones! y a continuar por este maravilloso camino.
Abrazo
Hola, primero revisa si a nivel de tu theme tienes la opción, muchos de los themes ya incluyen esto como parte de su configuración. Sino lo encuentras podrías evaluar el Hook wp_footer para insertar contenido, revisa: https://developer.wordpress.org/reference/hooks/wp_footer/ , verás un ejemplo al final.
Buenas tardes! soy nueva en wordpress… acabo de actualizar y luego de ello me arroja muchos inconvenientes por ejemplo este con el pluggin popup maker… no me aparecen los ajustes para las ventanas emergentes y me dice que la pagina aun esta cargando o hay un error.
Hola, si, se han reportado algunos problemas con la actualización en relación con plugins que usan javascript, te sugiero revisar si tienes actualizaciones pendientes de tus plugins y pruebes actualizar, si aún sigues con problemas evalúa usar algún plugin similar que no te cause conflicto.
muy bueno todo, tengo que estudiarlo y analizarlo gracias por tu aporte. pero tengo una pregunta:
uso zoho. en zoho cree un formulario. zoho te da la libertad de extraer el formulario en codigo html. lo extraje y lo incorpore en wordpress por medio de un plugin. el formulario necesita validarse. el plugin si me acepta html. css del formulario de zoho. pero el javascript para validar ese formulario no. como incorporar javascript en un shorcode, o en el plugin??
Hola, el código que te genera debería incluir el javascript para la validación. Puedes usar cualquiera de los métodos descritos aquí para incluir ese código javascript.
Sin embargo si vas a seguir trabajando con formularios lo más recomendable es buscarte un constructor que venga integrado con WordPress, como Gravity Forms por ejemplo.
Hola, ayudenme, pague una plantilla que son varios directorios, pero no tengo ni idea como ponerlo en wordpress. pueden ayudarme?
Hola, posiblemente hayas comprado una plantilla HTML pero que no es para WordPress.
Hola Jhon,
Con el código aplazar todo el javascript, la acción se ejecuta correctamente pero desconfigura el menú, creo que por el awesome.
Por tanto, estoy intentando aplazarlos individualmente pero no lo consigo.
Por ejemplo, para aplazar el cookie-law-info-js
Hola, Prueba usar un plugin como Autoptimize que te detecta los archivos js que se cargan y también puedes aplazarlos de esta forma tendrás una mejor visión de que archivos js necesitas aplazar sin que se dañe tu diseño