Como colocar um link na figura do cabeçalho

Já vi que muita gente tem essa dificuldade e é quase impossível achar algum lugar que explique isso detalhadamente. Sei disso porquê eu já estava ficando doido por não conseguir fazer isso.

Nos temas padrões do WordPress, no cabeçalho, encontramos um link para a página inicial, mas este link é sempre definido pelo nome do site, e não por uma figura. O que queremos fazer é colocar uma figura ali em cima, e linkar para que ela continue apontando para a homepage.

Acontece que o cabeçalho é definido pelo arquivo Style.css do seu tema, algo mais ou menos assim:

#header {
vertical-align:text-top;
padding: 13px 0 0 0;
background-color: #ffffff;
border-bottom: 5px solid #e7f1f8;
font-size: large;
background-image: url(images/header.jpg);
}

#header h1 {
margin: 0;
font-size: 30pt;
font-family: Rockwell;
text-align: center;
vertical-align: text-top;
margin-bottom: 30px;
}

#header h1 a {
text-decoration: none;
color: #0066cc;
}

Para conseguir o que queremos, teremos que editar dois arquivos que estão na pasta do seu tema: Style.css e o Header.php.

Acontece que o fundo do cabeçalho é definido pelo CSS, e no CSS não é possível inserir um link. Portanto, como fazer isso?

Quando a imagem é inserida via CSS, 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.

Para começar vamos definir a sua figura como cabeçalho. Você vai poder excluir o #header h1 e o #header h1 a e deixar só isso:

header {
padding: 13px 0 0 0;
background-color: #ffffff;
border-bottom: 5px solid #e7f1f8;
background-image: url(images/header.jpg);
}

Veja que a linha “background-image: url(images/header.jpg);”, chama a figura header.jpg na pasta Images do seu tema. Ou seja, salve com esse nome a figura que quiser deixar no cabeçalho. Você pode excluir a linha “border-bottom: 5px solid #e7f1f8;” também. O que ela faz é apenas adicionar uma linha de borda abaixo do cabeçalho, para separá-lo do corpo do site.

Agora, a mágica está no arquivo Header.php. Vá ao fim do arquivo e procure por esse código:

<div id=”header”>
<div id=”headerimg”>
<h1><a xhref=”<?php echo get_settings(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>
</div>
</div>

? aqui que definiremos a área do link.

Substitua pelo código abaixo:

<div id=”header”>
<a xhref=”<?php bloginfo(‘url’); ?>” style=”display:block; width:750px; height:105px;”></a>
<div id=”headerimg”>
</div>
</div>

Nos parâmetros width e height você deve colocar o tamanho em pixel da figura do cabeçalho. Essa área será a área linkada para a página principal.

Graças a regra display:block; 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; e colocarmos as dimensões width e heigth iguais aos do tamanho do cabeçalho, o elemento será definido como um retângulo do tamanho definido, sendo todo ele um link, independente de ter ou não um texto ou imagem dentro dele.

Depois disso, é só verificar no site que estará tudo certinho! 🙂

Qualquer dúvida comentem aqui.

[tags] WordPress, Cabeçalho, Header, Imagem[/tags]