Com a chegada da versão 3.4 do WordPress chegaram também algumas novidades interessantes, e algumas delas um pouco escondidas. A funcionalidade Custom Header Imagem já existe há algum tempo, mas a verdade é que até agora as suas dimensões eram fixas e impossibilitavam que na era do design responsivo esta fosse utilizada de forma mais conveniente. Com o lançamento da versão 3.4 do WordPress esta funcionalidade chegou mais flexível e com código mais simples e fácil para se poder proceder a alterações. Com este passo, você enquanto desenvolvedor poderá ter agora em conta a otimização para dispositivos móveis, sendo que as limitações de tamanho impostas anteriormente pelo header_image_height e pelo header_image_width desapareceram, dando a possibilidade aos desenvolvedores de dar asas á imaginação e poder criar outros tipos de cabeçalhos. Assim neste tutorial vamos-lhe dar a conhecer Como criar um cabeçalho responsivo em WordPress!
1. PRIMEIRO PASSO
Como será de conhecimento geral e aplicável a quase tudo aquilo que fazemos, não existe apenas um método para alcançar algo. Então, é necessário definir qual das técnicas de imagens responsivas iremos utilizar, tendo em conta qual delas será aquela que melhor encaixará naquilo que pretendemos – ter o branding do website, ao mesmo tempo que é independente da estrutura de um artigo ou da sua markup. Tendo isto em conta, a técnica noscript parece ser a mais adequada:
<noscript data-large='picture-large.jpg' data-small='picture-small.jpg' data-alt='alt text'><img src='picture.jpg' alt='alt text' /></noscript>
Este pequeno trecho de código especifica as referências ás imagens que vão ser utilizadas como atributos da tag noscript. Se o Javascript estiver desabilitado, o navegador irá renderizar a imagem especificada dentro da tag noscript. Para efetuar o manuseamento da substituição, iremos utilizar o jQuery Picture Plugin que permite introduzir pelo menos três alternativas – a markup necessária ao plugin é a seguinte:
<figure id="header-image" data-media="picture-small.jpg" data-media440="picture-medium.jpg" data-media600="picture-large.jpg" title="alt text"> <noscript> <img src="picture-large.jpg" alt="alt text"> </noscript> </figure>
Esta markup deverá ser devidamente acompanhada pela estilização CSS e pelo script que coloca o jQuery Picture plugin em funcionamento. Além disto, podemos ainda ter ter um conjunto de imagens pré-definidas para o cabeçalho, á semelhança do que acontece com o theme pré definido Twenty Eleven:
Naturalmente queremos que o usuário possa enviar as suas próprias imagens para o cabeçalho através do painel de administração. Partindo do princípio que uma imagem de tamanho total já foi enviada para o servidor, iremos criar os tamanhos necessários para ser adequado aos vários tamanhos do cabeçalho responsivo. A título de exemplo, o nosso cabeçalho poderá começar assim:
2. INTRODUZINDO O CÓDIGO
O primeiro passo é adicionar o suporte para a introdução de imagens personalizadas:
$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg'; //insira o seu URL $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);
O segundo passo é registar as opções de imagem por defeito:
register_default_headers(array( 'city' => array( 'url' => '%s/_inc/img/city-large.jpg', //state your own URL 'thumbnail_url' => '%s/_inc/img/city-thumb.jpg', //state your own URL 'description' => 'City' ), 'forest' => array( 'url' => '%s/_inc/img/forest-large.jpg', //state your own URL 'thumbnail_url' => '%s/_inc/img/forest-thumb.jpg', //state your own URL 'description' => 'Forest' ) ));
Como pretendemos utilizar tamanhos de imagem adicionais, é necessário registá-los:
add_image_size('header_medium', 600, 900, false); add_image_size('header_minimal', 430, 900, false);
Agora vamos introduzir o código para tornar o front end do website responsivo:
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; ?> <figure id="header-image" data-media="<?php echo $mininal;?>" data-media440="<?php echo $medium;?>" data-media600="<?php echo $large;?>"> <noscript> <img src="<?php echo $large;?>"> </noscript> </figure> <?php }
Agora é necessária a introdução de do CSS para estilizar a front end:
function frl_header_image_style() { $src = get_template_directory_uri().'/_inc/js/jquery-picture-min.js'; wp_enqueue_script('jquery-picture', $src, array('jquery'), 0.9, true); ?> <style type="text/css"> #header-image { padding: 0.5em 0; } #header-image img { vertical-align: bottom; width: 100%; height: auto; } </style> <script> jQuery(document).ready(function($){ $('#header-image').picture(); }); </script> <?php }
Como pretendemos ter total controlo sobre este processo, é necessário introduzir algumas alterações para que no painel de administração possa ter um preview da imagem a utilizar:
function frl_admin_header_image_markup() { $image = get_header_image(); ?> <div id="header-image"> <?php if($image): ?> <img src="<?php echo esc_url($image); ?>" alt="" /> <?php endif; ?> </div> <?php } function frl_admin_header_image_style() { ?> <style> #header-image { max-width: 1000px; max-height: 400px; } #header-image img { vertical-align: bottom; width: 100%; height: auto; } </style> <?php }
Para fazer o download do jQuery Picture plugin, clique aqui.
Depois de introduzido o código, dirija-se ao seu painel de administração e aceda a Cabeçalho:
Depois, terá ao seu dispôr um campo para fazer o upload da imagem:
Depois de inserida a imagem, é necessário proceder a uma última alteração, desta vez no ficheiro header.php insira o seguinte código onde pretender que a imagem de cabeçalho seja inserida:
<?php frl_header_image_markup(); ?>
Em jeito de conclusão, este é o código final gentilemente cedido por Anna Ladoshkina
<?php /** * Title: Responsive Custom Header Image * Description: Webdesigner Depot tutorial - example code * Author: Anna Ladoshkina * Author URI: http://www.foralien.com * * How to use: * * 1. Paste the code in your theme's function.php file * 2. Put images in appropriate folder with your theme * 3. Correct URLs of images to point to the correct folder * 4. Paste the following code into your theme header.php - where the image should be * <?php frl_header_image_markup(); ?> * **/ /** * Add custom image support **/ $default_url = get_template_directory_uri().'/_inc/img/city-large.jpg'; //state your own URL $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); /** * Register default image's options **/ register_default_headers(array( 'city' => array( 'url' => '%s/_inc/img/city-large.jpg', //state your own URL 'thumbnail_url' => '%s/_inc/img/city-thumb.jpg', //state your own URL 'description' => 'City' ), 'forest' => array( 'url' => '%s/_inc/img/forest-large.jpg', //state your own URL 'thumbnail_url' => '%s/_inc/img/forest-thumb.jpg', //state your own URL 'description' => 'Forest' ) )); /** * Register additional sizes **/ add_image_size('header_medium', 600, 900, false); add_image_size('header_minimal', 430, 900, false); /** * Responsive header markup for frontend * * the markup use <noscript> responsive image techique as Antti Peisa describes it * @link http://www.monoliitti.com/images/ * * with a slight alternation required by jQuery Picture plugin * @link http://jquerypicture.com/ **/ 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; ?> <figure id="header-image" data-media="<?php echo $mininal;?>" data-media440="<?php echo $medium;?>" data-media600="<?php echo $large;?>"> <noscript> <img src="<?php echo $large;?>"> </noscript> </figure> <?php } /** * CSS for responsive header in frontend **/ function frl_header_image_style() { $src = get_template_directory_uri().'/_inc/js/jquery-picture-min.js'; wp_enqueue_script('jquery-picture', $src, array('jquery'), 0.9, true); ?> <style type="text/css"> #header-image { padding: 0.5em 0; } #header-image img { vertical-align: bottom; width: 100%; height: auto; } </style> <script> jQuery(document).ready(function($){ $('#header-image').picture(); }); </script> <?php } /** * Header preview in admin * in admin will display fullsized image **/ function frl_admin_header_image_markup() { $image = get_header_image(); ?> <div id="header-image"> <?php if($image): ?> <img src="<?php echo esc_url($image); ?>" alt="" /> <?php endif; ?> </div> <?php } function frl_admin_header_image_style() { ?> <style> #header-image { max-width: 1000px; max-height: 400px; } #header-image img { vertical-align: bottom; width: 100%; height: auto; } </style> <?php } ?>
Abraço!