Theme WordPress Inclusivo 8: Insertar la hoja de estilo CSS

Hemos generado una parte de la cabecera, pero no hemos aportado estilo visual alguno, veamos hoy como incluir la hoja de estilos que tenemos creada en wordpress.

Hay formas de trabajar bastante estandarizadas en WordPress, a pesar del aparente caos que percibimos al comienzo, una de estas metodologías es la que hemos podido experimentar para agregar el menú, esto es, crear una función que configura un determinado elemento o grupo de estos, y posteriormente asociarlo a un hook para que se ejecute en el momento apropiado dentro del flujo de trabajo de wordpress.

Agregar hojas de estilo no es diferente, para ello abre functions.php y agrega este código:

...
function metsu7_scripts_styles() {
  wp_enqueue_style("style", get_stylesheet_uri(), 
		array(""), "0.0.1");
}
add_action("wp_enqueue_scripts","metsu7_scripts_styles");
...

Este código es realmente sencillo, la función será llamada durante el proceso de “wp_enqueue_scripts” que básicamente es el proceso en que wordpress mira que css y javascript tiene que incluir en el html, los ordena internamente y genera el código que realmente los incorpora al resultado final.

La propia función “metsu7_scripts_styles” será la que aglutine la definición de los ficheros que incluiremos más adelante en nuestro theme, empezando hoy por la css principal, dentro usamos la función wp_enqueue_style para informar a wordpress del fichero css (concretamente styles.css) y sus características.

La función recibe, en esta ocasión, cuatro parámetros:

  • El primero, el identificador mediante el cual haremos referencia a este fichero, en nuestro caso “styles”
  • En segundo, la dirección donde está situado nuestro fichero, usando para ello la función get_stylesheet_uri, que devuelve como resultado la ruta de styles.css, archivo en que define el theme, como vimos hace algunos capítulos.
  • El tercer parámetro es un array con las dependencias del fichero que vamos a incluir, de forma que wordpress pueda tomarlas en consideración a la hora de decidir el orden en que incorpora los import de los diferentes tokens, veremos como funciona más adelante, este fichero no tiene (por ahora) dependencia alguna, así que pasamos un array vacío.
  • Por último, la versión del fichero que incluimos (en este caso 0.0.1), esta versión se usa para la caché del navegador por lo que se recomienda mantener un control de versiones acorde a esta necesidad.

Un último detalle

Ahora sólo nos queda decirle a wordpress donde insertar las css en nuestra estructura html. Para ello, abrimos header.php, y modificamos la parte de <head> para que quede del siguiente modo:

...
<head>
  <meta charset="utf-8">
  <title>TODO: Site Title</title>
  <?php wp_head(); ?>
</head>
...

Si observamos con atención, el cambio relevante en esta ocasión es la inclusón de la llamada a la función wp_head, que se encarga de ejecutar todo el proceso de generación de esa parte de la cabecera html, incluyendo nuestro css.

Una vez hecho todo esto, deberíamos ver como, cualquier código css incorporado a styles.css es ejecutado en el navegador. Es una prueba típica, poner el fondo de la página roja y comprobar que esto se refleja correctamente en el resultado final.

Si abres el código fuente de la página, verás que además de nuestro css, wordpress ha incorporado más cosas, las discutiremos en un monográfico específico más adelante.

Investiga a fondo las funciones que hemos usado, y familiarizate de este modo con sus posibilidades y el sistema de documentación de wordpress … antes de ¡abordar el siguiente capítulo!

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>