Criando um cabeçalho responsivo no WordPress 3.4

Entre todos os novos recursos e melhorias que o recente lançamento do WordPress 3.4 introduziu, há uma joia escondida. O recurso de imagem de cabeçalho personalizado tem sido suportado pelo WordPress há algum tempo, no entanto, anteriormente, suas dimensões fixas o tornavam muito imóvel para ser de grande utilidade na era do design responsivo.

A nova versão torna-a flexível e introduz um código mais fácil e limpo para esta opção popular. Como desenvolvedores de temas, agora podemos ir mais longe, levando em consideração a necessidade de otimizar para visitantes móveis.

Anteriormente, as dimensões de uma imagem de cabeçalho eram predefinidas e gerenciadas com o HEADER_IMAGE_HEIGHT e HEADER_IMAGE_WIDTH constantes e o arquivo carregado foi recortado para atender a essas restrições. Mas desde a versão 3.4, a imagem de cabeçalho personalizada suporta larguras e alturas flexíveis e liberta-nos dessas constantes desagradáveis. Parece intrigante, não é? Vamos ver como isso pode ser feito.

O que vamos conseguir

Antes de mais nada, devemos decidir quais das técnicas de imagem responsivas disponíveis (e amplamente discutidas) nos servirão. Podemos nos permitir qualquer marcação personalizada para essa imagem, levando em consideração sua importância para a marca do site e, ao mesmo tempo, sua independência da estrutura ou marcação de um post. Deste ponto de vista, a técnica “noscript” parece realmente promissora. Para resumir a técnica, funciona da seguinte maneira:

Nós especificamos referências de imagem alternativas para pontos de interrupção escolhidos como atributos de dados de um

Ele deve ser acompanhado por um estilo CSS apropriado e um script que coloque o jQuery Picture para funcionar. Além disso, gostaríamos de ter um conjunto de imagens de cabeçalho predefinidas para serem escolhidas (da mesma forma que temos no tema do Twenty Eleven). Além disso, gostaríamos de dar ao usuário a capacidade de fazer upload de sua própria imagem no painel de administração. Supondo que uma versão completa da imagem seja carregada, criaremos os tamanhos intermediários necessários com o suporte a miniaturas incorporadas do WordPress combinados com tamanhos flexíveis de cabeçalho. Nosso cabeçalho personalizado deve eventualmente ficar assim:

Chega de conversa, vamos mergulhar no código.

Etapa 1: registre o cabeçalho personalizado com o seu 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 é um novo código de registro introduzido no WordPress 3.4. Você pode ver todo o conjunto de parâmetros para ele no Códice , mas para a nossa tarefa, os seguintes são os mais importantes:

• default-image - url para o tamanho total da imagem padrão na pasta do tema
• width , height - valores máximos suportados pelo nosso tema
• flex-height , flex-width - definido como "true", esse parâmetro permite que a imagem tenha tamanhos flexíveis
• header-text - não vamos mostrar texto sobre imagem em nosso tema
• uploads - ativar uploads no admin
• wp-head-callback - função a ser chamada na seção head do tema
• admin-head-callback - função a ser chamada na seção de cabeçalho da página de visualização
• admin-preview-callback - função para produzir marcação de pré-visualização na tela de administração

Se você usou uma imagem de cabeçalho personalizada em seu tema antes e está se perguntando como as técnicas são comparadas, aqui está uma lista de equivalentes entre constantes antigas e novos parâmetros (as chaves da matriz):

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

Etapa 2: registrar imagens padrão para escolher

Em nosso exemplo, forneceremos duas imagens predefinidas como opções para o cabeçalho e cada uma delas deve ter três variantes: -large.jpg , -medium.jpg e -thumb.jpg para o intervalo correspondente de larguras de janela. O menor tamanho também será usado como miniatura na interface do administrador.

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')));

O código é bastante auto-explicativo, o único detalhe que requer atenção é um URL correto para as imagens: -large.jpg para tamanho grande e -thumb.jpg para miniaturas ( %s - é um espaço reservado para a pasta do tema ativo que será automaticamente substituído pelo WordPress).

Etapa 3: registrar tamanhos de imagem adicionais

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

