En cualquier tema de WordPress, el archivo style.css es obligatorio. De no ser así, WordPress no reconocería el directorio de un tema. Basta con que esté, ni siquiera tienes que usarlo, pero por deberías por buenas prácticas.
Además, este archivo no sólo indica a WordPress que hay un tema, se establecen las reglas de diseño. No es necesario que escribas todas las reglas en ese CSS, puedes crear otras hojas de estilo para tener un diseño modular.
Una vez que están creadas hay que llamarlas, hay diferentes formas de hacerlo. En esta ocasión me centraré en realizar las llamadas en el header.
Con el directorio del tema
|
1 |
<link rel="stylesheet" href="/wp-content/themes/Tu-Tema/style.css" type="text/css" /> |
Método directo
|
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css"/> |
Método dinámico
|
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');?>/style.css" type="text/css" /> |
Específico para Internet Explorer
|
1 2 3 |
<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/style-ie8.css"/> <![endif]--> |
Llamar a varios CSS
|
1 2 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/css"/> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/formularios.css" type="text/css"/> |
@import
Este método se usaría en el propio styles.css en el inicio del código. Es un método aceptable si no quieres agregar varias líneas para llamar a CSS. Sin embargo, es preferible no abusar de este método ya que perjudicaría el rendimiento de la carga de la página cómo mostré en una ocasión.
|
1 2 3 |
@import "style/css/reset.css"; @import "style/css/tipo.css"; @import "style/css/layout.css"; |
Llamada de archivos CSS con condicionales
WordPress te permite identificar qué página está abierta, pudiendo usar un estilo u otro en función de la página en la que esté el usuario.
|
1 2 3 |
<?php if(is_page_template("page-galerias.php")){?> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/galerias.css" /> <?php } ?> |
Y hasta aquí cómo llamar hojas de estilo en WordPress. A seguir picando y feliz año! 🙂