Al crear temas o plugins de WordPress, es fundamental incluir las hojas de estilo en la cola para que se carguen correctamente.
Recomendamos usar la función wp_enqueue_style(). Es una herramienta poderosa para agregar hojas de estilo personalizadas a tu plugin o tema de WordPress. Además, esta función evita conflictos con otros plugins o temas y carga las hojas de estilo sólo cuando es necesario.
En esta guía, hablaremos sobre cómo usar la función wp_enqueue_style() para mejorar la apariencia y la experiencia general del usuario de tu sitio WordPress.
Cómo cargar hojas de estilo CSS en WordPress con wp_enqueue_style
Para ayudarte a comprender mejor cómo funciona la función wp_enqueue_style(), comenzamos con algunos ejemplos básicos.
Cómo poner en cola la hoja de estilo style.css del tema principal.
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í hay un ejemplo de cómo se 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, el nombre de la hoja de estilos en cola es my-theme-style, mientras que la función get_stylesheet_uri() controla la URL del archivo style.css del tema principal.
La función wp_enqueue_style() registra y agrega el estilo a la cola. Finalmente, la función add_action() agrega la función my_theme_enqueue_styles() personalizada a la cola wp_enqueue_scripts, asegurándose de que la hoja de estilos se ponga en cola correctamente.
Cómo agregar nuevas hojas de estilo
Para agregar más estilos, también puedes usar la función wp_enqueue_style(). Por ejemplo, puedes usar esta función para agregar las opciones de estilo de un archivo diferente a la hoja principal.
En lo que respecta al código, puedes reutilizar la mayor parte del ejemplo anterior agregando algunas modificaciones:
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' );La función get_theme_file_uri(), utilizada en este método, devuelve la URL del archivo en el directorio del tema actual. En nuestra situación, es extra.css. Como resultado, la función pondrá en cola primero la hoja de estilos principal antes de pasar a los estilos adicionales.
Cómo para cargar hojas de estilo externas en WordPress
La función wp_enqueue_style() se puede utilizar para cargar una hoja de estilos desde una fuente externa. Si desea utilizar fuentes personalizadas o una hoja de estilos alojada en una red de distribución de contenidos (CDN), este proceso puede ser útil.
El código es muy similar a lo que se muestra en 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 usar wp_enqueuing_script para agregar archivos de script a WordPress
WordPress tiene una función wp_enqueue_script() que te permite poner en cola scripts JavaScript o similares. Agrega el código siguiente al archivo functions.php de su 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 una cantidad de parámetros diferentes:
- 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 de wp_enqueue_style que son útiles
Observa algunos ejemplos útiles de cómo usar la función wp_enqueue_style() para mejorar tu sitio 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 ejemplo siguiente, escribiremos y cargaremos CSS en la página Contáctenos con el hook wp_enqueue_scripts y la función is_page de WordPress:
<?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' );
}
}
?>Añadir archivos CSS al pie de página.
Al trasladar el CSS al pie de la página, el navegador puede priorizar la carga del HTML y otros recursos cruciales. Por lo tanto, cargar CSS en el pie de página acelera la carga de la página.
El método más efectivo para cargar CSS en el pie de página es utilizar 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' );
?>Es importante tener en cuenta que cargar CSS en el pie de página puede causar problemas de renderizado y dar la impresión de que la página está mal diseñada o sin estilo. Como resultado, primero carga el CSS más crucial en la sección del encabezado y luego pasa al pie de página.
Incluye estilos dinámicos en línea.
Los estilos dinámicos en línea permiten agregar estilos personalizados a componentes específicos de una página web. La función wp_add_inline_style(), que los carga después de un archivo CSS específico, es la forma más simple de añadir estilos en línea.
El siguiente ejemplo combinará las funciones wp_enqueue_style() y wp_add_inline_style() para aplicar el estilo y los titulares en negrita al archivo design.css:
<?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 en línea solo será posible después de que el archivo de design.css esté encolado correctamente.
Verifica el estado de la hoja de estilo.
Si deseas obtener más información sobre el estado de la hoja de estilos, utiliza la función wp_style_is(). Esta función puede determinar si un archivo de hoja de estilos CSS está registrado, en la cola 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' );
?>Añadir metadatos a la hoja de estilo.
Para poner en cola una hoja de estilos CSS con metadatos de título, también puedes usar la función wp_enqueue_style con el fragmento de código siguiente:
<?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' );
?>Hemos utilizado la función wp_style_add_data() para agregar un título a la hoja de estilos CSS en este ejemplo.
Cancelar el registro de estilo de archivo
Es fundamental eliminar los archivos de estilo CSS que ya no uses. Pueden surgir conflictos y problemas en el sitio web cuando varios plugins o temas ponen en cola el mismo archivo de estilo.
El siguiente código eliminará el registro y la cola de un estilo específico y creará una hoja de estilos nueva:
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' );
}Conclusiones
La función wp_enqueue_style() es fundamental para el desarrollo en WordPress. Proporciona una manera simple y efectiva de agregar hojas de estilo a su sitio web.
Esta guía cubrió la función wp_enqueue_style() y proporciona ejemplos de cómo usarla para personalizar el aspecto y la velocidad de tu sitio web.
Recuerda que un gran factor que determina la velocidad de tu sitio web, es el servidor en donde esta esté alojada. Descubre los planes de hosting optimizados para WordPress que DonWeb tiene para ofrecerte.
