Cargar CSS en WordPress de forma correcta

Sin CSS, tienes muy limitadas opciones para dar estilo a tus páginas web. Y sin la inclusión correcta de CSS dentro de WordPress, puedes hacer que sea extremadamente difícil para los usuarios de tu tema personalizar su estilo.

En este tutorial, vamos a echar un vistazo a la forma correcta de poner en cola CSS en WordPress.

WordPress es actualmente el sistema de gestión de contenido más popular del mundo, y tiene decenas de millones de usuarios. Es por eso que, con el fin de lograr que un tema sea exitoso, necesitamos pensar de la misma forma que lo haría cualquier usuario medio de WordPress, tratar de seguir los estándares y cargar correctamente nuestros archivos CSS en nuestros temas.

La forma incorrecta de cargar CSS en WordPress

A lo largo de los años, WordPress ha incrementado su código para hacerlo cada vez más flexible, y el hecho de poner en cola CSS y JavaScript fue un paso más en esa dirección. Sin embargo, nuestros malos hábitos se mantuvieron durante un tiempo. Sabiendo que WordPress introdujo la posibilidad de poner en cola CSS y JavaScript, seguimos añadiendo este código en nuestros archivos header.php:

1

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

2

... o añadimos el siguiente código a nuestros archivos functions.php, pensando que este método era mejor:

1

<?php

2

3

function add_stylesheet_to_head() {

4

	echo "<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";

5

}

6

7

add_action( 'wp_head', 'add_stylesheet_to_head' );

8

9

?>

En los anteriores casos, WordPress no puede determinar si los archivos CSS se cargan en la página o no. ¡Esto podría ser un terrible error!

Si otro plugin utiliza el mismo archivo CSS, WordPress no sería capaz de comprobar si este ya ha sido incluido en la página. A continuación, el plugin cargaría el mismo archivo por segunda vez, lo que resultaría en una duplicidad de código.

Por suerte, WordPress tiene una solución bastante sencilla a problemas como este: registrar y poner en cola las hojas de estilo.

La manera correcta de cargar CSS en WordPress

Como dijimos anteriormente, WordPress ha crecido mucho a lo largo de los años y debemos pensar en cada usuario de WordPress del mundo.

Y además de en ellos, también tenemos que tener en cuenta miles de plugins de WordPress. Pero no dejes que todo esto te asuste: WordPress tiene funciones bastante útiles para cargar correctamente los estilos CSS en WordPress.

Echemos un vistazo.

Registro de archivos CSS

Si vas a cargar hojas de estilos CSS, primero debes registrarlas con la función wp_register_style():

1

<?php

2

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

3

?>

• $handle (cadena, obligatorio) es un nombre único para la hoja de estilos. Otras funciones usarán este "controlador" para poner en cola e imprimir tu hoja de estilos.
• $src (cadena, obligatorio) hace referencia a la dirección URL de la hoja de estilos. Puedes utilizar funciones como get_template_directory_uri() para obtener los archivos de estilo ubicados en el directorio de tu tema. ¡No se te ocurra escribir la ruta al archivo de forma literal!
• $deps (matriz, opcional) controla los nombres de los estilos dependientes. Si tu hoja de estilos no funciona si falta algún otro archivo de estilo, utiliza este parámetro para establecer las "dependencias".
• $ver (cadena o booleano, opcional) es el número de versión. Puedes usar el número de versión de tu tema o crear uno, si lo deseas. Si no deseas usar un número de versión, establécelo en null. El valor predeterminado es false, lo que hace que WordPress añada su propio número de versión.
• $media (cadena, opcional) son los tipos de medios CSS como "pantalla" o "portátil" o "impresión". Si no estás seguro de si necesitas usar esto, no lo uses. El valor predeterminado es "all".

Este es un ejemplo de la función wp_register_style():

1

<?php

2

3

// wp_register_style() example

4

wp_register_style(

5

	'my-bootstrap-extension', // handle name

6

	get_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheet

7

	array( 'bootstrap-main' ), // an array of dependent styles

8

	'1.2', // version number

9

	'screen', // CSS media type

10

);

11

12

?>

Registrar estilos es, de algún modo, algo "opcional" en WordPress. Si crees que tu estilo no va a ser utilizado por ningún plugin o no vas a usar ningún código para cargarlo de nuevo, eres libre de ponerlo en cola sin registrarlo. Fíjate cómo se hace a continuación.

Poner en cola los archivos CSS

Después de registrar nuestro archivo de estilo, necesitamos "ponerlo en cola" para que esté listo para su carga en la sección <head> de nuestro tema.

Hacemos esto con la función wp_enqueue_style():

1

<?php

2

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

3

?>

Los parámetros son exactamente los mismos que con la función wp_register_style(), así que no es necesario repetirlos.

Pero como mencionamos, la función wp_register_style() no es obligatoria, y debo decirte que puedes usar wp_enqueue_style() de dos maneras diferentes:

1

<?php

2

3

// if we registered the style before:

4

wp_enqueue_style( 'my-bootstrap-extension' );

5

6

// if we didn't register it, we HAVE to set the $src parameter!

7

wp_enqueue_style(

8

	'my-bootstrap-extension',

9

	get_template_directory_uri() . '/css/my-bootstrap-extension.css',

10

	array( 'bootstrap-main' ),

11

	null, // example of no version number...

12

	// ...and no CSS media type

13

);

14

15

?>

Ten en cuenta que si un plugin necesitase encontrar tu hoja de estilos o tuviese la intención de cargarla en varias partes de tu tema, definitivamente debes registrarla primero.

