• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Insertar javascript en WordPress de forma correcta

Insertar javascript en WordPress de forma correcta

Insertar Javascript en WordPress

[ 9 octubre 2016 ] [ Actualizado: hace 9 meses ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Insertar script en página específica a través del theme

 

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.

Global Script n style

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.

Script n Styles en entradas y páginas

 

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/

Carpetas y archivos javascript de un theme de ejemplo

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- Insertar Javascript desde un Hook con PHP

Si no tienes mucho código entonces puedes evaluar usar esta opción, ten en cuenta que este código se mostrará como parte del código HTML de la página

add_action( 'wp_head', 'dcms_my_custom_script' );
function dcms_my_custom_script() {
  ?>
  <script>
  //Aqui debe ir tu código javascript
  </script>'
  <?php
}

En el código anterior estamos usando el hook wp_head de WordPress que hace referencia a la función dcms_my_custom_script, dentro de la función cerramos la etiqueta PHP para escribir directamente código javascript dentro de las etiquetas script, finalmente abrimos nuevamente la etiqueta PHP.

 

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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (10 votos, promedio: 4,90 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Amaury

    12 junio, 2017

    Disculpa hay una condicion para que solo se ejecute en una pagina en particular asi como en las entradas?

    • Jhon Marreros Guzmán

      12 junio, 2017

      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.

      • Amaury

        14 junio, 2017

        gracias. me sirvio.. suerte y sigan con tan buenos tutoriales

  2. Julio

    2 agosto, 2017

    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.

    • Jhon Marreros Guzmán

      3 agosto, 2017

      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.

    • Jorgeleitor

      5 mayo, 2019

      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.

    • Diego

      14 julio, 2022

      Hay que estudiar Julio. PHP, Javascript y CSS. Sino siempre hay un plugin.

  3. Elisabeth

    15 noviembre, 2017

    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

    • Jhon Marreros Guzmán

      15 noviembre, 2017

      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.

  4. Natalia Gómez Yanci

    1 junio, 2018

    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?

    • Jhon Marreros Guzmán

      5 junio, 2018

      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.

  5. Jose

    13 agosto, 2018

    Hola, Como lo hago para la validacion de Rut, (Chile)

    • Jhon Marreros Guzmán

      14 agosto, 2018

      Hola, supongo que te refieres a la raíz (root), aunque no me queda claro que quieres validar.

    • Jesus

      10 febrero, 2020

      Hola, aun necesitas hacer esa validación. Me imagino que no.. pero si la necesitas escribeme.

  6. Eduardo

    15 agosto, 2018

    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?

    • Jhon Marreros Guzmán

      15 agosto, 2018

      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/

  7. Eduardo

    16 agosto, 2018

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

  8. Miguel

    11 diciembre, 2018

    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

    • Jhon Marreros Guzmán

      11 diciembre, 2018

      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.

  9. Plugin comentarios

    18 enero, 2019

    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.

  10. sergio

    7 marzo, 2019

    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

    • Jhon Marreros Guzmán

      8 marzo, 2019

      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.

  11. vetoriano

    25 abril, 2019

    Yo no quiero descargar un pluyig con solo añadir esas lineas .¿me ira bien la pág?

    • Jhon Marreros Guzmán

      5 mayo, 2019

      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.

  12. jose

    9 septiembre, 2019

    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.

    • Jhon Marreros Guzmán

      9 septiembre, 2019

      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.

  13. carlos

    5 febrero, 2020

    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

    • Jhon Marreros Guzmán

      6 febrero, 2020

      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.

  14. Manel García

    13 mayo, 2020

    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?

    • Jhon Marreros Guzmán

      14 mayo, 2020

      Hola
      Prueba usándolo como closure, es decir:

      (function( $ ) {
      	'use strict';
      
      	//Aqui puedes poner tu código
          
      })( jQuery );

      Saludos.

  15. Joako

    31 mayo, 2020

    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?

    • Jhon Marreros Guzmán

      1 junio, 2020

      Hola, crear la carpeta es opcional, sólo es para organizar mejor los archivos.

  16. Jim

    4 junio, 2020

    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.

    • Jhon Marreros Guzmán

      4 junio, 2020

      Hola, has probado usando la opción 4 de este artículo?, es decir lo insertarías en un nuevo archivo.
      Saludos.

  17. Pedro

    17 junio, 2020

    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

    • Jhon Marreros Guzmán

      17 junio, 2020

      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/

  18. Ricardo

    24 julio, 2020

    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

    • Jhon Marreros Guzmán

      27 julio, 2020

      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.

  19. Rosmary

    13 agosto, 2020

    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.

    • Jhon Marreros Guzmán

      15 agosto, 2020

      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.

  20. hector silva

    6 febrero, 2021

    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??

    • Jhon Marreros Guzmán

      6 febrero, 2021

      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.

  21. Santiago Franco Echeverri

    1 marzo, 2021

    Hola, ayudenme, pague una plantilla que son varios directorios, pero no tengo ni idea como ponerlo en wordpress. pueden ayudarme?

    • Jhon Marreros Guzmán

      2 marzo, 2021

      Hola, posiblemente hayas comprado una plantilla HTML pero que no es para WordPress.

  22. Samuel

    28 marzo, 2021

    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

    • Jhon Marreros Guzmán

      30 marzo, 2021

      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

  23. Duilio

    20 febrero, 2022

    Hola Jhon….
    Ojala puedas ayudarme:
    Con el SDK Javascript de Facebook consigo datos de usuarios que se registran con el login social en mi pàgina.
    Quiero grabar esos datos en tablas de WordPress.

    Con hook conseguí que los datos pasen al código PHP, los cuales solo he podido mostrar con un simple echo..
    Antes de usar hooks no llegaban los datos, aún cuando puse en distintos lugares el archivo PHP.

    Sin embargo, no puedo grabar en tablas los datos: siempre se cae el código en un simple SELECT (query), cuando evalúo la condición WHERE fb_user_id = $_POST[“elid”]

    Pero en líneas previas si se interpreta: echo “El id es: ” . $_POST[“elid”]

    Hay una posibilidad que me esté equivocando en la sintaxis del query, pero es muy remota.

    Además, de un día para otro, ya ni el echo funciona…
    Y también obtengo un error de qué las tablas no existen… pero esto también de un día para otro, sin tocar/variar el código…

    Se puede lograr lo que pretendo?

    • Jhon Marreros Guzmán

      21 febrero, 2022

      Hola, tu problema es más un tema de programación que algo relacionado con la insersión de javascript en WordPress, mejor escríbeme a través del formulario de contacto: https://decodecms.com/contacto/

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Usar imágenes WebP en WordPress

Mover WordPress manualmente

¿Cómo usar Dashicons en WordPress?

Página de inicio y Página de entradas en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados