Como criar um header com imagens aleatórias
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="<? 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?
Random Posts
6 Responses to “Como criar um header com imagens aleatórias”
Leave a Reply
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.