Cómo poner en cola hojas de estilo CSS en WordPress usando wp_enqueue_style

Al desarrollar temas o plugins de WordPress, es esencial poner en cola las hojas de estilo para que se carguen correctamente.

Para ello, recomendamos utilizar la función wp_enqueue_style(). Es una potente herramienta para añadir hojas de estilo personalizadas a tu plugin o tema de WordPress. Esta función también asegura que las hojas de estilo se carguen sólo cuando es necesario y ayuda a evitar conflictos con otros plugins o temas. 

En este tutorial, exploraremos cómo puedes usar la función wp_enqueue_style() para mejorar la apariencia de tu sitio WordPress y la experiencia general del usuario.

Descarga la hoja de trucos de WordPress definitiva

Cómo usar wp_enqueue_style para cargar hojas de estilo CSS en WordPress

Empezaremos con algunos ejemplos básicos para ayudarte a entender mejor cómo funciona la función wp_enqueue_style().

Cómo poner en cola la hoja de estilo principal style.css

Para poner en cola la hoja de estilos style.css del tema principal, utiliza la función wp_enqueue_style() en el archivo functions.php de tu tema.

Aquí tienes un ejemplo de cómo queda:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

En el código, my-theme-style es un nombre único para la hoja de estilos que está en cola, mientras que la función get_stylesheet_uri() maneja la URL del archivo style.css del tema principal.

A continuación, la función wp_enqueue_style() registra el estilo y lo añade a la cola. Por último, la función add_action() añade tu función personalizada my_theme_enqueue_styles() al hook wp_enqueue_scripts, lo que garantizará que la hoja de estilos se ponga en cola correctamente.   

Cómo poner en cola otras hojas de estilo

También puedes utilizar la función wp_enqueue_style() para añadir estilos adicionales. Por ejemplo, puedes utilizar esta función para incluir opciones de estilo que se encuentren en un archivo separado y añadirlas a la hoja principal.

En cuanto al código, puedes reutilizar la mayor parte del ejemplo anterior con algunas adiciones:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
 wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

En este método, hemos utilizado la función get_theme_file_uri(), que devuelve la URL del archivo en el directorio del tema actual. En nuestro caso, es extra.css. De esta manera, la función pondrá en cola primero la hoja de estilos principal y luego pasará a los estilos adicionales.  

Cómo cargar hojas de estilo externas en WordPress

Es posible utilizar la función wp_enqueue_style() para cargar una hoja de estilos desde una fuente externa. El proceso puede ser beneficioso si deseas utilizar fuentes personalizadas o una hoja de estilos alojada en una red de distribución de contenidos (CDN).

El código es muy similar a los ejemplos anteriores:

function theme_files() { 
    wp_enqueue_style('theme_custom', 'INSERT URL'); 
} 

add_action('wp_enqueue_scripts', 'theme_files');

Recuerda sustituir la parte de la INSERT URL por una URL real de la hoja de estilo.

Cómo añadir archivos de script a WordPress usando wp_enqueuing_script

WordPress tiene una función integrada llamada wp_enqueue_script() que te permite poner en cola JavaScript o scripts similares. Añade el siguiente código al archivo functions.php de tu tema:

function theme_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Ten en cuenta que esta función utiliza más parámetros:

• my-script: el nombre de tu script. Puedes elegir el nombre que quieras..
• /js/my-script.js: ubicación de tu script. En este caso, se encuentra en el directorio js del tema de WordPress.
• array(): define las dependencias que puede tener tu script.
• 1.0: el número de versión de la hoja de estilo.
• true: determina si se carga el script en el pie de página.

Ejemplos útiles de wp_enqueue_style

Echa un vistazo a algunos casos prácticos de uso de la función wp_enqueue_style() para mejorar tu sitio WordPress.

Cargar CSS sólo en determinadas páginas

La carga de CSS en páginas específicas puede aportar varias ventajas a un sitio web WordPress: 

• Tiempos de carga de página más rápidos: cuando cargas CSS solo en las páginas en las que es necesario, evitas tener código innecesario. Esto mejorará la velocidad general de tu sitio.
• Mantenimiento más sencillo: puedes cambiar los archivos CSS sin afectar a otras páginas.

En el siguiente ejemplo, registraremos y cargaremos CSS en la página Contáctenos con la ayuda del hook de WordPress wp_enqueue_scripts y la función is_page():

