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
(9 votos, promedio: 4,89 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.
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.