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

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

Imagen opcional en el header con customizer

¡Prueba gratis durante 10 días

nuestros 1292 cursos !

Prueba gratis Mostrar modalidades de suscripción
Desde el personalizador tenemos la posibilidad de asociar una imagen característica al sitio. Vamos a ver cómo podemos asociar esa imagen, qué código tenemos que añadir en el tema para activarlo y cómo podemos formatear dicha imagen.

Transcripción

Quiero hacer ahora que en la parte superior de la página se pueda añadir una imagen. En realidad, lo que quiero, es que si estoy utilizando el tema y estoy administrándolo, pueda usar la opción del personalizador Imagen de cabecera; que añadiendo aquí una imagen, automáticamente me aparezca la imagen en mi sitio. Bueno, para hacer esto, voy a tener que pasar por varias fases. Por un lado, voy a necesitar añadir algo en el header. En realidad, lo que quiero es añadirlo justo encima de esta etiqueta header-content, pero dentro del header. En segundo lugar, lo que tengo que saber es cómo sacar esa imagen, y esto lo voy hacer desde custom-header. Dentro de la plantilla custom-header, aquí, tenemos información sobre cómo podemos añadir nuevas imágenes a ese custom-header. Aquí tenemos un default-image y, dentro de él, tenemos definido un ancho y un alto para esas imágenes. En la parte superior, además de eso, también tenemos información sobre cómo podemos añadir aquí una imagen a ese custom-header, o sea, al header y, en concreto, es utilizando esta función. Entonces, voy a copiar esta función, me voy a ir a header.php y voy a pegar esa función ahí. Esto me va a devolver la imagen que se haya configurado desde el personalizador. Puedo hacer más cosas tambíen. Por ejemplo, para mi es un poco pequeño este ancho para la imagen, así que voy a cambiárselo por 2000. Esto va a hacer que luego en la configuración del personalizador me permita añadir un tamaño de imagen más grande, o sea, me genere una imagen más grande. Ahora veremos cómo. Y también voy a cambiar el alto por 650. Bien, pues modificando estos parámetros, voy a guardar este contenido y ahora voy a volver a mi sitio. Pulso en Personalizar, Imagen de cabecera, Añadir nueva imagen Seleccionar archivos. Voy a buscar dónde tengo guardado ese archivo en concreto. Selecciono esta imagen. Voy a pulsar en Seleccionar y recortar, pero de entrada vemos que los parámetros que he cambiado, ese 2000, aquí ya me admite utilizar ese 2000. Pulso en Seleccionar, voy a recortar esa imagen un poco. Recortar imagen. y aquí me está añadiendo ya esa imagen. Voy a Guardar y publicar. Cierro, y aquí tenemos ese encabezamiento. Sobre esta imagen también quiero hacer varias modificaciones. Voy a volverme un poco a los estilos y vemos en qué consiste lo que tengo. Por un lado, dentro del header había definido que este header-content no iba a tener margen más que por la parte de arriba, así que por eso tengo este espacio desde la fotografía hasta donde realmente tengo este elemento. Por otro lado, el color de fondo lo tengo definido dentro del header, por eso tengo este color de fondo que va pegado a la imagen, porque realmente debajo de la imagen está también ese color de fondo. Ahora lo que quiero es hacer modificaciones en el estilo de esa imagen para formatearla un poco. Esta imagen debería estirarse y encogerse pero siempre dentro de unos margenes. Aquí lo voy a hacer. Por ejemplo, cuando es un poco grande realmente casi me quedo sin pantalla para mostrar toda esa imagen. Para modificar eso, para elegir qué tanto por ciento quiero utilizar, tendré que buscar alguna forma de conseguir que esa imagen tenga un contenedor que me permita recortarla. No hay ningún problema, porque desde el momento en que trabajo con plantillas, puedo añadir aquí un gif, por ejemplo, o puedo añadir, también, por ejemplo, si quiero utilizar HTML5, la etiqueta figure, que además así le estoy dando información semántica a esta página. A partir de ahora, va a aparecer dentro de ese figure. Y, por otro lado, podré desde el header, añadir estilos para esta etiqueta figure. En este caso, voy a definir que tenga un máximo de alto del 45 % de la ventana, sin margen, y que me recorte todo lo que sobre. Y, por otro lado, le voy a pedir a la imagen que está metida dentro, que tenga un ancho del 100 %. En realidad, esta imagen sería preferible si en vez de ponerla ahí, la pongo dentro. Bien, guardo. Voy a recargar de todas formas porque he hecho cambios en las plantillas, y aquí vemos como esto ya funciona mejor, se estira y se encoge hasta un alto máximo a partir del cual ya no se agranda más.

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.