¿Cuál es la mejor manera de incluir archivos JS y CSS en un sitio en WordPress?

Si revisamos la documentación de WordPress, veremos que tiene métodos propios (webhooks), que son funciones que permiten agregar archivos JS (JavaScript) y CSS para ponerlos en cola. Esto permite dar flexibilidad y personalización al sitio. 

La función para poner en cola  a un archivo CSS se llama wp_enqueue_style() , y la función para poner en cola a un JS se llama wp_enqueue_script(). Ambas funciones se agregan en un webhook llamado wp_enqueue_scripts(). 

Para poner en cola estas hojas de estilos y JS requiere de cierto conocimiento del uso de las funciones de WP. Primero, conozcamos bien los dos tipos de archivos: 

• Archivos JS: estos se encargan de dar funcionalidad al sitio una vez que se entrega al navegador. JS es usado usualmente para crear efectos y dar interacción al sitio, y también para incluir librerías personalizadas. 
• Archivos CSS: Las hojas de estilo en cascada (Cascading Style Sheet) se encargan de darle apariencia al sitio. En cada tema hay un archivo style.css, y muchos tienen hojas de estilo adicionales. 

Se recomienda no agregar archivos CSS y JS directamente al header.php de su tema, o a otros archivos de la plantilla.

1. <!-- header.php -->
2. <!-- Esto es muy malo! evita hacerlo en wordpress →
3. <link rel ="stylesheet" href=https://www.ejemplo.com/wp-content/themes/54-theme/style.css” />
4. <script type =”text/javascript” src=”https://www.ejemplo.com/wp-content/themes/54-theme/script.js”></script>

Esta es una mala práctica, ya que si se agregan de forma manual, al realizar una futura actualización puede suceder que estos archivos no carguen correctamente y la página muestre errores. 

La forma correcta de enlazar los recursos de temas y complementos

No se debe escribir las rutas de un archivo de WordPress con la URL codificada, por ejemplo así: https://sudominio.com/wp-content/themes/mi-tema/style-new.css, incluso si se utiliza wp_enqueue_().  La razón es porque el sitio puede que cambie de dominio, de la misma forma puede ser que también el folder del tema cambie, en esos casos se rompería su enlace codificado. 

Siempre es mejor utilizar las funciones de WordPress. Como hemos mencionado, WordPress tiene funciones para obtener el URL de cada elemento, incluyendo el nombre de archivo. 

Para enlazar los JS o CSS utilizamos la función get_stylesheet_directory_uri(), la que se encargará de devolver la URL correcta para el entorno de WordPress y hacer funcionar el tema:

1. <!-- functions.php -->
2. <img src="<?php echo get_stylesheet_directory_uri(); ?>/photo.jpg">
3. <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/photo.jpg">

Estas dos etiquetas resultan en imágenes como en la siguientes líneas:

1.  <img src="https://yourdomain.com/wp-content/themes/mytheme/photo.jpg">
2. <img src="https://yourdomain.com/wp-content/themes/mytheme/images/photo.jpg">

El metodo get_stytlesheet_directory_uri() enlazará al tema en ejecución (principal) o sino al tema hijo, si existiese otro. Si se desea hacer referencia a archivos de temas en el tema principal, se puede usar la función get_template_directory_uri(). 

 Una forma de enlazar recursos del tema es get_theme_file_uri(). A partir de la version WordPress 4.7 existe esa función que hace más fácil de sobrescribir los assets del tema padre.

 <img src = "<? php echo get_theme_file_uri ('images / photo.jpg');?>"> 

En este caso se busca el archivo photo.jpg en el tema secundario, si lo encuentra esa es la URL que devuelve. En caso contrario, si no lo encuentra, esta función hará una busqueda en el tema principal. Esta función ahorraría tiempo a las personas que suelen utilizar un tema secundario haciendo cosas como poner en cola los assets de CSS y JS. 

Recapitulando, así sería el comportamiento de las funciones para insertar JS y CSS en WordPress:

get_stylesheet_directory_uri(): Devuelve la URL raíz del tema secundario (si es que hubiera) caso contrario devuelve la URL del tema principal. 

get_template_directory_uri(): Devuelve la URL raíz del tema principal, exista o no un tema secundario.

get_theme_file_uri(): Enlaza al archivo del tema principal, y si hay un archivo con el mismo nombre del tema secundario, automáticamente se vincula con este archivo. Esto es muy útil para crear herencia a un tema hijo.

¿Cómo enlazar archivos CSS y JS a un complemento o plugin?

Si estás escribiendo o actualizando un complemento y deseas vincularlo a algo dentro de él, usaras una función llamada plugin_dir_url(). Esta devuelve el directorio raíz del complemento desde el que se está llamando.  

1. <!-- Señala el directorio raíz del complemento actual luego photo.jpg-->
2. <img src = "<?php echo plugin_dir_url (__FILE__). 'photo.jpg';?>">
3. <! - Apunta al directorio raíz del complemento actual, luego images / photo.jpg ->
4. <img src = "<?php echo plugin_dir_url (__FILE__). 'images / photo.jpg';?>">