<?php
add_action('init', 'register_custom_styles');
function register_custom_styles() {
    wp_register_style( 'custom-design', '/wp-content/design.css' );
}
add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );
function conditionally_enqueue_styles_scripts() {
    if ( is_page('contactus') ) {
        wp_enqueue_style( 'custom-design' );
    }
}
?>

Cargar archivos CSS en el pie de página

Al mover el CSS al pie de la página, el navegador puede dar prioridad a cargar primero el HTML y otros recursos importantes. Como resultado, cargar CSS en el pie de página mejora el tiempo de carga de tu página. 

La mejor forma de cargar CSS en el pie de página es con el hook de WordPress get_footer():

<?php
function footer_style() {
    wp_enqueue_style('custom-design', '/wp-content/design.css');
};
add_action( 'get_footer', 'footer_style' );
?>

Recuerda que cargar CSS en el pie de página puede causar problemas de renderizado y hacer que la página parezca rota o sin estilo. Por este motivo, carga primero el CSS más importante en la sección del encabezado y, a continuación, pasa a la parte del pie de página.

Añadir estilos dinámicos en línea

Los estilos en línea dinámicos permiten añadir estilos personalizados a elementos individuales de una página web. La forma más sencilla de añadir estilos en línea es con la función wp_add_inline_style(), que los carga después de un archivo CSS específico.

En el siguiente ejemplo, combinaremos las funciones wp_enqueue_style() y wp_add_inline_style() para aplicar el estilo del archivo design.css y los titulares en negrita:

<?php
function theme_style() {
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/wp-content/design.css' );
	$bold_headlines = get_theme_mod( 'headline-font-weight' ); 
	$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
	wp_add_inline_style( 'custom-style', $inline_style );
}
add_action( 'wp_enqueue_scripts', 'theme_style' );
?>

Ten en cuenta que el estilo inline sólo funcionará después de que el design.css esté correctamente encolado.

Comprobar el estado de cola de la hoja de estilo

Utiliza la función wp_style_is() si quieres más información sobre el estado de la hoja de estilos. Esta función puede comprobar si un archivo de hoja de estilos CSS está en la cola, registrado o listo para mostrarse.

<?php
function check_styles() {
	if( wp_style_is( 'main' ) {
    
		wp_enqueue_style( 'my-theme', '/custom-theme.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'check_styles' );
?>

Insertar metadatos en la hoja de estilo

También puedes utilizar la función wp_enqueue_style con el siguiente fragmento de código para poner en cola una hoja de estilos CSS con metadatos de título:

<?php
function theme_extra_styles() {
	wp_enqueue_style( 'add-metadata', '/wp-content/design.css' );
	wp_style_add_data( 'add-metadata', 'title', 'My Awesome Title' );
	}
add_action( 'wp_enqueue_scripts', 'theme_extra_styles' );
?>

En este ejemplo, hemos utilizado la función wp_style_add_data() y hemos añadido un título a la hoja de estilos CSS.

Anular el registro de archivos de estilo

Es importante dar de baja los archivos de estilo CSS que ya no utilices. Cuando varios plugins o temas ponen en cola el mismo archivo de estilo, pueden producirse conflictos y problemas en el sitio web.

El siguiente código anulará el registro y la cola de un estilo específico y lo sustituirá por una nueva hoja de estilos:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
    wp_dequeue_style( 'original-enqueue-stylesheet-handle' );
    wp_deregister_style( 'original-register-stylesheet-handle' );

    wp_register_style( 'new-style', get_stylesheet_directory_uri() . '/new.css', false, '1.0.0' ); 
    wp_enqueue_style( 'new-style' );
}

Conclusión

La función wp_enqueue_style() es una parte esencial del desarrollo de WordPress. Proporciona una manera fácil y eficiente de cargar hojas de estilo en tu sitio web.

En este tutorial, hemos cubierto la función wp_enqueue_style() y proporcionado algunos ejemplos de cómo puedes usarla para personalizar la apariencia de tu sitio web y mejorar su velocidad.

Esperamos que este tutorial te haya resultado útil y que puedas utilizar la función wp_enqueue_style() con éxito en tus proyectos de WordPress.

Si tienes alguna duda o sugerencia, consulta nuestra guía de WordPress o deja un comentario a continuación.