Theme WordPress Inclusivo 9: Normalize y Google Fonts


En el último capítulo aprendimos a incorporar la css principal a nuestro theme, hoy aprovecharemos para dos aspectos, por un lado como añadir más hojas de estilo, y por otro incorporar dos funciones básicas en toda web: Normalize y Web Fonts (usando Google Fonts para ello).

Normalize

Normalize es una hoja de estilo css cuya razón principal de ser es “estandarizar la css del navegador”, o dicho de otro modo, esa css minimiza al máximo las diferencias de dibujado de cada navegador, de forma que el lienzo de trabajo sea lo más neutro posible.

Para incorporar esta hoja de estilo, accederemos a la web de Normalize, pulsaremos “Download” y guardaremos como fichero “normalize.css” en una carpeta llamada css dentro de nuestro theme.

Ahora es el momento de incorporar esta css a wordpress, siguiendo la metodología ya aprendida, abrimos functions.php e incorporamos el código siguiente a nuestra función de estilos y scripts, justo antes de la línea que incluía la hoja de estilos principal:

...
wp_enqueue_style("normalize", 
  get_template_directory_uri() . "/css/normalize.css",
  array(), "8.0.1");
...

Podemos observar que el código se parece mucho al que empleamos para incorporar la css principal, solo cambia el nombre identificativo (lógicamente) y la forma de indicar donde está la css a incorporar. Para realizar esto último hemos utilizado la función get_template_directory_uri, que nos aporta la ruta base del theme y hemos agregado el segmento de url necesario para llegar al fichero que acabamos de incorporar. Realmente sencillo.

Para asegurarnos de que Normalize sea la primera de las dos hojas de estilo en cargarse (pues nuestros estilos han de basarse en un lienzo normalizado), hemos de modificar la línea que usamos para incluir styles.css quedando del siguiente modo:

wp_enqueue_style("style", get_stylesheet_uri(), 
  array("normalize"), "0.0.1");

Google Fonts

Existen otras formas y webs para incluir webfonts, pero a dia de hoy, Google Fonts es el rey indiscutible en la materia, se usa habitualmente por defecto, salvo que se quiera incluir algo que no esté ahí, lo cual, para la inmensa mayoría de los proyectos que te puedas encontrar (incluso profesionalmente) será suficiente.

Una vez tengamos claras las fuentes que deseamos para nuestro proyecto según el diseño que vayamos a aplicar, entraremos en la web de Google Fonts, las seleccionaremos y una vez las tengamos, accedemos al panel donde podemos descargarlas y seleccionaos la pestaña “embed”.

Veremos en esa pestaña un bloque de código con la etiqueta link que sirve para insertarlo en un html, en nuestro caso nos interesa solamente el contenido del atributo href, que contiene la dirección que usaremos en el código para wordpress.

El código quedará similar al siguiente, donde incluimos la url que hemos copiado como segundo parámetro:

wp_enqueue_style("google-fonts",
 "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700", 
  array("normalize","style"), "1.0.0");

Hemos incluido tanto “normalize” como “style” en el array de dependencias por dos motivos, el primero ilustrativo y el segundo, que buscamos que la fuente sea lo último en cargar, y es que a pesar de que Google tiene más que optimizada la carga de sus recursos, desde la perspectiva de nuestra web, es interesante que se cargue entera y la guinda sea la fuente. De este modo si por lo que fuere, la conexión de nuestro usuario falla pero ya ha cargado los recursos anteriores, la web, aún sin la fuente específica, le funcionará apropiadamente.

En próximos capítulos seguiremos trabajando en dos aspectos simultáneamente, por un lado la creación del theme y por otro diferentes aspectos de código html y accesibilidad que ¡son absolutamente necesarios para crear nuestro tema de forma inclusiva!

Y por cierto, si quieres que escriba sobre esos otros métodos que conozco para incluir webfonts, por favor, ¡indícamelo en los comentarios!

¡Compártelo!

Ayudame a difundir este contenido a todo aquel que pueda sacarle partido, difundelo en redes, cuéntaselo a tus amigos, coméntalo en la cola del supermercado, además de aportar, ¡seguro que conoces a gente interesante y acabas uniéndose al bando rebelde!

Sígueme en Redes

Acelera mi progreso de la materia que te interesa.

El calendario y ritmo de publicaciones actualmente responde a mis necesidades de estudio y desarrollo de proyectos personales, si quieres invertir en que acelere alguna materia concreta, te ofrezco una posibilidad:

Puedes donar en mi paypal (paypal at metsuke.com), indicando la materia, por cada 25 euros donados, priorizaré un capítulo de la materia que me indiques que ya tenga escrito para que salga el proximo dia viable y disponible de lunes a viernes (en orden de llegada y a un post diario).

En caso de que el capítulo aún no exista, centraré mi atención en escribirlos y publicarlos con prioridad, pero no puedo prometer inmediatez.

De nuevo priorizaré las donaciones por orden de llegada pero cuando coincidan varias, iré rotando cada dia una para evitar la monopolización de mi foco de tareas.

Me reservo el fin de semana para priorizar lo que considere pertinente en el caso de que haya cola de entrega. Si te gusta el proyecto, ¡es un buen modo de apoyarme!

¿Te interesan mis servicios a título personal?

Puedo ofrecerte una amplia gama de productos y servicios en accesibilidad a través de mis partners, aunque quizá prefieras que lo haga yo personalmente…

En ese caso, puedes contactarme en mi correo r.carrillo@metsuke.com y cuéntame que necesitas, si lo que leo me gusta, te pongo en contacto con el comercial de mi empresa de consultoría.

Si quieres que sea yo expresamente quien te atienda, puedes indicármelo y llegamos a un acuerdo.

Advierto que esta última posibilidad te saldrá bastante más cara que hablar con mi equipo, pero si es lo que deseas, a tu disposición.

Un Abrazo.

Sobre las traducciones

Por el momento me he visto obligado a detener la traducción del contenido, apenas doy abasto a escribirlo (que es mi objetivo, ya que son mis apuntes de estudio), por lo que no parece tener sentido mantener activas unas traducciones que no doy abasto a crear.

En caso de que más adelante el flujo de caja me lo permita, es mi intención contratar servicios de traducción y editores que realicen la tarea, pero por ahora lo dejo desactivado.


Quizá te interese leer más sobre Wordpress Inclusivo

Una Respuesta a “Theme WordPress Inclusivo 9: Normalize y Google Fonts”

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>