Categories: (X)HTMLCSStodas

Link no topo do Blog

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?

Maujor

Exerci o magistério paralelamente a minha carreira profissional por toda uma vida e ao longo destes trinta anos aprendi tanto quanto ensinei. Sou um apaixonado por Web Standards e desenvolvo o site de tutoriais CSS para Web Design.

View Comments

  • Mesma coisa do Patrick: não rolou a troca de imagem do topo.... E agora?!

    Abrass...

  • Olá Maujor, tentei fazer isto na última versão do wordpress que baixei hoje, porém não está surtindo efeito..
    O que pode ser?

    Abraço

  • cara seu site é o melhor ouviu, o melhor !!!
    aonde você for pode contar comigo, quero ser seu amigo, sempre, o conhecimento é um benção de Deus, e aquele que distribui o conhecimento sempre será abençoado, !!!

  • Santo Google, Santo Maujor.

    Seu artigo é de junho de 2006. Hj é setembro de 2007 e vc conseguiu me resolver um grande problema.

    Obrigado!!!!!!

  • Gostaria de saber como faço para colocar um link tipo "clique aqui" para abrir uma determinada imagem em uma outra página?
    Obrigada

  • Era isso mesmo que eu procurava!
    muito bom esse esclarecimento feito!

  • Olá:
    Seu blog é muito bom, e tem explicações muito importantes. Tenho 2 perguntas: 1 - Eu criei um blog no novo blogger (blogspot). Coloquei uma imagem no header, e quero colocar uma imagem de fundo, mas, não sei como fazer... Tem que adicionar o código no CSS? 2 - Quando o modelo tem uma imagem que rola com a barra de navegação, como é que faz prá deixá-la fixa? Grata e Feliz Ano Novo!

  • to meio atrasado (o post é do dia 23...), mas quero agradecer pela grande dica! Nunca tinha visto tão bem explicado como você faz!

    Um abraço

Share
Published by
Maujor

Recent Posts

Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…

7 anos ago

Teste seu conhecimento #19

Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…

10 anos ago

JavaScript bubbling e capturing

Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…

10 anos ago

HTML5 – W3C versus WHATWG

HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…

10 anos ago

Seria esse o futuro das imagens responsivas?

Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…

11 anos ago

BrazilJS Conf 2013

Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…

11 anos ago