Saltar al contenido

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

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

Para ello recomendamos utilizar el función wp_enqueue_style(). Es una herramienta poderosa para agregar hojas de estilo personalizadas a su complemento o tema de WordPress. Esta característica también garantiza que las hojas de estilo se carguen sólo cuando sea necesario y ayuda a evitar conflictos con otros complementos o temas.

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

Descargue la hoja de referencia definitiva de WordPress

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

Comenzaremos con algunos ejemplos básicos para ayudarle a comprender 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 estilo estilo.css del tema principal, utilice la función wp_enqueue_style() en el archivo funciones.php de tu tema.

Ver el archivo funciones.php en el administrador de archivos.

Aquí hay un ejemplo de cómo se ve:

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, estilo de mi tema es un nombre único para la hoja de estilos en cola, mientras que la función get_stylesheet_uri() manejar la URL del archivo estilo.css del tema principal.

Ver el archivo style.css en el administrador de archivos.

Entonces la función wp_enqueue_style() registra el estilo y lo agrega a la cola. Finalmente, la función agregar_acción() agrega tu función personalizada my_theme_enqueue_styles() para el gancho wp_enqueue_scriptslo que garantizará que la hoja de estilo se ponga en cola correctamente.

Leer  Los 7 mejores plugins de WordPress para portfolios en 2024

Cómo poner en cola otras hojas de estilo

También puedes usar la función wp_enqueue_style() para agregar estilos adicionales. Por ejemplo, puede utilizar esta función para incluir opciones de estilo que se encuentran en un archivo separado y agregarlas a la hoja de trabajo 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 utilizamos 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 primero pondrá en cola la hoja de estilo principal y luego pasará a 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 estilo desde una fuente externa. El proceso puede resultar beneficioso si desea utilizar fuentes personalizadas o una hoja de estilo alojada en una red de entrega de contenido (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');

Recuerde reemplazar la pieza del INSERTAR URL con una URL de hoja de estilo real.

Cómo agregar archivos de script a WordPress usando wp_enqueuing_script

WordPress tiene una función incorporada llamada wp_enqueue_script() que le permite poner en cola JavaScript o scripts similares. Agregue el siguiente código al archivo funciones.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' );

Tenga en cuenta que esta función toma más parámetros:

  • mi guión: el nombre de su guión. Puedes elegir el nombre que quieras..
  • /js/mi-script.js: ubicación de su guión. En este caso, se encuentra en el directorio js del tema de WordPress.
  • variedad()– Define las dependencias que puede tener tu script.
  • 1.0: el número de versión de la hoja de estilo.
  • VERDADERO– Determina si el script debe cargarse en el pie de página.
Leer  Cómo insertar una imagen en WordPress con los editores de bloques y clásico

Ejemplos útiles de wp_enqueue_style

Vea algunos casos prácticos de uso del recurso. wp_enqueue_style() para mejorar su sitio web de WordPress.

Cargue CSS solo en ciertas páginas

Cargar CSS en páginas específicas puede aportar varios beneficios a un sitio de WordPress:

  • Tiempos de carga de página más rápidos: Al cargar CSS solo en las páginas donde es necesario, evita código innecesario. Esto mejorará la velocidad general de su sitio.
  • Mantenimiento más fácil: puedes cambiar archivos CSS sin afectar otras páginas.

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

<?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 CSS al final de la página, el navegador puede priorizar la carga de HTML y otros recursos importantes primero. Como resultado, cargar CSS en el pie de página mejora el tiempo de carga de la página.

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

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

Tenga en cuenta 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 esta razón, cargue primero el CSS más importante en la sección del encabezado y luego pase a la sección del pie de página.

Agregar estilos dinámicos en línea

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

Leer  Cómo instalar WordPress en un subdominio: 2 métodos comprobados

En el siguiente ejemplo, combinaremos las funciones wp_enqueue_style() Es wp_add_inline_style() para aplicar el estilo del archivo design.css y títulos 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' );
?>

Tenga en cuenta que el estilo en línea sólo funcionará después del diseño.css está correctamente pegado.

Verificar el estado de la cola de hojas de estilo

Usa la función wp_style_is() si desea obtener más información sobre el estado de la hoja de estilo. Esta función puede comprobar si un archivo de hoja de estilo CSS está en 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 usar la función wp_enqueue_estilo con el siguiente fragmento de código para poner en cola una hoja de estilos CSS con metadatos del 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, usamos la función wp_style_add_data() y agregamos un título a la hoja de estilos CSS.

Anular el registro de archivos de estilo

Es importante eliminar los archivos de estilo CSS que ya no utilices. Cuando varios complementos o temas ponen en cola el mismo archivo de estilo, pueden ocurrir conflictos y problemas con el sitio web.

El siguiente código cancelará el registro y retirará de la cola un estilo específico y lo reemplazará con una nueva hoja de estilo:

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' );
}
1714728961 325 Los 20 mejores temas de WordPress para criptomonedas en 2024.webp

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 su sitio web.

En este tutorial, cubrimos la función. wp_enqueue_style() y proporcionó algunos ejemplos de cómo puede usarlo para personalizar la apariencia de su sitio y mejorar su velocidad.

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

Si tiene alguna pregunta o sugerencia, consulte nuestra guía de WordPress o deje un comentario a continuación.

Compartir

Deja una respuesta