Una de las primeras cosas que tenemos de los clientes es su logo, que muchas veces los diseñadores lo utilizan para definir la personalidad y diseño de todo el sitio, dejando a parte elementos de conversión que serían tema de otra entrada.
En mi día a día trabajando con Genesis Framework la primera cosa que tengo en cuenta tras programar la configuración del tema es la opción de incorporar el logo personalizado en Genesis Framework.
Logo personalizado en Genesis Framework
A WordPress a través de sus funciones internas se le puede indicar que soporte cabeceras personalizadas, esta es la primera acción que tenemos que hacer para tener un logo personalizado en Genesis Framework. Esto se debe hacer en una función asociada a la acción after_setup_theme que se ejecuta en la carga de cada página después de inicializar el tema.
La función de CallBack asociada a esta acción debe incluir todos los elementos de configuración del tema, entre ellos las funcionalidades que va a soportar la plantilla.
WordPress tiene una función en su Core que a la que se la llama con add_theme_support y puede recibir diferentes opciones.
- post-formats
- post-thumbnails
- custom-background
- custom-header
- automatic-feed-links
- html5
- title-tag
En este caso a nosotros nos interesa el soporte para custom-header que nos habilitará la opción de personalizar la cabecera.
El segundo parámetro de la función add_theme_support es una array de opciones. WordPress por defecto para custom-header soporta los siguientes atributos que no voy a entrar a detallarlos puesto que podéis verlos en el Codex.
$defaults = array( 'default-image' => '', 'width' => 0, 'height' => 0, 'flex-height' => false, 'flex-width' => false, 'uploads' => true, 'random-default' => false, 'header-text' => true, 'default-text-color' => '', 'wp-head-callback' => '', 'admin-head-callback' => '', 'admin-preview-callback' => '', );
En Genesis Framework además a estos parámetros le podemos pasar alguno más como header-selector que dice la clase contenedora del logo, o en este caso lo que es lo mismo, el elemento cuyo fondo sea la imagen del logo.
Para subir un logo personalizado tendremos que indicar la altura y la anchura con los parámetros height y width así como indicar que no queremos que no se muestre texto con header-text asociándolo a un valor false.
add_theme_support( 'custom-header', array( 'header-selector' => '.site-title a', 'header-text' => true, 'height' => 80, 'width' => 320, ) );
Con el código anterior vamos a subir un logo personalizado que mida 320 x 80 pixeles. Si la imagen que subimos mide más podremos recortarla en el mismo lugar que seleccionamos la imagen.
Hay que tener en cuenta que para que se vea correctamente tenemos que modificar en la hoja de estilos el selector .header-image .site-title > a para que sin min-height y si width coincidan con lo indicado en los parámetros de add_theme_support.
Dentro de Genesis Framework nos podemos encontrar con la función que gestiona toda la parte de cabeceras personalizadas en el archivo lib/structure/header.php.
/**
* Custom header callback.
*
* It outputs special CSS to the document head, modifying the look of the header based on user input.
*
* @since 1.6.0
*
* @uses genesis_html() Check for HTML5 support.
*
* @return null Return null on if custom header not supported, user specified own callback, or no options set.
*/
function genesis_custom_header_style() {
//* Do nothing if custom header not supported
if ( ! current_theme_supports( 'custom-header' ) )
return;
//* Do nothing if user specifies their own callback
if ( get_theme_support( 'custom-header', 'wp-head-callback' ) )
return;
$output = '';
$header_image = get_header_image();
$text_color = get_header_textcolor();
//* If no options set, don't waste the output. Do nothing.
if ( empty( $header_image ) && ! display_header_text() && $text_color === get_theme_support( 'custom-header', 'default-text-color' ) )
return;
$header_selector = get_theme_support( 'custom-header', 'header-selector' );
$title_selector = genesis_html5() ? '.custom-header .site-title' : '.custom-header #title';
$desc_selector = genesis_html5() ? '.custom-header .site-description' : '.custom-header #description';
//* Header selector fallback
if ( ! $header_selector )
$header_selector = genesis_html5() ? '.custom-header .site-header' : '.custom-header #header';
//* Header image CSS, if exists
if ( $header_image )
$output .= sprintf( '%s { background: url(%s) no-repeat !important; }', $header_selector, esc_url( $header_image ) );
//* Header text color CSS, if showing text
if ( display_header_text() && $text_color !== get_theme_support( 'custom-header', 'default-text-color' ) )
$output .= sprintf( '%2$s a, %2$s a:hover, %3$s { color: #%1$s !important; }', esc_html( $text_color ), esc_html( $title_selector ), esc_html( $desc_selector ) );
if ( $output )
printf( '<style type="text/css">%s</style>' . "\n", $output );
}
Y ya está! Con esto podemos entrar en el Customizer y seleccionar la imagen de cabecera. Recordad que debe medir lo indicado en los parámetros o se nos pedirá que la recortemos.
