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

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

Añadir las imágenes al layout del post

¡Prueba gratis durante 10 días

nuestros 1287 cursos !

Prueba gratis Mostrar modalidades de suscripción
Aunque hayamos añadido una imagen destacada al post, todavía tenemos que configurar el tema para que pueda mostrarla, así que en este vídeo vamos a trabajar en la configuración del tema y en añadir esas imágenes a los post en diferentes tamaños.

Transcripción

Para trabajar con las imágenes destacadas tengo varios recursos. Hay, en concreto, tres funciones que son muy importantes. Por un lado, the_post_thumbnail que básicamente me devuelve la imagen destacada de un post en concreto. A esta puedo pasarle como parámetro la imagen que quiero y es que las imágenes destacadas realmente pueden tener varios tamaños distintos y cada uno de ellos va a tener un nombre asociado. Entonces, cuando subo una imagen destacada, se van a generar los distintos tamaños de esa imagen y luego voy a poder recuperarlos utilizando este the_post_thumbnail con el nombre del tamaño en concreto. Eso sí, esos tamaños también tendré que definirlos, así que, tengo una segunda función que es el add_image_size que sirve precisamente para eso, para añadir diferentes tamaños de imagen. En él tendré que definir, por un lado, el nombre y, por otro lado, el alto y el ancho. Y, por último, tengo también otra función que es has_post_thumbnail que me sirve para saber si tengo o no tengo imágenes en un post concreto. Así si yo voy a añadir una etiqueta alrededor de la imagen, por ejemplo, figure, en tal caso yo no quiero que esa etiqueta se añada si no hay imagen, para no ensuciar el código, así que, para ello utilizaré una condicional aplicando este método. Lo primero de todo, ¿dónde debería de aplicar esas funciones? Bueno, pues, la primera de ellas me voy a ir a functions. Dentro de functions en el setup, cuando estoy añadiendo soporte, tenemos configurado por defecto, porque viene así dentro de Underscores, tenemos el add_theme_support. Esto sirve para añadir el soporte para imágenes destacadas y, entonces, en este punto es donde yo puedo añadir un tamaño de imagen. Así que añadiré add_image_size y le voy a pedir que sea full_size y que las imágenes me genere thumbnails, o sea, que me genere la misma imagen, pero en ese caso con el tamaño de 2000 y 650. Esto es para cuando yo estoy dentro del post, para que la imagen salga bien grande. Pero si también quiero utilizar imágenes que sean un poquito más pequeñas para el resumen, bueno, pues, voy a añadir una segunda imagen que sea más pequeña. Le voy a pedir que tenga 400x200, por ejemplo, como máximo y en cambio aquí le voy a poner en vez de full, small_size. Bien, ya hemos añadido entonces dos imágenes posibles que se van a usar dentro de nuestro sitio. Lo siguiente es añadir efectivamente esas imágenes. Los posts se van a ver dentro del archivo single.php, ¿Dónde quiero añadir esa imagen? Bueno, aquí ya podría elegir donde quisiese. Pero siendo imágenes destacadas lo suyo es que lo ponga lo más arriba posible. Eso va a significar, entonces que puedo ponerlo, por ejemplo, pues aquí en la parte superior justo debajo del header. Podría hacerlo de otras maneras diferentes, pero esta, bueno, pues es perfectamente correcta. Bien, aquí estamos trabajando con código HTML o sea que tendré que añadir una etiqueta php, añadir ese thumbnail dentro de esta etiqueta. Utilizaré la función de post_thumbnail, que es la que servía para recuperar una imagen destacada de un tamaño concreto y la imagen en concreto, pues va a ser la grande. Mi tema full_size. Eso es lo que estoy pasando como parámetro. De todos modos, comentaba que esto podría ir metido dentro de otra etiqueta. Podría haber añadido aquí un figure. Entonces, para poder hacer eso, bueno pues tengo varias opciones, pero una de ellas es añadir esa figura que lo envuelva tanto al principio... como al final. Le añadiría una clase, por ejemplo, imagen_destacada y lo tendría listo. Pero claro, como comentaba, yo no quiero que esto aparezca si no tengo la imagen de verdad, quiero decir, si no hay imagen, yo no quiero que me añada esa etiqueta. Bueno no es problema. Añado también una condicional. Esa condicional tiene que venir metida dentro de php, o sea que voy a añadir de nuevo la etiqueta php y ahora tendré que cerrar esta condicional un poco más abajo. Así que añado la llave de cierre, ya he añadido la posibilidad de añadir la figura y además de añadir ese thumbnail. Bien, puesto está guardado, está listo y ahora cuando recargue el thumbnail que he creado dentro de este Hola mundo vemos ya esta imagen, aquí podemos verla. Sobre ella podemos hacer muchas cosas, por ejemplo, bueno pues tendré que decirle que no tenga margen, por ejemplo, para que vaya pegada con el header, debido a ese figure. Puedo también volver otra vez al tema. En el tema vemos que esa imagen no está apareciendo y luego, por último, bueno pues si entro en cualquier otra página que no tiene imagen destacada, podemos ver que se activamente no la está mostrando. O sea que todo funciona correctamente. Si yo quiero añadir esa imagen también a los resúmenes, o sea, si quiero utilizarla para cada uno de los elementos que se están creando en un resumen, tendré que pensar, entonces, en cómo se crean esos resúmenes. Esos resúmenes se crean dentro del loop y dentro de él estamos llamando al content. Bien, pues, entonces puedo irme al content.php dentro de template_parts y aquí añadir también pues un poco lo mismo que he añadido previamente. ¿Dónde debería de añadirlo? Bueno pues en mi caso, yo ya estoy añadiendo esa imagen destacada cuando es una página única. Así que tendré que añadirlo cuando la página es múltiple. Lo suyo entonces es añadirlo dentro de esta condicional, debajo del título, por ejemplo, pues aquí añadir el código necesario. Y este código es aproximadamente el mismo que antes, solo que en este caso… Bueno, en este caso, lo primero de todo, lo tengo montado sobre php, o sea que no tengo que añadir etiquetas php y, por otro lado, después de consultar si realmente tengo thumbnail puedo añadir ese thumbnail dentro de mi tema small_size. Lo guardaría. Y con eso consigo que ahora, en el index, aquí lo vemos, en los resúmenes, me aparece esa imagen, me aparece en pequeño y cuando haga clic en ver todo el post, puedo verlo en grande. Para hacer ahora que no exista este pequeño espacio, voy a volverme al código y dentro del código, dentro de single, que es donde se mostrando, vemos que yo en realidad he añadido un clase imagen_destacada a ese figure. Bueno, pues esto también puedo utilizarlo. Voy a coger esta clase. Voy a irme a la carpeta elements, elements.scss y dentro de ella, dentro de figure, voy a añadir el caso especial de figure cuando tiene esta clase de la que estoy hablando. En esa clase voy a pedirle que tenga un margen de 0 arriba, 0 a la derecha, 1em abajo y 0 a la izquierda. Lo guardo, vuelvo de nuevo. No ha generado bien el archivo. Para que esto me lo aplique sobre la etiqueta figure tendré que añadirle un &. Lo vuelvo a guardar. Y aquí lo tenemos. Ya está pegado completamente y ya tengo esa imagen destacada configurada, tanto en los posts, como en el listado de posts.

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

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.