Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Link no topo do Blog

Publicado em: 2006-06-23 — 44.675 visualizacoes

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.

Link para CSS para Web Design

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?

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-06-23 (sexta-feira). 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.

18 comentários na matéria: “Link no topo do Blog”

  1. HellenNo Gravatar disse:

    Muito obrigada! Testei de várias formas e só assim deu certo!!!

  2. RAMiRONo Gravatar disse:

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

    Abrass…

  3. PatrickNo Gravatar disse:

    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

  4. gilbertoNo Gravatar disse:

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

  5. Elfrancio GranjenseNo Gravatar disse:

    Cara, vc entende do assunto, parabéns!

  6. Marcio GazettaNo Gravatar disse:

    Santo Google, Santo Maujor.

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

    Obrigado!!!!!!

  7. Fabiana TavaresNo Gravatar disse:

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

  8. Aluísio SabasNo Gravatar disse:

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

  9. claudiaNo Gravatar disse:

    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!

  10. Helder AraújoNo Gravatar disse:

    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

  11. ErnestoNo Gravatar disse:

    Eu consegui através de um codigo em javascript de imagens aleatórias que uso no meu blog, inserir a imagem do topo como link para a home sem nenhum problema….

  12. Felipe RanieriNo Gravatar disse:

    Muito interessante Maujor. É muito bom quando algumas regras CSS vão ficando mais claras para nós desenvolvedores iniciantes. Parabéns!!
    Quanto ao topo eu flash, eu acho que é possível (apesar de não gostar muito) utilizando object talvez. Deixo a pergunta: um topo em flash comprometeria a semântica do código?
    Eu acho que não, mas as vezes paro para pensar nisso e não chego em alguma conclusão interessante.
    Abraços!

  13. RaulNo Gravatar disse:

    Colega, vou acender uma vela para vc aqui, este artigo é show, fazem semanas que eu busco uma solução p meu problema de por um link na imagem do cabeçalho.. As soluções que encontrei não me serviam, mas esta foi na mosca… Parabéns pelo seu site e continue a nos brindar com suas excelentes dicas.

  14. HelderNo Gravatar disse:

    Boa maujor!
    Mais uma vez obrigado pela ótima explicação.

  15. Carlos EduardoNo Gravatar disse:

    Isso é bem útil, também, para substituir os velhos maps… Belo tutorial =)

  16. JoaresNo Gravatar disse:

    Tenho uma matéria assim publicada no meu blog… não utilizando o WP, pois não o uso… mas… fazendo o cabeçalho ser o link…

    Artigo sobre fazer o cabeçalho ser link…

    Meu artigo num tem tanta genialidade e exemplos como os do Maujor, mas, tem a objetividade que é marca registrada desde “monstro” (com todo respeito) do mundo WEB!

  17. Pedro RogérioNo Gravatar disse:

    Wowwwwww, Maujor como sempre salvando a pele da gente, parabéns!!!!

  18. junioNo Gravatar disse:

    No tutorial do site maujor no meno artigos II: Raciocinando com Div’s tem um exemplo que eu considero um máximo, de como construir um topo, com o logo sendo um link para home.Mas…continuo com uma dúvida qual curso que está mais relacionado com WebStandars?-Sistema da Informação ou Ciência da Computação?
    -Obrigado. T +

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo