Cómo Insertar Javascript y CSS en WordPress Correctamente

Cómo Insertar Javascript y CSS en WordPress Correctamente

Cualquier tema y plugin que usas en tu sitio web utiliza código CSS y Javascript para dar una presentación visual a su contenido o secciones, o añadir nuevas funcionalidades en tu sitio web, por lo tanto, es necesario para casi todos los componentes que añades, incluir su propio estilo y características de la forma estandarizada que ofrece WordPress. Hoy te mostraremos cómo insertar Javascript y CSS en tu sitio de forma correcta.

Insertar Javascript y CSS

Cuando instalas un tema o un plugin en tu sitio web, con ello agregas archivos de estilo CSS adicional y Javascript para que funcionen adecuadamente. Sin embargo, cada plugin inserta sus propios archivos o código.

Hay miles de desarrolladores en la comunidad alrededor del mundo, que crean temas y plugins para WordPress, y cada uno de ellos viene con sus archivos y código de Javascript y CSS para un funcionamiento correcto.

Por tanto, para que todos estos componentes puedan funcionar de forma coherente, es necesario usar un método estándar para insertar Javascript y CSS en el lugar correcto, y con la misma versión de librerías, y evitar posibles incompatibilidades.

¿Cómo Insertar Javascript y CSS en WordPress?

Antes de entrar en la parte práctica para mostrar cómo insertar Javascript y CSS en el ecosistema del sitio web, vamos a ver qué método nos ofrece WordPress para hacerlo.

Para que WordPress se asegure de que todo funcionan en harmonía, y que ningún archivo está alterando el funcionamiento del otro, existen unas herramientas en forma de funciones que proporcionan una forma sistemática y estandarizada para cargar archivos Javascript y CSS que son wp_enqueue_script que le informa al código de WordPress cuando cargar un archivo, y el lugar preciso, y en qué condiciones.

Para cargar o insertar Javascript y CSS en un lugar determinado, debes crear una función propia que enlista todos los archivos de CSS y Javascript, WordPress entonces crea una ruta para encontrar el archivo incluido y si tiene dependencias como librería jQuery, y utiliza un gancho hook que inserta el estilo CSS y Javascript en su apropiada ubicación.

function wpbody_insertar_js_css() {
	wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
	wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'wpbody_insertar_js_css' );

En este código insertamos dos archivos de Javascript, para lanzarlos con el hook wp_enqueue_script cuando se necesitan. Fíjate que utilizamos dos funciones para cada tipo de archivo.

La primera función wp_enqueue_style() está dedicada para archivos de tipo CSS mientras que la segunda, wp_enqueue_script() se usa generalmente para insertar Javascript en el entorno del sitio.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

En esta línea aparece la función y las variables que se deben incluir en ella. Detallamos abajo cada uno de los posibles valores que puede contener la función, para que tengas una idea clara del código de arriba.

  • $handle : Simplemente es el nombre del script que estableces tú. Debe  ser único.
  • $src : Determina la ubicación del archivo de CSS o Javascript que quieres incluir en relación con la ruta raíz de tu WordPress.
  • $deps : Una matriz php que incluye todas las posibles librerías que de ellas dependerá tu archivo incluido en la variable $src.
  • $ver : Defines una versión del script o archivo que estás incluyendo.
  • $in_footer : Un valor de true o false, quqe te permite ubicar tu script o archivo en pie de página con wp_footer() de tu documento HTML en vez de la ubicación predeterminada  wp_head() que es la cabecera.

Los valores requeridos en la función de arriba es apenas el nombre del script que vas a incluir, y los demás valores se pueden dejar vacíos.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

En esta segunda función, que te permite insertar archivos CSS en el entorno de tu sitio web, hay cinco parámetros que detallamos abajo.

  • $handle : El nombre del estilo que estableces tú. Debe ser único.
  • $src : URL completa del archivo CSS o también la ruta del archivo en relación con la carpeta raíz de tu instalación.
  • $deps : Una matriz php que determina que los otros archivos de estilo CSS de los cuales depende el archivo especificado en $src.
  • $ver : Establece la versión del archivo.
  • $media : se utiliza para especifica en qué tipo de medio o pantalla ejecutar este archivo, puede ser uno de estos valores : ‘all’, ‘screen’, ‘print’ o ‘handheld.’

Insertar Javascript y CSS cuando es Necesario

Incluso utilizando el método estandarizado de WordPress, que si duda hace un gran trabajo para evitar problemas de incompatibilidad y conflictos con otras versiones o códigos, pero es recomendable isertar Javascript y CSS sólo cuando sean necesarios.

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
    wpcf7_enqueue_styles();
}

En este práctico ejemplo, aunque un poco personalizado, vemos cómo el plugin Contact From 7 inserta sus archivos Javascript y CSS cuando encuentra el formulario de contacto.

Usar condicionales es una forma prácticas para cargar archivos Javascript y CSS en WordPress sólo cuando se necesita. Esto lo saben los desarrolladores, ya que la sobrecarga de muchos archivos en las peticiones del servidor, lo cual toma un tiempo que puede afectar el rendimiento y la velocidad de WordPress.

Si deseas extender tu información sobre las funciones que se encargan de insertar código en tu sitio web, puedes visitar la documentación oficial en el Codex de WordPress.

Si te gusta este artículo, por favor compártelo, y síguenos en facebook, twitter o google+ para obtener contenido actualizado sobre seguridad y optimización de WordPress.

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí