Crear un encabezado receptivo en WordPress 3.4

Entre todas las nuevas características y mejoras que ha introducido el reciente lanzamiento de WordPress 3.4, hay una gema oculta. La característica de Cabecera personalizada ha sido soportada por WordPress por algún tiempo, sin embargo anteriormente sus dimensiones fijas lo hacían demasiado inmóvil para ser de mucha utilidad en la era del diseño receptivo.

El nuevo lanzamiento lo hace flexible e introduce un código más fácil y limpio para esta popular opción. Como desarrolladores de temas ahora podemos ir más allá, teniendo en cuenta la necesidad de optimizar para los visitantes móviles.

Anteriormente, las dimensiones de una imagen de encabezado estaban predefinidas y administradas con el HEADER_IMAGE_HEIGHT y HEADER_IMAGE_WIDTH las constantes y el archivo cargado se recortaron para ajustarse a estas restricciones. Pero desde la versión 3.4, la imagen del encabezado personalizado admite anchuras y alturas flexibles y nos libera de estas feas constantes. Suena intrigante, ¿no? Veamos cómo se puede hacer.

Lo que vamos a lograr

En primer lugar, debemos decidir cuál de las técnicas de imagen receptivas disponibles (y ampliamente discutidas) nos conviene. Nos podemos permitir cualquier marca personalizada para esta imagen, teniendo en cuenta su importancia para la marca del sitio y, al mismo tiempo, su independencia de la estructura o el marcado de una publicación. Desde este punto de vista, la técnica "noscript" parece realmente prometedora. Para resumir la técnica, funciona de la siguiente manera:

Especificamos referencias de imagen alternativas para los puntos de corte elegidos como atributos de datos de un

Debe ir acompañado de un estilo de CSS apropiado y un script que ponga jQuery Picture en funcionamiento. Aparte de eso, nos gustaría tener un conjunto de imágenes de encabezado predefinidas para elegir (de la misma manera que lo tenemos en el tema Twenty Eleven). Además, nos gustaría dar al usuario la posibilidad de cargar su propia imagen en el panel de administración. Suponiendo que se cargue una versión de tamaño completo de la imagen, crearemos los tamaños intermedios necesarios con el soporte de miniaturas integrado de WordPress combinado con tamaños flexibles de encabezado. Nuestro encabezado personalizado debería tener el siguiente aspecto:

Suficiente charla, vamos a sumergirnos en el código.

Paso 1: registra un encabezado personalizado con tu tema

$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';$args = array('default-image'          => $default_url,'random-default'         => false,'width'                  => 1000,'height'                 => 300,'flex-height'            => true,'flex-width'             => true,'header-text'            => false,'default-text-color'     => '','uploads'                => true,'wp-head-callback'       => 'frl_header_image_style','admin-head-callback'    => 'frl_admin_header_image_style','admin-preview-callback' => 'frl_admin_header_image_markup',);add_theme_support('custom-header', $args);

Este es un nuevo código de registro introducido en WordPress 3.4. Puede ver el conjunto completo de parámetros para ello en Códice , pero para nuestra tarea, los siguientes son los más importantes:

• default-image - url al tamaño completo de la imagen predeterminada en la carpeta del tema
• width , height - valores máximos admitidos por nuestro tema
• flex-height , flex-width - establecer como "verdadero" estos parámetros permite que la imagen tenga tamaños flexibles
• header-text - No vamos a mostrar texto sobre la imagen en nuestro tema
• uploads - habilitar cargas en admin
• wp-head-callback - función para llamar en la sección de cabecera del tema
• admin-head-callback - función que se llamará en la sección de la cabeza de página de vista previa
• admin-preview-callback - función para producir marcas de vista previa en la pantalla de administración

Si ha utilizado una imagen de encabezado personalizado en su tema antes y se pregunta cómo se comparan las técnicas, aquí hay una lista de equivalentes entre las constantes antiguas y los nuevos parámetros (las claves de la matriz):

HEADER_IMAGE        -> 'default-image'HEADER_IMAGE_WIDTH  -> 'width'HEADER_IMAGE_HEIGHT -> 'height'NO_HEADER_TEXT      -> 'header-text'HEADER_TEXTCOLOR    -> 'default-text-color'

Paso 2: registrar imágenes predeterminadas para elegir

En nuestro ejemplo, proporcionaremos dos imágenes predefinidas como opciones para el encabezado y cada una de ellas debe tener tres variantes: -large.jpg , -medium.jpg y -thumb.jpg para el rango correspondiente de anchos de ventana. El tamaño más pequeño también se usará como una miniatura en la interfaz de administración.

register_default_headers(array('city' => array('url' => '%s/_inc/img/city-large.jpg','thumbnail_url' => '%s/_inc/img/city-thumb.jpg','description' => 'City'),'forest' => array('url' => '%s/_inc/img/forest-large.jpg','thumbnail_url' => '%s/_inc/img/forest-thumb.jpg','description' => 'Forest')));

El código es bastante autoexplicativo, el único detalle que requiere atención es una url correcta para las imágenes: -large.jpg para tamaño completo y -thumb.jpg para la miniatura ( %s - es un marcador de posición para la carpeta del tema activo que será reemplazado automáticamente por WordPress).

Paso 3: registrar tamaños de imagen adicionales

