Blog

Muchas veces he utilizado como tema base para crear un template para WordPress, el tema twentyeleven, que viene por defecto en la instalación de la última versión.

Siempre había querido hacer un slider con las imágenes que se muestran en la cabecera y que son configurables desde Apariencia / Cabecera. El caso es que el otro día tuve que hacerlo para un cliente y, antes de ponerme a hacerlo desde cero, busqué un poco por si alguien lo había hecho ya, no es cuestión de ir reinventando la rueda porque sí.

El caso es que encontré un plugin que añade una opción más a la ventana de configuración de la cabecera para que esta se muestre como un slider, utilizando para ello el plugin para jQuery Nivo Slider (qué casualidad, porque yo iba a poner ese).

El caso es que después de instalar el plugin y de realizar un par de ajustes ya me aparecían las imágenes de la cabecera pasando de una a otra.

Ahora solo me hacía falta configurar mis imágenes para que salieran estas en lugar de las que vienen por defecto en twentyeleven.

Abrimos el archivo functions.php y al final del todo lo que haremos será:

1. Deshabilitar las imágenes de la cabecera que vienen por defecto y…
2. Habilitar nuestras imágenes habiendo subido previamente las nuevas al servidor via ftp

Para esto lo que habrá que hacer, como ya he dicho, es escribir el siguiente código al final de functions.php:

// BORRAR IMAGENES POR DEFECTO CABECERA TWENTY ELEVEN
function mitema_borrar_imagenes_header() {
    unregister_default_headers( array('wheel','shore','trolley','pine-cone','chessboard','lanterns','willow','hanoi')
    );
}
add_action( 'after_setup_theme', 'mitema_borrar_imagenes_header', 11 );

//NUEVAS IMAGENES PARA LA CABECERA
function mitema_nuevas_imagenes_header() {
    $dir = get_bloginfo('stylesheet_directory');
    register_default_headers( array (
        'image1' => array (
            'url' => "$dir/images/headers/imagen_01.jpg", //1000px x 288px
            'thumbnail_url' => "$dir/images/headers/imagen_01_thumb.jpg", // 230 x 66px
            'description' => __( 'Descripcion imagen', 'dominio' )
        ),
        'image2' => array (
            'url' => "$dir/images/headers/imagen_02.jpg", //1000px x 288px
            'thumbnail_url' => "$dir/images/headers/imagen_02_thumb.jpg", // 230 x 66px
            'description' => __( 'Descripcion imagen', 'dominio' )
        ),
        'image3' => array (
            'url' => "$dir/images/headers/imagen_03.jpg", //1000px x 288px
            'thumbnail_url' => "$dir/images/headers/imagen_03_thumb.jpg", // 230 x 66px
            'description' => __( 'Descripcion imagen', 'dominio' )
        ),         
        'image4' => array (
            'url' => "$dir/images/headers/imagen_04.jpg", //1000px x 288px
            'thumbnail_url' => "$dir/images/headers/imagen_04_thumb.jpg", // 230 x 66px
            'description' => __( 'Descripcion imagen', 'dominio' )
        ),         
        'image5' => array (
            'url' => "$dir/images/headers/imagen_05.jpg", //1000px x 288px
            'thumbnail_url' => "$dir/images/headers/imagen_05_thumb.jpg", // 230 x 66px
            'description' => __( 'Descripcion imagen', 'dominio' )
        )         
    ));
}
add_action( 'after_setup_theme', 'mitema_nuevas_imagenes_header' );

Con esto lo que hacemos es borrar las antiguas imágenes y poner cinco nuevas.

Mucha gente utiliza los child themes, o temas basados en otros, para crear modificaciones de estos. Yo no lo hago pero más que nada porque no me he puesto nunca. Simplemente me gusta enredarme con el código y crear un nuevo tema a partir del original, aunque igual lo de hacer un child theme sea mejor opción.

Espero que le sirva a alguien

Act: Suelo dejar para el final el tema de hacerlo todo compatible a versiones antiguas de IE. En este caso IE7 no carga las imágenes. Por lo visto el utilizar la opción auto insert del plugin no le gusta mucho al dichoso IE y no carga bien. La solución es cambiar el código de carga de las imágenes directamente en el archivo header.php. Donde pone esto:

<?php // Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php // The header image
 // Check if this is a post or page, if it has a thumbnail, and if it's a big one
 if ( is_singular() &&
 has_post_thumbnail( $post->ID ) &&
 ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
 $image[1] >= HEADER_IMAGE_WIDTH ) :
 // Houston, we have a new header image!
 echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
 else : ?>
 <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
 <?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image ?>

Por esta línea:

<?php boom_header_image(); ?>

Con esto ya cargará bien las imágenes en IE7 y nos podremos olvidar del tema…

+ info: http://wordpress.org/extend/plugins/header-image-slider/
http://wpti.ps/functions/replace-remove-header-image-twenty-eleven-theme/