Ya has estado un tiempo madurando y tienes aprendidas las claves para elegir tema para WordPress, y espero que te hayas decidido como yo por Genesis y un Child Theme.
Y llega el momento de personalizarlo.
Y lo normal es que empieces por tu logo, y muchos Child Theme Genesis ya tienen la opción de encabezado personalizado (“custom header”), si recuerdas de cuando te enseñe a elegir un tema Genesis para tu blog o web.
Y quieres añadir un logo responsivo a Génesis, que al fin y al cabo ya sabes que la mayoría de tus visitas vienen de móviles.
Pero puedes encontrarte con varios problemas:
- El tamaño del “custom header” no se adapta a las dimensiones del logo que quieres tener.
- O si se adapta, acabas dándote cuenta que no es del todo responsivo, es decir adaptado a smartphones.
- Tu Child Theme no tiene la opción de “Header”, y tienes que añadir el logo a mano, y deseas que este se adapte completamente a todos los dispositivos.
Todos estos problemas se suelen dar con logos como el mío superiores a 270px de ancho (el mío mide 469px de ancho por 90px de alto).
Todos estos problemas tienen solución y yo te las voy a contar.
Y puedes ver si tu logo es responsivo viendo tu web en tu móvil, o probando en esta página: http://www.studiopress.com/responsive/
Y recuerda siempre que antes de tocar en ficheros deberías tener una copia de seguridad de tu WordPress.
¿Empezamos?
Paso #1: añadir un logo responsivo a Genesis con “Custom Header”
Si el tema que estas usando o has adquirido es de los que tienen “Custom Header”, y el tamaño de este sirve o se adapta para tu logo, estas de suerte.
Lo tienes tan sencillo como ir a Apariencia/Cabecera (si tienes Genesis traducido al español) y subir allí tú logo.
Si no se adapta del todo al tamaño que te pide te saldrá una opción para recortarlo.
Este tamaño suele estar pensado para además, ser responsivo, y que se adapte a los diferentes dispositivos.
Si con esto ya tienes tu logo subido, ¡enhorabuena!.
Y además te ahorras 5 minutos de seguir leyéndome.
Pero si quieres aprender más, continua conmigo. Lo que viene te puede interesar y el saber no ocupa lugar.
Paso #2. Cuando el tamaño de “Custom Header” no es el que necesito.
Te puede pasar que por ejemplo, la opción cabecera te pida un tamaño de logo de 250x100px, ¿pero qué ocurre si por ejemplo el tuyo se ve ideal al tamaño 450x100px?
Cuando quieres subirlo con la opción anterior, te obliga a recortarlo, y te lo “desmonta”.
Pero puedes cambiar el tamaño que te pide.
Para ello ve a Apariencia/Editor y Elige para editar tu Child Theme, y dentro de este el Theme Functions (functions.php)
Localiza este código:
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 250,
‘height’ => 100,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false
) );
Y cambia los valores “width” y “height” por el ancho y alto respectivamente de tu logo.
Actualiza los cambios y ya podrás subir el logo del tamaño que a ti te gusta usando lo descrito en el paso 1.
Pero deberías seguir leyendo….
Paso #3. Tu Child Theme no tiene para personalizar la cabecera.
En este caso el logo se añade por CSS. No te preocupes que es prácticamente igual de sencillo.
Dirigete a Genesis/Opciones del Tema y busca las opciones del Header:
Elige la opción Logo en Imagen.
Sube tu logo por FTP o bien desde la opción de Medios (recomendado), y copia su URL completa.
Ahora ve a Apariencia/Editor para modificar el Style.css de tu Child Theme.
Busca la sección de código que corresponda a “.header-image .site-title”.
.header-image .site-title .wrap {
background: url(images/logo.png) no-repeat left;
}
Y reemplaza la url de la imagen por la que has copiado desde el gestor de medios al subir tu logo.
Si quieres ajustar el ancho y alto de tu logo, puedes hacerlo usando este código, como hago yo:
.header-image .site-title .wrap {
background: url(https://hormigasenlanube.com/wp-content/uploads/2014/04/logo.png) no-repeat left;
width: 469px;
height: 90px;
}
Recuerda cambiar el ancho y alto por los tuyos.
Igualmente esto aplica para los temas HTML5. Si tu tema es más antiguo, puede ser que tengas que buscar la clase “#header”, o es más común buscar “url(images/logo.png)”, ya que StudioPress lo codifica siempre así, y si varia de lo que yo te pongo te vale igual.
En todo caso ayuda usar Firebug para Firefox o Chrome para inspeccionar el logo, y ver que clases CSS se aplican.
Paso #4. Personalizar tu logo en un Child Theme Genesis para que sea 100% responsivo.
En título de este post destacaba el hecho de que el logo fuera responsivo completamente.
Si tienes para personalizar la cabecera, y no has necesitado tocar los valores, no tendrás prácticamente problemas, ya que el diseño de los Child Themes está muy bien pensado.
Pero si has tenido que personalizar el tamaño, algo muy, pero que muy habitual, o bien no tienes esta opción, y lo has puesto a mano, y quieres que tu logo se adapte completamente, te cuento como hacerlo, y como ejemplo práctico como lo tengo yo.
Caso 1. Tienes Custom Header pero no se adapta los valores.
Mi consejo si quieres un logo 100% responsivo es que lo hagas como yo.
¿Hiciste las copias de seguridad? ¡Empezamos!
Desactivar el “custom header”
Ve a Apariencia/Editor y Elige para editar tu Child Theme, y dentro de este el Theme Functions (functions.php)
Localiza este código:
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 250,
‘height’ => 100,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false
) );
Y déjalo comentado:
/* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 250,
‘height’ => 100,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false
) );
*/
Observa que lo que he hecho es poner /* al principio y */ al final del código que quiero comentar. Además fijate en el valor de ‘header-selector’. En mi caso es «.site-title a»
Otra opción es eliminarlo completamente. Yo prefiero comentar por si quiero volver atrás.
Indicar que logo usar según la pantalla
Sube los logos de diferentes tamaños que necesites.
Yo he subido tres usando la opción de Medios.
- Mi logo normal con un ancho de 469px. Lo nombre logo.png.
- Mi logo para pantallas de 480px con un ancho de 414px. Con nombre logo-screen480.png.
- Mi logo para pantallas de menos de 320px con un ancho de 260px. Con nombre logo-screen320.png.
Y he usado este código CSS:
/*LOGO RESPONSIVO
———————————————————-*/
/* El tema Metro Pro usa .site-title a para el logo normal, no .header-image .site-title como otros. ¿Recuerdas el ‘header-selector?*/
.site-title a {
background-image: url(«https://hormigasenlanube.com/wp-content/uploads/2014/04/logo.png») !important;
}
/* Aquí le indico que logo usar para pantallas de máximo 480px de ancho de resolución.*/
@media only screen and (max-width: 480px) {
.header-image .site-title a {
background: url(«https://hormigasenlanube.com/wp-content/uploads/2014/05/logo-screen480.png») no-repeat !important;
float: left;
}
}
/* Aquí le indico que logo usar para pantallas de máximo 320px de ancho de resolución.*/
@media only screen and (max-width: 320px) {
.header-image .site-title a {
background: url(«https://hormigasenlanube.com/wp-content/uploads/2014/05/logo-screen320.png») no-repeat !important;
float: left;
}
}
Como ves he tenido que localizar la clase que aplicaba a mi logo normal. Además tuve que añadir “float:left” para que el logo se fuera a la izquierda y se vea bien.
Para estos temas te repito, ayuda mucho jugar con Firebug.
Caso 2. No tienes Custom Header, y lo has añadido a mano.
Si tu tema no tenía para personalizar el logo, y lo has añadido siguiendo las instrucciones del paso #3, te faltaría añadir una par de detalles para que tu logo sea 100% responsivo.
- Sube los logos adicionales con los tamaños adaptados.
- Edita tu CSS.
Una vez subidos los logos, el css que tienes que usar es el siguiente:
/* Aquí le indico que logo usar para pantallas de máximo 480px de ancho de resolución.*/
@media only screen and (max-width: 480px) {
.header-image .site-title a {
background: url(«https://hormigasenlanube.com/wp-content/uploads/2014/05/logo-screen480.png») no-repeat !important;
float: left;
}
}
/* Aquí le indico que logo usar para pantallas de máximo 320px de ancho de resolución.*/
@media only screen and (max-width: 320px) {
.header-image .site-title a {
background: url(«https://hormigasenlanube.com/wp-content/uploads/2014/05/logo-screen320.png») no-repeat !important;
float: left;
}
}
Como ves al igual que antes, lo único que hacemos es indicarle que logo usar según qué tamaño de pantalla detecta.
¿Tu logo aun no se adapta a todas las pantallas?
Los comentarios están cerrados.