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 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!

1. PRIMEIRO PASSO

2. INTRODUZINDO O CÓDIGO

Autor Diogo Espinha

Psicologia

Criatividade

Freelancer

Dinheiro

Apostas

Como criar um cabeçalho responsivo em WordPress

1. PRIMEIRO PASSO

2. INTRODUZINDO O CÓDIGO

Autor Diogo Espinha

Faça do Disqus seu sistema de comentários

Performance: Como ligar o turbo em seu WordPress

Carregando as stylesheets dos temas da JQuery UI diretamente do CDN do Google

Como desativar as atualizações automáticas no WordPress 3.7

10 Truques e dicas para você usar com o WordPress

Psicologia

Criatividade

Freelancer

Dinheiro

Apostas