Si has leido el post crea un logo on line de forma sencilla, el siguiente paso puede ser este:crea una responsive header image con tu logo (cabecera responsive).
Estos son los pasos:
Paso 1. Sube la imagen que has creado en la carpeta de imágenes de tu tema WP. En mi caso lo he hecho con FileBrowser. La ruta sería: Escritorio-Filebrowser-WPContent-Themes-«tu tema»-Images. Cuando llegues aqui dale a añadir. Escoge archivo en lugar de carpeta. Le das a examinar, lo buscas y lo añades. Es importante que recuerdes el nombre que le has daso al archivo porque ahora tendrás que utilizarlo.
Paso 2. Dado que vamos a insertar una imagen que ocupe toda la cabecera no vamos a hacer uso de una parte de código en el archivo functions.php . No vamos a quitar ese código (remove) sino unicamente «comment it out» o dejarlo sin efecto. Para ello dentro de archivo functions.php (Ruta:Filebrower-WPContent-Themes-busca tu tema-functions.php- en lugar de abrir el archivo dale a «Edit») buscaremos la referencia al header, que en mi tema aparece de la siguiente forma:
add_theme_support( 'genesis-custom-header', array(
'width' => 1140,
'height' => 100
) );
Y que dejariamos de esta forma:
add_theme_support( 'genesis-custom-header', array(
'width' => 1140,
'height' => 100
) );
Dale a guardar.
Paso 3. En el escritorio WP te vas a Genesis-Theme Settings- Header y abre el desplegable. Selecciona Image-Logo. Dale a guardar.
Paso 4. Genesis incluye apply_filters en la función genesis_seo_site_title, así que añadiendo el código que vamos a ver ahora al archivo functions.php se incluirá la imagen «logo» en la cabecera. Este es el código que hay que incluir al final del archivo functions.php:
/**
* Filter the genesis_seo_site_title function to use an image for the logo instead of a
background image
*
* The genesis_seo_site_title function is located in genesis/lib/structure/header.php
* @link http://blackhillswebworks.com/?p=4144
*
*/
add_filter( ‘genesis_seo_title’, ‘bhww_filter_genesis_seo_site_title’, 10, 2 );
function bhww_filter_genesis_seo_site_title( $title, $inside ){
$child_inside = sprintf( ‘<a href=»%s» title=»%s»><img src=»‘.
get_stylesheet_directory_uri() .’/images/logo.png» title=»%s» alt=»%s»/></a>’,
trailingslashit( home_url() ), esc_attr( get_bloginfo( ‘name’ ) ),
esc_attr( get_bloginfo( ‘name’ ) ), esc_attr( get_bloginfo( ‘name’ ) ) );
$title = str_replace( $inside, $child_inside, $title );
return $title;
} // End bhww_filter_genesis_seo_site_title
El anterior código está llamando a la imagen logo.png si le has puesto otro nombre no va a aparecer. El archivo que yo he subido es un .png pero puede ser también un .jpg. Si has subido un .jpg en el código anterior donde ponga logo.png pon logo.jpg
Cada tema tiene un width y un height para su cabecera o header. En el que yo estoy trabajando es de 1140 y 100 respectivamente, ya que el header del Minimum Theme tiene este tamaño. Lo idoneo es que la imagen que subáis tenga estos valores. Si habéis comprado un logo, y lo habéis editado o encargado que os lo editen para poner vuetro nombre o el de vuestro proyecto, la imagen final podéis escalarla a este tamaño 1140×100. Podéis hacerlo facilmente con un programa gratuito que se llama GIMP 2. Esto lo explicaré otro día.
Paso 5. Ahora toca ir al editor CSS de tu tema, busca la sección header y modificar alguna línea ( date cuenta que al igual que antes, no vamos a eliminar nada de código. De cualquier forma te recomiendo que antes de modificar nada hagas una copia del archivo para que lo puedas restaurar tal cual ,si en tu tema no funcionan los cambios y dejarlo como estaba antes de la modificación. Es tan fácil como hacer esto: antes de tocar nada, seleccionar todo el código del archivo, le das a copiar y llevátelo a un archivo word o txt con el bloc de notas y guardarlo en una carpeta que tengas para tu tema en tu pc). Puntualizado esto, seguimos. Desde WP Escritorio- Apariencia- Editor- Hoja de Stilo (Style.css) busca en el texto el apartado Header este trozo de código e incluye lo que aparece en rojo:
#header {
background-position: top center!important;
margin: 0 auto;
/*min-height: 60px;*/
overflow: hidden;
width: 1140px;
}
Paso 6. De nuevo vamos al editor CSS del tema hijo y justo debao del apartado destinado al #header viene el /* Image Header – Partial Width. Aqui al igual que antes vamos a hacer comment it out en una parte del código. Con el punto 5 y el 6 lo que conseguimos es que la imagen del header se adapte a cualquier dispositivo que vea nuestra web (responsive). Aqui viene el código y en rojo lo que tenéis que añadir.
.header-image #title-area,
.header-image #title,
.header-image #title a {
/*display: block;*/
float: left;
/*height: 100px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 400px;*/
}
Esta entrada está basada en una de
blackhillswebworks. Su entrada está referida a un Tema de Genesis llamado Apparition. En el caso del código css de los pasos 5 y 6 el código corresponde al Minimum Theme que es el que yo utilizo. De cualquier forma si trabajas con Genesis y un tema hijo diferente puede servirte. Lo importante es que dejes sin efecto (comment it out) el text-indent, min-height y height.
En mi caso el logo carga bien en todos los dispositivos. Para comprobar esto, una vez hayas cubierto todos los pasos, puedes ir a esta
web . Aqui puedes ver como se adapta mi web a la mayoría de dispositivos ( diferentes tablets y smartphones). Arriba a la izquierda introduce tu url para ver como carga tu web en prácticamente todo tipo de dispositivos.
Si tienes alguna consulta puedes ponerte con contacto conmigo
aqui o bien dejar un comentario.
¡¡ Y si te ha parecido útil esta entrada por favor compártela en redes sociales!!. Gracias
Relacionado
0 comentarios