Olá pessoal, hoje iremos mostrar como fazer um sistema de publicação de banners em popups utilizando o WordPress, mas sem o uso de plugins.
É sei que muita gente odeia popup, e eu sou uma dessas pessoas, porém ao trabalhar para clientes que exigem a utilização desse recurso, torna-se necessário implementar no site.
Antigamente era comum a utilização da técnica de abrir uma janela via Javascript, porém os browsers já a algum tempo possuem mecanismos para bloquear esse tipo de publicidade.
O que se tem usado muito é a utilização de DIV´s, muito comum em sites de comércio eletrônico (aquelas janelinhas com propaganda, que obriga você clicar no fechar).
Vamos ao passo-a-passo, utilizando o WordPress:
1. Crie uma categoria no seu wp-admin, com o nome de popup.
2. Insira um post que será seu popup, faça a inserção da sua imagem normalmente no post, e crie dois campos personalizados logo abaixo do editor, com os nomes de Largura e Altura, e coloque o tamanho em pixel do seu popup.
3. Na sua header.php, você irá acrescentar um javascript, que irá fazer o popup ser fechado.
<script>
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i&amp;amp;lt;(args.length-2); i+=3)
with (document) if (getElementById &amp;amp;amp;&amp;amp;amp; ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
4. Em sua home.php ou na sua index.php (depende de seu tema), você irá criar o seguinte trecho de código, logo no início, após o get_header():
< ?
$popup=new WP_Query();
$popup->query('showposts=1&cat=5');
while($popup->have_posts()):$popup->the_post();
?>
<style>
#destaque {
width:< ? echo get_post_meta($post->ID, "largura", true); ?>px;
height:< ? echo get_post_meta($post->ID, "altura", true); ?>px;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#dtopo {
border-bottom: #666666 solid 1px;
height:32px;
background: url(< ?php bloginfo('template_url'); ?>/images/closelabel.gif) no-repeat right;
}
</style>
<!-- ************************** POPUP DESTAQUE ************************** -->
<div id="destaque" style="visibility: visible;">
<!-- Botao Fechar | Inicio -->
<div id="dtopo" title="Fechar esse janela" style="cursor:pointer" onclick="MM_showHideLayers('destaque','','hide')"> </div>
<!-- Botao Fechar | FIM -->
<!-- CONTEUDO -->
<div onclick="MM_showHideLayers('destaque','','hide')" title="Fechar esse janela" style="cursor:pointer"></div>
< ?php the_content()?>
<!-- CONTEUDO | FIM -->
</div>
< ?php endwhile;?>
<!-- POPUP DESTAQUE | FIM -->
Explicando: no inicío deste código, criamos um laço do WordPress onde irá mostrar sempre o ultimo post da categoria popup (id=5).
No CSS, criamos uma DIV e configuramos que a sua largura e altura serão os informados no post, nos campos personalizados.
A classe dtopo, é a apenas para colocar um botão de fechar. Os demais são auto-explicativos.
6. Com isso, o laço irá exibir sempre o post publicado, caso não queira mais o popup, basta ir no wp-admin e despublicar o post, simples assim.
