Custom_header: cómo “manipular” las cabeceras personalizadas nativas de WordPress

WordPress 3.4 trae consigo una función muy interesante para añadir a nuestro panel de administrador un selector de imagen para el header. En este artículo aprendemos a utilizarla de diferentes maneras y les presentamos dos trucos que pueden servirles en sus proyectos.

Añadiendo soporte para el custom header

Abrimos el archivo functions.php (Apariencia > Editor), y allí pegamos el siguiente código. Con estos argumentos ya funcionaría nuestra cabecera personalizada, con los valores por defecto preparados para la función.

Pero sigamos modificando, para que se adecúe a lo que necesitamos.

Altura y ancho definidos

Utilizando 'width' => 0, 'height' => 0, las dimensiones de nuestra imagen no están especificadas, es decir, podremos definir el área de recorte a nuestro antojo -partiendo de un recuadro de 0×0 pixeles-. Si necesitamos que el ancho y la altura estén definidas simplemente debemos añadir las dimensiones.

Al momento de subir la imagen en Apariencia > Cabecera veremos el mensaje:

Puedes subir una imagen de cabecera personalizada para que se vea en tu sitio web en vez de la que viene por defecto. En la siguiente pantalla podrás recortar la imagen.
Las imágenes de exactamente 980 x 180 pixels se utilizarán tal cual.

Altura y ancho flexibles

Los argumentos 'flex-height' => false, 'flex-width' => false, indican que la imagen que se mostrará en el sitio poseerá exactamente las dimensiones que se hallan especificado, en nuestro caso 980×180 pixeles. Para poder definir en el momento de recortar un ancho o altura diferente al establecido debemos cambiar de false a true.

Puedes subir una imagen de cabecera personalizada para que se vea en tu sitio web en vez de la que viene por defecto. En la siguiente pantalla podrás recortar la imagen.
El ancho sugerido es 980 pixels. La altura sugerida es de 180 pixels.

En este caso, la imagen puede ser de 980×180, pero tenemos la opción de cambiar sus dimensiones haciendo click y arrastrando las esquinas del recuadro.

Definiendo una imagen por defecto

Este argumento nos servirá para poder definir una imagen que estará por defecto en nuestro header cuando ninguna otra esté elegida.

Podemos acoplar otros argumentos a $default que definan parámetros para las imágenes que podamos subir más adelante.

La función get_template_directory_uri() devuelve la URI para el tema que estemos empleando. Es altamente recomendable que no escriban el enlace ustedes mismos (ejemplo: http://tuwordpress.com/carpeta/wp-content/themes/tema/images/header.jpg) para que su código pueda ser utilizado dentro de cualquier tema y dentro de cualquier folder -esto eliminará posibles errores 404 si reinstalaran su WordPress en otro directorio-.

Texto dentro de la imagen

Dentro de la imagen podemos mostrar el “Título del sitio” y la “Descripción corta” que escribimos en Ajustes >General. Por defecto estas dos líneas de texto se mostrarán definidas por 'header-text' => true, causando que nuestro HTML se vea así:

El style="color: rgb(255, 255, 255); se define con el argumento 'default-text-color' => ' ',. Sin ningún valor definido, debemos escribir en Apariencia > Cabecera nuestro color hexadecimal. Pero podemos definirlo directamente en esa línea:  'default-text-color' => 'FFF ', o tal vez  'default-text-color' => '73DCFF ',. ¡¡Sin numeral “#”!!

Si deseamos que la imagen no tenga ningún texto solamente debemos cambiar el código a:

Llamando al header personalizado en el tema

En nuestro archivo header.php dentro de nuestra <div id=”header”> o <header> (para aquellos que emplean HTML5) pegaremos esta línea de código:

Otras aplicaciones interesantes para este código

Como todas las funciones de WordPress, con un poco de ingenio podemos manipularlas para poder añadir a nuestro sitio funciones novedosas. Aquí les traigo dos aplicaciones basándonos en este código.

Header infinito, cabecera al 100%

Para que la imagen que elegimos de cabecera se repita infinitamente, en una width: 100% debemos hacer que esta imagen sea un fondo.

Colocaremos la URL de la imagen que subimos para custom_header en Apariencia > Cabecera en background-image con la función PHP <?php header_image();?>. Además definiremos la altura con height:<?php echo get_custom_header()->height;?>px; Importante: agregar “px” luego del código PHP.

En nuestro archivo style.css colocaremos el siguiente código:

Aquí podemos definir también otras propiedades de estilo que deseemos que el header posea.

Imagen en header cambiante, sin necesidad de plugin

Otra aplicación interesante es utilizar esta funcionalidad de WordPress como un slideshow, para quienes no desean emplear los maravillosos plugins jQuery que hay.

Primero que nada definimos que las imágenes roten aleatoriamente cada vez que alguien actualiza nuestro sitio, no podemos definir tiempo de rotación ni efectos de fade-in y fade-out (para todas estas funciones muy vistosas utilizar un slideshow de jQuery).

Luego añadiremos más argumentos como hicimos previamente, y en la div que deseemos colocar las imágenes llamaremos:

A continuación escribiremos el CSS necesario, este es meramente un ejemplo (al que le faltan los atributos de posición):

Modificado por última vez el día 12 de agosto de 2012 a las 13:10
Scroll to top