WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

La mejor manera de incluir Javascript y CSS en WordPress

Jorge López by Jorge López
19 mayo 2018
in Tutoriales
Reading Time: 4 mins read
0

Existen varias maneras de incluir código Javascript y CSS en WordPress. Por ejemplo, podemos incluir un script o reglas CSS en el header o en el footer de nuestro tema. También podemos insertar scripts mediante el archivo functions.php creando action hooks, podemos agregarlos en plugins dedicados a esto mismo y de muchas, pero muchas maneras. El hecho de escoger el método equivocado a la hora de incluir un script de Javascript o reglas de CSS en nuestro WordPress puede darnos muchos dolores de cabeza, sobre todo en lo relativo al mantenimiento de nuestro sitio. Si no conoces los códigos añadidos, puedes llegar incluso a duplicarlos. Por eso, en este tutorial te mostraré la mejor manera de incluir Javascript y CSS en WordPress. ¡Vamos alla!

WordPress cuenta con un método para incluir Javascript y CSS en WordPress. Es decir, podemos utilizar las funciones wp_register_script(), wp_enqueue_script() y wp_register_style(), wp_enqueue_style() para hacer que nuestros códigos, tanto Javascript como CSS, se pongan en cola en el sistema de archivos JS y CSS de nuestro WordPress. Son funciones muy completas que aceptan parámetros como el nombre y la ubicación física del archivo, dependencias, versión y destino donde se debe cargar el script. Pero basta de cháchara y vamos a ver cómo funciona.

La mejor manera de incluir Javascript y CSS en WordPress

Artículos relacionados

Cómo insertar una encuesta en WordPress

12 febrero 2019

Cómo añadir contenido organizado por pestañas en posts y páginas de WordPress

12 abril 2018

Cómo mostrar los últimos usuarios registrados en WordPress

17 septiembre 2018

Cómo personalizar cada categoría de una manera distinta en WordPress

9 noviembre 2018

Incluir Javascript en WordPress de la manera correcta

A continuación, te mostraré cómo incluir un archivo de Javascript en nuestro WordPress de la manera correcta. En mi caso, yo he añadido el código que puedes ver más abajo al fichero functions.php de mi tema. Este código incluirá un fichero js que me ayudará a validar los campos de mi formulairio de contacto. El fichero utiliza código jQuery por lo que tendré que incluir la dependencia a la librería también.

function incluir_javascript() {
 
wp_register_script('validation_script', plugins_url('validate.js', __FILE__), array('jquery'),'3.3.1', true);
 
wp_enqueue_script('validation_script');
}
  
add_action( 'wp_enqueue_scripts', 'incluir_javascript' );

Como puedes ver en la segunda línea, la función cuenta con múltiples parámetros. Estos son:

  • $handle: Nombre del script
  • $src: Ubicación del fichero (opcional)
  • $deps: Array de dependencias a ejecutar (opcional)
  • $ver: Número de versión del script (opcional)
  • $in_footer: Si es true, el script se pondrá en cola en el footer. Si es false, se hará en el header (opcional)

Incluir CSS en WordPress de la manera correcta

Habiendo visto lo anterior, vamos a hacer lo mismo con un fichero de CSS. Es decir, vamos a emplear el método correcto para añadir nuevos estilos en el tema que estemos utilizando actualmente. Para ello, e igual que antes, abrimos el fichero functions.php de nuestro y agregamos el siguiente código:

function incluir_css() {
wp_register_style('styles', plugins_url('styles.css', __FILE__));
wp_enqueue_style('styles');
}
add_action( 'wp_enqueue_scripts', 'incluir_css' );

Por supuesto, modifica los parámetros de la función wp_register_style en base a tus necesidades. Ojo, los parámetros son los mismos que he explicado anteriormente.

Y hasta aquí nuestro artículo en el que te hemos mostrado la mejor manera de incluir Javascript y CSS en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

Icono: Pawel Rak

Tags: códigocssincluir códigoincluir código en WordPressjavascript
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Tutoriales

WordPress: Cambia tu URL directamente desde la base de datos

18 diciembre 2024

La gestión eficaz de un sitio web en WordPress a menudo requiere adaptaciones técnicas,...

General

Protección avanzada de tu WordPress: Cómo blindar /wp-admin sin bloquear funciones necesarias

18 diciembre 2024

En el ámbito de la gestión de sitios web basados en WordPress, la seguridad...

Tutoriales

Cómo crear una tabla de contenidos en tus publicaciones con Rank Math

11 enero 2023

En muchas ocasiones, leer un artículo demasiado largo puede provocar que te aburras de...

Tutoriales

Cómo instalar Perl en un servidor desplegado en Clouding

20 julio 2021

Un buen desarrollador necesita contar con las herramientas, servicios y tecnologías adecuadas a sus...

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

Willbrige un impresionante tema para WordPress

11 enero 2016

¿Qué es el rel=»noopener» de WordPress y cómo eliminarlo?

22 octubre 2024

Las mejores plantillas de WordPress para un safari

25 marzo 2019

Graves vulnerabilidades afectan a populares complementos de WordPress para sitios inmobiliarios

23 enero 2025

Referencias WordPress para 4-septiembre-2012

4 septiembre 2012
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.