Thunder-Boy

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;amp;amp;lt;(args.length-2); i+=3)
with (document) if (getElementById &amp;amp;amp;amp;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')">&nbsp;</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.