Cargar diferentes hojas de estilos en Wordpress

Más es menos!

Fecha de publicación: 16/11/2022

Si te preguntas si es posible tener hojas de estilos independientes para entradas, páginas, categorías, o etiquetas en WordPress, la respuesta es sí, y no solo es posible sino que, desde mi punto de vista, es una práctica muy recomendable.

Para ello deberás agrupar los valores comunes en una hoja de estilos y crear hojas independientes para el resto del css. Es decir, si tenemos un grupo de líneas que se repiten en las plantillas de entradas, páginas y categorias, ese código irá a la hoja de estilos común, mientras el resto pasará a formar parte de la hoja de estilos específica de cada uno de los ejemplos anteriormente mencionados.

Este método de trabajo, no solo nos permite evitar la repetición de bloques de código sino que, además, nos ayuda a optimizar los archivos css resultantes y a evitar que bloques de código pertenecientes a una plantilla se reproduzcan fuera de ella.

estilos-comunes.css
– estilos-entradas.css
– estilos-categorias.css
– estilos-paginas.css

Estilos comunes

#wrapper{max-width:90vw;margin:0 auto;}
p{font-weight:400;padding:1vh 3vw;}

1 2	#wrapper{max-width:90vw;margin:0 auto;} p{font-weight:400;padding:1vh 3vw;}

Estilos entradas

#wrapper{background:#ccc;display:grid;grid-template-columns:4fr 1fr;grid-gap:1rem;}
p{font-family:Poppins,Lato, arial;padding:1vh 3vw;}

1 2	#wrapper{background:#ccc;display:grid;grid-template-columns:4fr 1fr;grid-gap:1rem;} p{font-family:Poppins,Lato, arial;padding:1vh 3vw;}

Estilos categorías

#wrapper{background:#fff;display:grid;grid-template-columns:1fr 6fr 1fr;grid-gap:2rem;}
p{padding:1vh 3vw;}

1 2	#wrapper{background:#fff;display:grid;grid-template-columns:1fr 6fr 1fr;grid-gap:2rem;} p{padding:1vh 3vw;}

Estilos páginas

#wrapper{background:#fff;display:block;width:100%;}
p{font-family:Lato, Poppins, arial;padding:1vh 3vw;}

1 2	#wrapper{background:#fff;display:block;width:100%;} p{font-family:Lato, Poppins, arial;padding:1vh 3vw;}

Para llamarlas solo necesitas incluir esta función en el archivo functions.php del directorio de tu tema activo.

function carga_css(){
if (is_home()) {
wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/home.css', array(), false, 'all');}
elseif (is_single()) {
wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/single.css', array(), false, 'all');}
elseif (is_page()) {
wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/page.css', array(), false, 'all');}
elseif (is_search()) {
wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/search.css', array(), false, 'all');}
elseif (is_attachment()) {
wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/attachment.css', array(), false, 'all');}
}
add_action('wp_enqueue_scripts', 'carga_css');</pre>

function carga_css(){

if (is_home()) {

wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/home.css', array(), false, 'all');}

elseif (is_single()) {

wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/single.css', array(), false, 'all');}

elseif (is_page()) {

wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/page.css', array(), false, 'all');}

elseif (is_search()) {

wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/search.css', array(), false, 'all');}

elseif (is_attachment()) {

wp_enqueue_style('nombre_tema', get_stylesheet_directory_uri().'/directorio-css/attachment.css', array(), false, 'all');}

}

add_action('wp_enqueue_scripts', 'carga_css');</pre>

En lugar de nombre_tema indicaremos el nombre del tema activo.
En lugar de /directorio-css/xxx.css indicaremos la ruta hacia el archivo correspondiente en cada caso.

De igual modo puedes crear hojas de estilos adaptadas a cada tipo de dispositivo.

Más es menos!

Estilos comunes

Estilos entradas

Estilos categorías

Estilos páginas

Carga de hojas de estilo: rendimiento.

Modularidad con múltiples hojas de estilo.

Organización eficiente