Registrar esses tamanhos adicionais com nosso tema instruirá o WordPress a criar uma variante para cada um deles ao fazer o upload de uma imagem para o cabeçalho personalizado. A variante apropriada pode ser obtida posteriormente usando o nome. O truque é especificar um valor de altura bastante grande, fazendo com que a imagem seja redimensionada pela largura e deixe sua altura derivada da proporção.

Etapa 4: marcação para o 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;?>

Mais uma vez, tudo é simples. Com o frl_header_image_markup função nós criamos a marcação necessária para a nossa técnica de resposta funcionar. A parte mais interessante aqui é obter URLs de imagens para estados grandes, médios e pequenos. A função do WordPress 3.4 get_custom_header retorna um objeto de cabeçalho personalizado que contém todos os dados necessários. E se $custom_header tem um conjunto corretamente attachment_id propriedade, estamos lidando com uma imagem enviada e deve obter tamanhos intermediários usando wp_get_attachment_image_src . Se não houver essa propriedade, estamos lidando com uma de nossas imagens padrão para que possamos obter tamanhos intermediários com base em nossa própria convenção de nomenclatura.

Com frl_header_image_style Injetamos o CSS e o JavaScript que tornam nossa imagem responsiva. Esta função será chamada automaticamente porque especificamos como um parâmetro de registro de cabeçalho personalizado. Mas o _markup função deve ser chamado diretamente no tema - obviamente em algum lugar dentro do header.php

Após essa etapa, já tivemos nossa primeira imagem de cabeçalho padrão exibida de maneira responsiva.

Etapa 5: marcação para visualização do administrador

No menu Aparência -> Cabeçalho , agora temos uma tela que nos permite alterar a imagem do cabeçalho personalizado escolhendo uma das opções predefinidas ou carregando uma nova imagem. Nós vamos ter o cabeçalho parecer simples.

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; }

Na administração, usamos apenas um tamanho de imagem (completo) em nossa marcação e obtemos sua URL com o get_header_image função ( frl_admin_header_image_markup é responsável por isso). Mas devemos fornecer um estilo apropriado para a pré-visualização, para que ela represente o comportamento responsivo ( frl_admin_header_image_style é responsável por isso). Ambas as funções serão chamadas automaticamente porque as especificamos como parâmetros de registro de cabeçalho customizados. Agora podemos desfrutar de liberdade absoluta, definindo uma imagem de cabeçalho personalizada.

Uma palavra de cautela

Com liberdade vem a responsabilidade. Dando ao usuário a flexibilidade de fazer upload de imagens personalizadas, não temos controle sobre o tamanho e as proporções da imagem. Se uma imagem enviada exceder os limites de largura e altura que fornecemos, ela deverá ser recortada. Mas se tudo isso acontecer no novo Live Theme Customizer, em vez da tela Appearance -> Header , a imagem do cabeçalho não será cortada (pelo menos por enquanto). O Live Theme Customizer é um recurso bastante novo, portanto melhorias futuras parecem prováveis, mas no momento devemos ter cuidado.

Outro problema poderia surgir se uma imagem enviada tiver uma largura menor do que a pretendida pelo nosso design de tema. Nosso código irá esticá-lo para preencher toda a largura do contêiner, para que a qualidade da imagem possa ser afetada. A verdade é que qualquer coisa personalizável pode, por sua natureza, ser quebrada. Fornecer diretrizes sólidas para seus usuários ajudará, mas, até certo ponto, você terá que deixá-los fazer o que quiserem.

Conclusão

Resumindo: agora implementamos novas funções introduzidas no resent WordPress 3.4 para suportar uma imagem de cabeçalho personalizada. Fizemos isso responder usando a técnica “noscript” que nos permite não apenas ajustar o tamanho de uma imagem de acordo com a largura do navegador, mas também servir imagens de tamanhos diferentes para várias larguras. Fornecemos nosso tema com duas variantes predefinidas, mas qualquer imagem pode ser enviada por meio de uma interface administrativa e nosso cabeçalho ainda será responsivo.

Você pode baixar o código e as imagens de amostra usadas neste artigo daqui .


Você já trabalhou com cabeçalhos personalizados no WordPress? Quais refinamentos na versão 3.4 estão impactando como você trabalha com o WordPress? Participe da conversa abaixo.