Cargar diferentes hojas de estilos en WordPress
Crear diferentes hojas de estilos para proyectos web, aporta claridad y eficiencia a los mismos.
Recoger en una sola hoja de estilos todas las necesidades de cada una de las páginas de un proyecto web, puede llegar a influir negativamente en la experiencia de usuario.
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
|
1 2 |
#wrapper{max-width:90vw;margin:0 auto;} p{font-weight:400;padding:1vh 3vw;} |
Estilos entradas
|
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
|
1 2 |
#wrapper{background:#fff;display:grid;grid-template-columns:1fr 6fr 1fr;grid-gap:2rem;} p{padding:1vh 3vw;} |
Estilos páginas
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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.
Deja una respuesta