add_image_size('header_medium', 600, 900, false);add_image_size('header_minimal', 430, 900, false);

Al registrar estos tamaños adicionales con nuestro tema, se le indicará a WordPress que cree una variante para cada uno de ellos al cargar una imagen para el encabezado personalizado. La variante apropiada se puede obtener más adelante utilizando el nombre. El truco consiste en especificar un valor de altura bastante grande, al hacerlo se fuerza el cambio de tamaño de la imagen por ancho y se deja que su altura se derive de la relación de aspecto.

Paso 4: marcado para el front-end

function frl_header_image_markup(){/* get full-size image */$custom_header = get_custom_header();$large = esc_url($custom_header->url);$mininal = $medium = '';/* get smaller sizes of image */if(isset($custom_header->attachment_id)){ //uploaded image$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);if(isset($medium_src[0]))$medium = esc_url($medium_src[0]);$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);if(isset($minimal_src[0]))$mininal = esc_url($minimal_src[0]);}else{ //default image$medium = esc_url(str_replace('-large', '-small', $custom_header->url));$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));}/* fallback for some unexpected errors */if(empty($medium))$medium = $large;if(empty($mininal))$mininal = $large;?>

Nuevamente, todo es sencillo. Con el frl_header_image_markup función creamos el marcado necesario para que nuestra técnica receptiva funcione. La parte más interesante aquí es obtener URLs de imágenes para estados grandes, medianos y pequeños. La función de WordPress 3.4 get_custom_header devuelve un objeto de encabezado personalizado que contiene todos los datos necesarios. Si $custom_header tiene un conjunto adecuado attachment_id propiedad, estamos tratando con una imagen cargada y deberíamos obtener tamaños intermedios usando wp_get_attachment_image_src . Si no existe tal propiedad, estamos tratando con una de nuestras imágenes predeterminadas para que podamos obtener tamaños intermedios basados ​​en nuestra propia convención de nombres.

Con frl_header_image_style Inyectamos el CSS y el JavaScript que hacen que nuestra imagen responda. Esta función se llamará automáticamente porque la hemos especificado como un parámetro de registro de encabezado personalizado. Pero el _markup función debe llamarse directamente en el tema, obviamente, en algún lugar dentro del header.php

Después de este paso, ya hemos tenido nuestra primera imagen de cabecera predeterminada mostrada de manera receptiva.

Paso 5: marcado para la vista previa del administrador

En Apariencia -> menú Encabezado , ahora tenemos una pantalla que nos permite cambiar la imagen del encabezado personalizado eligiendo una de las opciones predefinidas o cargando una nueva imagen. Vamos a tener el encabezado simple.

function frl_admin_header_image_markup() {$image = get_header_image();?>
#header-image {max-width: 1000px;max-height: 400px; }#header-image img {vertical-align: bottom;width: 100%;height: auto; }

En administración usamos solo un tamaño de imagen (completo) en nuestro marcado y obtenemos su URL con el get_header_image función ( frl_admin_header_image_markup es responsable de eso). Pero debemos proporcionar un estilo apropiado para la vista previa para que represente el comportamiento receptivo ( frl_admin_header_image_style es responsable de eso). Ambas funciones se llamarán automáticamente porque las hemos especificado como parámetros de registro de encabezado personalizados. Ahora podemos disfrutar de libertad absoluta, configurando una imagen de encabezado personalizada.

Una palabra de precaución

Con la libertad viene la responsabilidad. Dando a un usuario la flexibilidad de cargar imágenes personalizadas, no tenemos control sobre el tamaño y las proporciones de la imagen. Si una imagen cargada excede los límites de ancho y alto que hemos proporcionado, debe recortarse. Pero si todo esto sucede en el nuevo personalizador de temas en vivo en lugar de la pantalla Apariencia -> Encabezado , la imagen del encabezado no se recortará (al menos por ahora). El Live Theme Customizer es una característica bastante nueva, por lo que las mejoras futuras parecen posibles, pero por el momento debemos tener cuidado.

Otro problema podría surgir si una imagen cargada tiene un ancho menor que el diseño de nuestro tema. Nuestro código lo ampliará para llenar todo el ancho del contenedor, por lo que la calidad de la imagen podría verse afectada. La verdad es que cualquier cosa personalizable puede, por su naturaleza, romperse. Proporcionar directrices sólidas para sus usuarios ayudará, pero hasta cierto punto, debe permitirles hacer lo que quieran.

Conclusión

Para resumir: ahora hemos implementado nuevas funciones introducidas en el resentido WordPress 3.4 para admitir una imagen de encabezado personalizada. Lo hicimos receptivo utilizando la técnica "noscript" que nos permite no solo ajustar el tamaño de una imagen de acuerdo con el ancho del navegador, sino también servir imágenes de diferentes tamaños para varios anchos. Suministramos nuestro tema con dos variantes predefinidas, pero cualquier imagen puede cargarse a través de una interfaz de administrador y nuestro encabezado seguirá siendo receptivo.

Puede descargar el código y las imágenes de muestra utilizadas en este artículo de aquí .


¿Has trabajado con encabezados personalizados en WordPress? ¿Qué mejoras en la versión 3.4 están afectando a cómo trabajas con WordPress? Únete a la conversación a continuación.