Por vezes temos (ou encontramos) temas que achamos bons para utilizarmos no nosso blog, mas com um header muito estático, simples demais para aquilo que necessitamos.

Ora isso não é problema, existem algumas maneiras para tornar um header mais animado, podendo-se utilizar Flash, imagens animadas, ou outros. Mas, e porque não diversas imagens e elas irem alternando entre si, sempre de forma aleatória.
É isso que vou explicar já a seguir, como criar um header com imagens aleatórias para deixar o seu blog com um topo mais agradável.

1. - Edição de imagens
Prepara todas as imagens que quer colocar no seu header, todas elas com o mesmo tamanho (dimensões) e formato. Se tiver imagens em diversos formatos (GIF, JPG, etc…), escolha o formato que preferir e coloque todas as imagens no mesmo formato.

2. - Nomes das imagens
Neste exemplo, assim como o formato, o nome das imagens é também muito importante, utilize um nome padrão para todas elas. Por exemplo:

header_myblog_01.gif
header_myblog_02.gif
header_myblog_03.gif
header_myblog_04.gif

Isto é fundamental para simplificar o código e para ser mais simples criar a “randomização” das imagens.

3. - Colocar as imagens todas juntas
Junte as imagens todas na mesma pasta, normalmente os temas têm uma pasta “images”, é ai que deve colocar as imagens para usar no header, se não tiver crie uma na raiz do tema.

4. - Inserção de código
Edite o ficheiro “header.php” e procure por , logo por baixo cole o seguinte código:

$header_image = rand(1,4);
?>

O rand () é a função que irá mostrar a imagem de forma aleatória, ele vai escolher “1″ imagem entre as “4″ disponíveis (se quiser usar mais ou menos imagens, altere o número (4) para o número de imagens a usar).

5. - Usar a “randomização” no header
Este passo pode ser um pouco complicado, uma vez que lhe irá exigir encontrar o código onde o seu tema invoca a imagem do header. A maior parte dos webdesigners definem a imagem do header através de CSS, como imagem de fundo da DIV do header. Sendo assim, terá de se livrar dessa técnica e usar uma forma diferente de fazer o mesmo.

Idealmente, o código que lhe mostro em baixo irá colocar as suas imagens no header do seu blog:

<img src="&lt;? bloginfo('template_directory'); ?&gt;/images/header_myblog_&lt;? echo $header_image; ?&gt;.gif" alt="header" />

Basicamente, este código irá inserir o valor da variável $ header_image após “header_myblog_” e isso irá buscar a imagem à paste “images”, onde esta se encontra. Tudo o que você tem que fazer é descobrir exactamente onde colocar este código no seu tema.

No fundo é um tutorial simples, só é preciso um pouco de prática. Qualquer dúvida deixe um comentário, ajudarei no que for possível.

Qual a sua opinião relativamente aos headers com imagens aleatórias? Está a pensar usar no seu blog, ou já utiliza?

Partilhar