Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Utilización de fuentes web en el tema de WordPress

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una parte básica de un tema son sus fuentes, así que es preferible preparar la tipografía del tema antes de empezar ninguna otra tarea. En este vídeo vamos a añadir fuentes web de Google a nuestro tema

Transcripción

Igual que cuando se diseña un sitio, una de las primeras decisiones suele ser la elección de fuentes; también, cuando estamos desarrollando el tema para ese sitio lo normal es que empecemos metiendo las fuentes que vamos a utilizar. esto es fundamental hacerlo al principio porque, dependiendo de la fuente que tenemos, estilos como el tamaño de la letra o como el interlineado, por ejemplo, van a cambiar completamente así que, es decisivo cargar la fuente cuanto antes. Por eso estamos dedicando un vídeo sobre esto ahora. Otra de las cosas que voy a hacer va a ser utilizar fuentes web. Estoy dentro de Google Fonts y en concreto voy a seleccionar un par de fuentes voy a seleccionar, por un lado, la fuente Roboto, y, por otro, voy a bajar un poco más abajo, y voy a utilizar, un poco más abajo está, la fuente Dosis. Bien, pues selecciono ambas fuentes, las amplío. Voy ahora a personalizar la carga de esas fuentes, entonces de Dosis, que es esta segunda, quiero cargar solamenente el tipo Light porque quiero utilizarla en rótulos pero que sean muy finos. Y luego, en el caso de Roboto, en cambio, voy a cargar Regular y voy a cargar también Regular Italic y voy a cargar Bold y Bold Italic. Ya tengo seleccionadas las fuentes que utilizaré. Ahora vuelvo de nuevo a embed, esto me da la etiqueta link que necesito para cargar desde mi página estas fuentes, pero no se trata de copiar una etiqueta link y pegarla, se trata de hacer que el tema se ocupe de que en todas las plantillas se cargue esta URL automáticamente. Así que voy a copiar esta URL, voy a irme a NetBeans y dentro del programa voy a abrir el archivo functions.php. Este archivo functions tiene una función que se ocupa de la carga de los fuentes de los archivos externos, tanto de archivos de JavaScript, con enqueue_script como de archivos css, como en este caso, el css básico. Bien, pues voy al principio de esta... función a pedirle que me cargue un estilo: enqueue_style. Como parámetros le voy a pasar bueno, primero un nombre único: mitema-fonts. Y luego, un segundo parámetro que es el importante. Le voy a pasar la URL que he copiado directamente desde Google Fonts. Voy a guardar ahora este archivo y, si vuelvo a Chrome y lo recargo, vamos a comprobar que esa fuente se está cargando. Abro el head y dentro de este head voy a buscar hacia abajo hasta que aparezca. Aquí lo tenemos fonts.googleapis y todo lo demás. Aquí tenemos esa Roboto. Bien, de momento, ya he hecho esa carga. Por cierto, que es interesante ver también que en esta URL se están definiendo los grosores distintos y si son Italic o no, de las fuentes que estoy utilizando. En un momento dado siempre puedo borrarlo de aquí, con eliminar la parte de la ruta que me interese, o con añadir nuevas piezas. Simplemente con eso ya estaría modificando el grupo de fuentes que se cargan. El siguiente paso es utilizar estas fuentes. Así que voy a irme a los estilos scss, y dentro de ellos, en la carpeta de Variables, voy a irme al archivo typography. En este archivo yo puedo añadir nuevas fuentes aparte de ese font__main, pues puedo añadir, por ejemplo, font_normal y aquí añadir el tipo de letra que está descargándose desde Google Fonts. Aquí tengo abajo el código para Roboto, así que lo copiaré y lo pegaré. Tengo también el código para Dosis. Lo copio, vuelvo de nuevo, bien. Ahora lo voy a guardar. ¿Cuál es el siguiente paso? Utilizarlo. En vez de utilizar font_main pues en ciertos casos voy a utilizar font_normal. y ¿dónde hago este cambio? pues en la carpeta tipografía, como es lógico. Aquí en tipography tengo para body, el texto normal y demás que, como font families está cargando font_main pues voy a sustituir ese font_main por font_normal y, por otro lado, dentro de los headings aquí es donde tengo las distintas etiquetas: h1, h2, h3, etcétera. Bueno pues puedo coger y reutilizar este código y hacer que aquí, el tipo de letra usado sea la segunda variable que he creado que, por cierto, la he escrito mal. Así que la voy a cambiar: Font. Bien. Pues lo copio, guardo ese archivo, sustituyo la variable, lo guardo, y ahora vamos a ver el resultado dentro de mi página. Aquí vemos cómo ya, gracias a LiveReload, me está cargando estos rótulos en este tipo de letra, y cómo el tipo de letra normal, pues es la Roboto que había seleccionado incluso en todos los headings, podemos ver, efectivamente, el resultado de esos dos tipos de letra que he cargado ya desde Google Fonts.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017
Duración:4:16 horas (48 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.