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 à pasta “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?
14 Responsesto “Como criar um header com imagens aleatórias”
Leave a Reply
Publicidade
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.
onde fica a pasta images do wordpress?
.-= lucas114´s last blog ..COMBO: Band, A Liga, CQC e – #ForadaMinhaTV =-.
Lucas,
A pasta images falada no artigo está na pasta do teu tema. Mas se usas o WordPress.com (gratuito) para alojar o teu blogue, nao é possivel acederes a esta pasta (penso eu).
Desculpe.. Mas ficou muito mal explicado.. Não entendi.
4 – Inserção de código
Edite o ficheiro “header.php” e procure por , logo por baixo cole o seguinte código:
Procure por ; = Procura por o que? cade? não entendi
Ola Rafael, verifica agora se já ves o codigo. Havia uma falha com um plugin (que permite inserir codigo nos posts). Penso que ja veras o codigo a inserir.
boa noite eu nao intendi onde eu coloko esse comando (tá foda ) eu nao intendo muito se for o caso eu poderia upar o template o meu blog é em XML
e nao sei onde coloko esse comando nele alguem ajuda ai porfavor
da uma olhada no codigo fonte dele e me ajuda onde eu coloko o comando se for o caso me mande um comando ja feito ai eu só troco as imagems para me ajudar o blog é esse
games-loading.blogpsot.com
.-= Alessandro´s last blog ..Twitter =-.
Alessandro, O teu blogue não está em WordPress mas em Blogger/Blogspot. Esta dica é para blogues em WordPress.
Oi amigo, estava a procura de como fazer a imagem do header do meu blog, mudar a cada refresh de página. Achei seu tuto interessante.
Mas travei aqui:
5. – Usar a “randomização” no header
Não entendi onde procurar e o que fazer com o código.
Meu template é o wp-symisun.
Será que vc poderia me ajudar? Não entendo muito sobre web, tudo que fiz foi atraves de pesquisa e leitura, mas dessa vez realmente travei!
Fabiano,
Vais ao editor do template e escolhes o ficheiro header.php.
Nessa pagina colocas o codigo < ? $header_image = rand(1,4);?> (logo no inicio).
Depois tens de procurar onde está o código da imagem do header. Começa com
/images/header_myblog_< ? echo $header_image; ?>.gif” alt=”header” />
Ou seja, as imagens que vao rodar têm de ter o nome header_myblog_1.gif, header_myblog_2.gif e assim sucessivamente.
Se tiveres 4 imagens podes o rand(1,4). Se tiveres 6 imagens poes rand(1,6).
O que vai acontecer é que aleatoriamente ele vai escolher um numero de 1 a 4, o que vai mudar o nome da imagem.