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

Você está no BLOG do Maujor. IR PARA O SITE

Link no topo do Blog

Publicado em: 2006-06-23 — 37.750 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?

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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