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 un logo fijo al tema de WordPress

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
También es habitual utilizar imágenes fijas en temas para conseguir todo tipo de efectos o, simplemente, por cuestiones de diseño. Este ejemplo va a servir para explicar cómo añadir archivos propios del tema, recuperando su URL.

Transcripción

Supongamos que ahora sobre mi tema quiero añadir un pequeño logotipo colocado en la parte de la izquierda. No es problema tampoco. De hecho, en realidad, yo puedo hacer, incluso, que ese logotipo se seleccione desde el personalizador y que me lo pinte dentro de él. Esto se haría utilizando PHP, pero en este momento en lo que estoy interesado es en explicar cómo podemos además, también, añadir imágenes propias dentro de nuestro tema. Imágenes que no sean configurables, que vayan dentro de él. Para hacer esto, tenemos una forma simple de hacerlo, que es utilizar este header.php. Dentro de él yo tengo una estructura clara sobre la que puedo trabajar en concreto. Dentro del header content, puedo añadir un nuevo div y, en ese div, añadir una imagen. Para poder formatearlo, bueno, pues puedo añadirle la clase o un identificador, me valdría lo mismo. Por ejemplo, header logo... Y aquí, en esta imagen, y es donde está el truco, voy a añadir de dónde voy a sacar esa imagen. Esta imagen la voy a almacenar dentro de la carpeta raw. Voy a pegar esa imagen y lo voy a guardar. Eso por un lado, eso es un pequeño logotipo. Pero claro, yo para recuperar toda la ruta del sitio hasta wp-content themes mitema images no lo voy a tener fácil, quiero decir, yo no puedo poner esa ruta relativa, no puedo escribirlo sin más. Debería de poder utilizar alguna función que me sirva para recuperar esa ruta de forma dinámica. Si cambio de nombre el tema, por ejemplo, me la seguiría encontrando. Para trabajar con esa ruta, vamos a tener una función de php. Así que voy a añadir una etiqueta php. Y dentro de esta etiqueta PHP, voy a pedir que me pinte, en concreto, el template directory url, o sea, get_template_directory_uri. Eso me va a devolver la URL del template y, luego, a partir de ahí, tendré que añadirle yo, además, ya dentro del HTML la ruta de donde tiene que sacar esa imagen, que va a ser de images/. Hemos configurado Gulp para que genere las imágenes automáticamente, así que tendré que... ...usar la carpeta bin, que es de donde quiero que me cargue esa imagen y, por último, utilizaré logo.png. Voy a guardarlo. Veo que me avisa de que efectivamente el Imagemin me ha generado algo, entonces siempre puedo comprobarlo. Aquí tengo la carpeta bin con la ruta que acabo de crear. Bien, pues todo esto lo guardo, abro el navegador, voy a recargar, porque he hecho cambios sobre el template. Y aquí, efectivamente, me está cargando una imagen. Aunque no me la está encontrando, voy a volver atrás... Bien, me falta una "a". Lo guardaré. Tendré que volver a recargar la página. Y aquí tengo esa imagen. Ahora quiero hacer modificaciones sobre esta imagen. Quiero, bueno, pues también añadirle estilos. Esto ya va a ser algo trivial completamente. Me iré dentro del header. Aquí dentro... ...puedo aplicar la clase header logo, que es la que había aplicado sobre el contenedor. Dentro de él le voy a decir que tiene que ser flex también. Le voy a pedir que tenga una alineación hacia abajo, que tenga un poquito de margen, que tenga una línea blanca de borde y, luego, dentro de la imagen; y, entonces, con eso voy a conseguir aplicar sobre la imagen del header logo, le voy a decir que tenga solamente 140 píxeles de ancho. Bien, pues aquí tendría ya este elemento configurado. Si quiero aplicarle alguna pequeña mejora... ...bueno, pues puedo, por ejemplo, ponerle un poco más de ancho al sidebranding. Para que me cuadre correctamente, pues puedo buscar el ancho, para ver qué ancho me podría quedar bien. 300 píxeles son perfectos para mí. Bueno, pues vuelvo otra vez atrás. Tengo que tener en cuenta también que esta es una solución temporal, tengo que plantearme la posibilidad de que este texto sea más grande, entonces, sobre eso, pues también tendría que utilizar un... ...line-height, un poco más bajo para que no quede el texto tan separado en esas dos líneas. Pero claro, esto en realidad debería de aplicarlo solamente a la etiqueta concreta, quiero decir, si yo ahora esto lo pongo, pues, bueno, me voy a encontrar con que me lo está aplicando tanto en el encabezamiento como en el texto que tengo debajo. No hay problema. Le digo que solo se lo aplique al h1. Y ya tengo ese encabezamiento bien organizado.

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.