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]

5 comentários

  1. Claudio Lessa

    Meu caro, que tal um tutorial rápido sobre como fazer um cabeçalho a partir de uma figura de 750 x 150 pixels no Adobe Photoshop? Exemplo: 1. Você desenha o que quer no photoshop; 2. abre o programa xyz (dreamweaver, por ex.) e vai na página tal e pega o texto referente ao seu desenho; 3. copia e cola o texto na área xyz do webpress assim, assim, assado. Acho que ficaria mais fácil para mim e para a Carol, acima, pois não entendemos esse grego que é a linguagem da computação – a não ser que vc dê indicações muito precisas e básicas, bem básicas, primárias mesmo, a respeito de cada passo. Obrigado pela atenção. Realmente aguardo um feedback seu, pois desejo criar um cabeçalho para meu site e não tenho idéia de como fazer isso. Mais uma vez, obrigado pela atenção.

  2. Tonobohn

    Claudio e Carol,

    Esse tutorial serve apenas para quem está criando um site ou blog em WordPress (ferramenta de gerenciamento de conteúdo). Se você está criança um site em html, o negócio é extremamente mais simples. O problema na verdade é, se você não sabe fazer um cabeçalho pro seu site, sabe fazer o resto, que é muito mais complicado? Se seu problema for específico, posso ajudá-lo, mas precisa aprender desde o começo como fazer um site, existem outros sites que podem ajudá-lo muito mais. Se quiser, mande um e-mail pelo formulário de contanto e posso ajudá-lo melhor.

    Abraço

Deixe um comentário

O seu endereço de e-mail não será publicado.