Como criar um cabeçalho responsivo em WordPress

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 um código mais simples e fácil para realizar as alterações. Com este passo, você 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 darem asas à imaginação e poder criar outros tipos de cabeçalhos. Assim, neste artigo vamos mostrar 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 serão 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, como 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 de 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:

 id="header-image" data-media="<?php echo $mininal;?>" data-media440="<?php echo $medium;?>" data-media600="<?php echo $large;?>">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 vá para a seção 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 arquivo header.php. Insira o seguinte código onde pretende que a imagem de cabeçalho seja inserida:

<?php frl_header_image_markup(); ?>

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

?>

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by:

Como criar um cabeçalho responsivo em WordPress

Diogo Espinha

1. Primeiro passo

2. Introduzindo o código

Diogo Espinha