Cargar los estilos en nuestro sitio web

No podemos usar simplemente la función wp_enqueue_style() en cualquier parte de nuestro tema, necesitamos usar "acciones". Existen tres acciones que podemos usar para varios propósitos:

• wp_enqueue_scripts para cargar scripts y estilos en el front-end de nuestro sitio web,
• admin_enqueue_scripts para cargar scripts y estilos en las páginas de nuestro panel de administración,
• login_enqueue_scripts para cargar scripts y estilos en la página de inicio de sesión de WordPress.

Aquí tienes ejemplos de estas tres acciones:

1

<?php

2

3

// load css into the website's front-end

4

function mytheme_enqueue_style() {

5

	wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); 

6

}

7

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

8

9

// load css into the admin pages

10

function mytheme_enqueue_options_style() {

11

	wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); 

12

}

13

add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );

14

15

// load css into the login page

16

function mytheme_enqueue_login_style() {

17

	wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); 

18

}

19

add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );

20

21

?>

Hay un anuncio importante en Make WordPress: "¡Usa wp_enqueue_scripts(), no wp_print_styles()!". Te informa sobre un posible error de incompatibilidad con WordPress v3.3.

Algunas funciones adicionales

En WordPress existen algunas funciones muy útiles sobre CSS: Nos permiten imprimir estilos en línea, comprobar el estado de la cola de nuestros archivos de estilo, añadir metadatos para nuestros archivos de estilo y anular el registro de estilos.

Echemos un vistazo.

Añadir estilos dinámicos en línea: wp_add_inline_style()

Si tu tema tiene opciones para personalizar el estilo del mismo, puedes utilizar el estilo en línea para imprimirlos con la función wp_add_inline_style():

1

<?php

2

3

function mytheme_custom_styles() {

4

	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );

5

	$bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"

6

	$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';

7

	wp_add_inline_style( 'custom-style', $custom_inline_style );

8

}

9

add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

10

11

?>

Rápido y sencillo. Sin embargo, recuerda: Tienes que utilizar el mismo nombre de handle con la hoja de estilo cuyos estilos desees añadir posteriormente en línea.

Comprobar el estado de la cola de la hoja de estilos: wp_style_is()

En algunos casos, es posible que necesitemos la información sobre el estado de un estilo: ¿Está registrado, está en cola, está impreso o está a la espera de ser impreso? Puedes determinarlo con la función wp_style_is():

1

<?php

2

3

/*

4

 * wp_style_is( $handle, $state );

5

 * $handle - name of the stylesheet

6

 * $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'

7

 */

8

9

// wp_style_is() example

10

function bootstrap_styles() {

11

12

	if( wp_style_is( 'bootstrap-main' ) {

13

14

		// enqueue the bootstrap theme if bootstrap is already enqueued

15

		wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );

16

17

	}

18

19

}

20

add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );

21

22

?>

Añadir metadatos a la hoja de estilos: wp_style_add_data()

Aquí tienes una impresionante función llamada wp_style_add_data() que te permite añadir metadatos a tu estilo, ¡incluyendo comentarios condicionales, soporte RTL y mucho más!

Mira esto:

1

<?php

2

3

/*

4

 * wp_style_add_data( $handle, $key, $value );

5

 * Possible values for $key and $value:

6

 * 'conditional' string      Comments for IE 6, lte IE 7 etc.

7

 * 'rtl'         bool|string To declare an RTL stylesheet.

8

 * 'suffix'      string      Optional suffix, used in combination with RTL.

9

 * 'alt'         bool        For rel="alternate stylesheet".

10

 * 'title'       string      For preferred/alternate stylesheets.

11

 */

12

13

// wp_style_add_data() example

14

function mytheme_extra_styles() {

15

	wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );

16

	wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );

17

	/*

18

	 * alternate usage:

19

	 * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );

20

	 * wp_style_add_data() is cleaner, though.

21

	 */

22

}

23

24

add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );

25

26

?>

Impresionante, ¿no?

Si no me equivoco, este es el primer tutorial que se ha escrito sobre esta pequeña, pero útil, función.

Anular el registro de archivos de estilo con wp_deregister_style()

Si alguna vez necesitas "cancelar el registro" de una hoja de estilos (para volver a registrarla con una versión modificada, por ejemplo), puedes hacerlo con wp_deregister_style().

Veamos un ejemplo:

1

<?php

2

3

function mytheme_load_modified_bootstrap() {

4

	// if bootstrap is registered before...

5

	if( wp_script_is( 'bootstrap-main', 'registered' ) ) {

6

		// ...deregister it first...

7

		wp_deregister_style( 'bootstrap-main' );

8

		// ...and re-register it with our own, modified bootstrap-main.css...

9

		wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );

10

		// ...and enqueue it!

11

		wp_enqueue_style( 'bootstrap-main' );

12

	}

13

}

14

15

add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );

16

17

?>

Aunque no es requerido, siempre debes volver a registrar otro estilo si cancelas el registro de uno, podrías romper algo si no lo haces.

También existe una función similar llamada wp_dequeue_style(), que elimina las hojas de estilo en cola como su nombre indica.

Resumiéndo todo

¡Felicidades, ahora sabes todo sobre la inclusión correcta de CSS en WordPress! Espero que hayas disfrutado del tutorial.

¿Tienes algún consejo o experiencia que quieras compartir? ¡Comenta a continuación y comparte tus conocimientos con nosotros! Y si te gustó este artículo, ¡no te olvides de compartirlo entre tus amigos!