Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless

Caro Maujor,
Tenho uma dúvida, eu alterei a imagem do topo do meu blog, ficou legal, mas como fazer com que a imagem inteira seja um link "home" e não apenas o nome do meu blog (como está no seu, por exemplo)?
Desde já agradeço e muito obrigado. (utilizo o wordpress)

Retirei a citação acima de um comentário postado por um visitante em uma matéria deste Blog. Daí veio a motivação para escrever esta matéria explicando como resolver a dúvida daquele leitor. Tomarei como base para desenvolver esta matéria os templates do WordPress baseados no tema Padrão, que serve de base para a grande maioria dos temas.

O topo WordPress

Observe abaixo o código onde é inserida a imagem de topo no Blog:

<div id=”headerimg”>

 <h1>
  <a href=”<?php echo get_settings(’home’); ?>”><?php bloginfo(’name’); ?></a>
 </h1>

<div class=”description”>
 <h2>
  <?php bloginfo(’description’); ?>
 </h2>
</div>

</div>

Entendendo o código:

• A imagem de topo é uma imagem de fundo, inserida via CSS na div id="headerimg", que contém todo o topo.
• O elemento H1 é o nome do Blog, inserido com código PHP e é também um link para a Home Page. No meu Blog é o texto "Blog do Maujor" escrito no canto inferior direito do topo. Passe o mouse sobre aquele texto e você constatará que ali é um link;
• O elemento H2 é a descrição do Blog, inserido com código PHP. No meu Blog é o texto "Tutoriais e pensamentos - CSS, web standards, acessibilidade, tableless" escrito logo abaixo de "Blog do Maujor";

Assim, examinando o código acima e como já tinha sido observado pelo meu visitante, somente o nome do Blog é um link.
Queremos que toda a imagem do topo seja um link.

Fazendo de uma imagem um link

A imagem abaixo é um link para meu site. Experimente clicando nela e a HP do CSS para Web Design vai abrir em uma nova janela.

O código da imagem acima:

<a href="http://www.maujor.com/" target="_blank">
<img src="/blog/mat-img/flower.jpg" alt="Link para CSS para Web Design" width="100" height="100"  />
</a>

Hum assim é fácil!
A imagem foi inserida no código HTML da página (e não via CSS) e a seguir foi colocada dentro de um elemento âncora (link) a

E para imagens de fundo?

Quando a imagem é inserida via CSS, como é o caso da imagem de topo do WP temos que procurar outra solução, pois não há um elemento img na marcação para ser colocado dentro de um elemento a.

Na verdade o que estamos querendo é fazer com que o elemento HTML onde foi inserida a imagem de fundo se torne ele todo (em toda a extensão de sua largura e de sua altura) um link. Notar que as dimensões deste elementos corresponde às dimensões da imagem de fundo ou seja do topo.
Vimos no código do WP que o elemento que contém a imagem do topo é a

<div id="headerimg"></div>

Ah! então é fácil, basta fazer:

<a href="http://www.maujor.com/blog>
<div id="headerimg">
…
</div>
</a>

Resolvido! Vai funcionar? Sim vai, agora toda a imagem de topo tornou-se um link. Mas, há um problema. Você saberia dizer qual é o problema com o código acima? Garanto a você que vai funcionar legal e este não é o problema.

Uma solução

Se você submeter ao validador o código XHTML mostrado, vai resultar o seguinte erro:
"…o Doctype não permite o elemento <div id="headerimg"> no contexto onde foi colocado…
Uma possível causa para o erro é que você colocou um elemento nível de bloco dentro de um elemento inline…"

E foi isto exatamente o que fizemos de errado. Colocamos um elemento nível de bloco (uma DIV) dentro de um elemento inline (um link a) o que não é permitido.

E que tal se invertermos? Ou seja, colocamos o elemento a dentro do elemento DIV. Isto é permitido.
Mas, não vai funcionar, pois a área clicável de um elemento link é seu conteúdo (um texto ou uma imagem como naquele exemplo lá em cima onde a imagem está no código HTML.
Obrigado às CSS pela regra display:block; através da qual você pode atribuir um comportamento nível de bloco a um elemento inline definindo para ele dimensões (largura e altura).
Então se declararmos display:block; para o elemento a e fizermos suas dimensões iguais as dimensões da imagem do topo o problema estará resolvido pois agora o elemento a é um retângulo, independente de ter ou não um texto ou imagem dentro dele.

Alterando o código do WordPress e resolvendo o problema

Teoria esclarecida e entendida vamos à prática, em um passo a passo:

1. Descubra quais são as dimensões da imagem de topo. Normalmente 760 x 200 pixels no WP.
2. Abra no seu editor HTML preferido o seguinte arquivo WP:
   raiz do blog/wp-content/themes/nome do seu tema/header.php
   Faça uma cópia de segurança do arquivo header.php para se algo sair errado você restabelecer o arquivo original.
3. Localize no arquivo header.php a seguinte seqüência de código:

   <div id="headerimg">
   <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
   <h2><div class="description"><?php bloginfo('description'); ?></h2></div>
   </div>
   
   

4. Acrescente no código acima o seguinte:

   <div id="headerimg">
   <a href="/seuBlog" style="display:block;width:760px;height:200px;"></a>
   <h1><a href=”<?php echo get_settings(’home’); ?>”><?php bloginfo(’name’); ?></a></h1>
   <div class=”description”><?php bloginfo(’description’); ?><h2></h2></div>
   </div>
   
   

   Onde:
   
   href=endereço da HP do blog;
   width:760px - a largura da imagem de topo;
   height:200px - a altura da imagem de topo.

5.  Salve o arquivo, faça upload para o servidor, abra o blog no navegador, teste e corra para o abraço!

Notas finais

Esta não é a única maneira de fazer da imagem de topo um link. Você poderia, por exemplo, retirar a imagem das CSS e colocá-la na marcação, passando para a imagem o nome e a descrição do blog (quem sabe com letras trabalhadas, sombras etc.) e declarar regras CSS para image replacement.
No exemplo mostrado as regras CSS para o link foram declaradas inline, mas você poderá colocá-las na folhas de estilos do blog se preferir.
Além disto mesmo seguindo certinho os passos desta matéria, poderá sair algo errado devido a alguma condição particular do tema que você usa, pois como eu disse no início a matéria baseia-se no tema que serviu de base para a maioria dos temas, mas não todos. Se você tiver dificuldades, poste nos comentários que sempre terá alguém para ajudá-lo. Se você alterou no seu Blog poste informando se deu ou não certo.

Recebi um email perguntando se é possível trocar a imagem de topo por uma animação em FLASH. O que você acha?

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Esta matéria foi publicada em: 2006-06-23 (Friday). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/06/23/link-topo-wp/trackback no seu site.