Los dos enlaces de imágenes resultantes del código anterior se verían así: 

1. <img src = "https://yourdomain.com/wp-content/plugins/myplugin/photo.jpg">
2. <img src = "https://yourdomain.com/wp-content/plugins/myplugin/images/photo.jpg">

Cómo cargar archivos CSS y JS en WordPress

Para agregar scripts y estilos en WordPress se utiliza el término encolar. Funciona de esta manera: 

• Para encolar scripts o estilos se utilizara el hook wp_enqueue_scripts. 
• Para poner en cola un JS se llama wp_enqueue_script();
• Para poner en cola un CSS se llama wp_enqueue_style();
• Este es un ejemplo para agregar un archivo de estilos style.css al functions.php:

1. function wp_theme_script_y_style_includer() {
2. wp_enqueue_style('wp_theme-style',
3.      get_stylesheet_uri() );
4. }
5. add_action('wp_enqueue_scripts', 'wp_theme_script_y_style_includer');

Esta función no tiene argumentos por lo que se ejecutará de manera automática.  

wp_enqueue_style(); esta función tiene dos argumentos, wp_theme-style es un text slug o apodo que le damos a la hoja de estilo, el resto hará una referencia de la hoja de estilos. 

get_stylesheet_uri(), con este segundo parámetro, estamos diciéndole a WordPress donde encontrar la hoja de estilo que queremos poner en cola, esta funcion devuelve el URL para style.css del tema actual.

add_action(‘wp_enqueue_scripts’, wp_theme_script_y_style_includer’);  – Esta línea se encargará de ejecutar la función que se ha declarado ‘wp_theme_script_y_style_includer’ para luego encolarla en el script y que se ejecute. 

Segundo ejemplo: Encolar un script y estilos en el archivo functions.php

1. function wp_theme_script_y_style_includer() {
2. wp_enqueue_style(
3. ‘style-responsive', 
4. get_theme_file_uri('css/style-responsive.css'),
5. );
6. wp_enqueue_script(
7. 'script-js',
8. get_theme_file_uri('js/script-js.js'),
9. );
10. }
11. add_action( 'wp_enqueue_scripts', 'wp_theme_script_y_style_includer');

En este ejemplo estamos usando get_theme_file_uri() para llegar a la raíz del tema. Esto vincula con el archivo en el tema padre o si existiera un archivo con el mismo nombre en el tema secundario, para que el tema secundario se pueda anular fácilmente. También se añade el archivo script-js.js, de esta forma podemos hacer colas de varios scripts y estilos, todo dentro de una misma funcion. Solo debemos asegurarnos de recordar cuándo llamar a wp_enqueue_style() y cuando llamar a wp_enqueue_script(). 

Tercer ejemplo: Encolar scripts y estilos de un archivo de plugin

En este ejemplo se está cargando un archivo simple de CSS y dos JS. Así se ve en un archivo PHP en un plugin:

1. function wpshout_plugin_script_and_style_includer( ) {
2. /* Styles and scripts in the plugin root directory */
3.     wp_enqueue_style(
4.      'our-plugin-style',
5.      plugin_dir_url( __FILE__ ) . 'our-plugin-style.css'
6.     );
7.     wp_enqueue_script( 
8.      'our-plugin-example-js',
9.      plugin_dir_url( __FILE__ ) . 'our-plugin-js.js',
10.      array( 'jquery' )
11.     );
12.     /* A script in a subdirectory */
13.     wp_enqueue_script( 
14.      'our-plugin-more-js',
15.      plugin_dir_url( __FILE__ ) . 'js/our-second-js.js',
16.      array( 'jquery' )
17.     );
18. }
19. add_action( 'wp_enqueue_scripts', 'wpshout_plugin_script_and_style_includer' );

Encolamiento de archivos con dependencias

En el encolamiento de javascript, ¿qué significa array(‘jquery’)?

Pues ahí estamos redeclarando jQuery como dependencia. Estas dependencias son importantes en dos situaciones:
– Si es que un CSS carga después de otro CSS, ya que los estilos posteriores anulan los anteriores. 
– Si un archivo JS se basa en otro JS para ejecutarse en jQuery. 

El segundo caso es el más común y es la razón por la que se mencionan las dependencias. En este caso es mejor es declarar a jquery como una dependencia, así:

1. wp_enqueue_script(
2. 'example-js',
3. get_theme_file_uri( 'example-js.js' ),
4. array( 'jquery' )
5. );

Estamos colocando un tercer argumento en el wp_enqueue_script() y sus dependencias. Este argumento es un arreglo y contiene apodo o slugs de los archivos de JS qué depende nuestro archivo. La matriz solo tiene a jquery, va a disparar al archivo jQuery.js que WordPress cargará automáticamente.

También se puede hacer este procedimiento con los CSS en wp_enqueue_style(), con un arreglo de slugs o apodos CSS como dependencias. La principal razón para hacer esto es asegurarse que la hoja de estilos cargue después y anule a otros CSS, pero esto no debe acarrear algún problema ya que los CSS secundarios generalmente anulan lo que hacen de forma predeterminada.