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);
?>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="<? bloginfo('template_directory'); ?>/images/header_myblog_<? echo $header_image; ?>.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?
Adorei o blog, muito boas essas dicas de wordpress… Parabéns.
Aproveitando para saber se a gente pode fazer uma parceria?
Abraços.
Onde e como arranjar o código “javascript” para uma bandeira portuguesa com animação para colocar no blog de um grupo de amigos e ex-camaradas de armas que estivemos em Angola como militares na guerra colonial nos anos setenta? Se visitar o nosso blog, verificará o que pretendo, é aquela bandeira Portuguesa a ondular ao lado da bandeira dos Açores e de Cabo Verde
Agradecia que me dessem uma dica..!
um abraço
Carvalho
Antonio,
O melhor seria mesmo pesquisar na internet, no famoso google. Nao percebi bem o que pretende, pois ja tem uma bandeira com animacao.
Nao hesite em contactar-me se precisar de mais alguma dica.
Estevao
Então cara tentei usar essa sua tecnica mas não consegui… Será que poderia me dar uma ajuda?!
Obrigado…
Márllon´s last blog ..Aprenda a Servir uma cerveja!
Olá cara…só uma dúvida…essas imagens elas alternam de segundo a segundo, ou a cada atualização da página… ou de segundos configuráveis ?
Rodnei, as imagens alteram a cada actualização da pagína. se fosse a cada segundo nao era “imagens aleatorias” mas “imagens a rodar.