Durante el desarrollo de un tema hijo o de un plugin, puede ser necesario que se carguen varias hojas de estilo CSS en función de la maquetación del tema.

Esta entrada está orientada a explicar cómo cargar una hoja de estilo CSS para un tema hijo:

Función para encolar hojas de estilos externas en WordPress

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

Los parámetros de esta función corresponden a:

$handle

  • Tipo: string
  • Requerido: Si
  • Descripción: Es un nombre que debe identificar, de forma única, la hoja de estilos a cargar.

$src

  • Tipo: string
  • Requerido: No, es opcional.
  • Descripción: Es la ruta o URL de la hoja de estilos que se va a cargar.
  • Valor por defecto: » (vacío)

$deps 

  • Tipo: string[]
  • Requerido: No, es opcional.
  • Descripción: Si los estilos a registrar depende de otros, aquí se deben incluir los nombres de los estilos que deben ser cargados primero, para ello fijarse en el identificador ($handle) que identficaba a cada hoja de estilos.
  • Valor por defecto: array() (un array vacío)

$ver

  • Tipo: string|bool|null
  • Requerido: No, es opcional
  • Descripción: El número de versión. WordPress añade este número al final de la URL establecida en el parámetro $src. Al establecerse como vacío o false, WordPress añade el número de la versión de WordPress. Para que no se añada ningún número de versión, se tendría que poner como null.
  • Valor por defecto: false

$media

  • Tipo: string
  • Requerido: No, es opcional
  • Descripción: El valor para que esta hoja de estilos se define, Acepta media tipos como’all’, ‘print’ y ‘screen’, además, acepta media queries como ‘(orientation: portrait)’ and ‘(max-width: 640px)’.
  • Valor por defecto: ‘all’

Ejemplo de cargar una hoja de estilos

Suponiendo que quiera cargar una hoja de estilos a mi tema hijo, el siguiente código, que será puesto en el fichero functions.php, cargará la hoja de estilos CSS que se encuentra dentro del tema hijo, en una carpeta llamada CSS y que contiene el fichero «custom.css»

add_action( 'wp_enqueue_scripts', 'load_custom_css_styles');

function load_custom_css_styles() {
     wp_enqueue_style( 
         'my-custom-style',
         get_theme_file_uri('/css/custom.css'), //URL del fichero CSS
         array(),
         '1.0'
     );
}
  • Se indica que se ejecute en el hook «wp_enqueue_scripts» la función de nombre «load_custom_css_styles«.
  • Dentro de la función load_custom_css_styles se llama a la función wp_enqueue_style, que registra estilos de CSS.
  • Se identifica, con un nombre único, la hoja de estilo cargada en la carpeta «css» con el nombre «my-custom-style«.
  • Se hace referencia al archivo custom.css a cargar, que está dentro de la carpeta css.
  • El parámetro array(), indica si hay alguna dependencia, en caso de haberla la dependencia se cargará antes de nuestro CSS.
  • Se define la versión de la hoja de estilos.

Ejemplo de carga de CSS con dependencias

Cómo último ejemplo, suponer que en la hoja de estilos se requiere alguna clase de Boostrap, en el array de dependencias, se indicaba primero que se debe cargar Bootstrap. Pero no es necesario cargar Boostrap, si no que gracias al sistema de dependencias de WordPress, este archivo se cargará automáticamente y en el orden correcto de las dependencias.

add_action( 'wp_enqueue_scripts', 'jv_custom_css_styles');

function jv_custom_css_styles() {
     wp_enqueue_style( 
         'my-custom-style',
         get_theme_file_uri('/css/custom.css'), 
         array('boostrap'), //Antes de cargar mi estilo, se cargarán los estilos de Bootstrap
         '1.0'
     );
}

Hooks donde añadir hojas de estilos

Según dónde se quieran añadir estas hoja de estilos, se tendrán que enganchar a un hook u otro, teniendo estas tres opciones:

¡Valora este artículo y ayúdame a mejorar la calidad del blog!
(Votos: 0 Promedio: 0)