Howto: Criando uma metodologia de publicação de popup com WordPress

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.

[js]

[/js]

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():

[php]
< ? $popup=new WP_Query(); $popup->query(‘showposts=1&cat=5’);
while($popup->have_posts()):$popup->the_post();
?>
[/php]

[css]

[/css]

[php]

 

< ?php the_content()?>

< ?php endwhile;?>

[/php]

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.

This entry was posted in Dicas Web, HowTo - Como fazer. Bookmark the permalink.

6 Responses to Howto: Criando uma metodologia de publicação de popup com WordPress

  1. webipsum says:

    Boa dia, Jonas.
    Vou abusar e fazer uma pergunta.
    Estou fazendo um site e um dos itens é em uma opção do menu principal, abrir um pop-up e tocar rádio ao vivo.
    Tentei rodar o, digamos play.php, dentro da pasta do tema:
    D:\wamp\www\siteteste\wp-content\themes\siteteste\
    Sem sucesso.
    Só consegui abrir o pop-up e tocar a rádio, colocando o play.php, na pasta logo após o www (em localhost eu uso o wampserver), ou seja:
    D:\wamp\www\siteteste\
    Na mesma pasta onde estão os “wp-” admin, content, includes e outros arquivos iniciais do WordPress.
    Caro Jonas. Alguma dica?
    Muito obrigado e parabéns pelo post.
    webipsum.

  2. Jonas says:

    Bem, creio que isso você pode fazer direto no tema, tipo criar uma função:
    [html]
    /***********************************************
    Função para janela Pop-UP centralizada
    ************************************************/
    var WinNum = 0;
    function Open(winName, winW, winH) {
    var leftPos = (screen.width – winW) / 2;
    var topPos = (screen.height – winH) / 2;
    window.open(winName, ‘myWin’+WinNum, ‘toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=1,resizable=1,width=’ + winW + ‘,height=’ + winH + ‘,left = ‘ + leftPos +’,top = ‘ + topPos);
    WinNum += 1;
    }
    [/html]
    E depois, no editor do WP, chamar por meio de link essa função:

    [html]Radio Ao Vivo[/html]

    Fiz isso para um cliente aqui: http://www.tjac.jus.br/noticias/radio-justica.jsp

  3. webipsum says:

    Grato pela rápida resposta, Jonas.
    Não conhecia essa possibilidade… tá anotado aqui…
    A minha dúvida é… qualquer janela (pop-up) aberta… da forma acima ou através de javascript onclick, vai carregar uma página que é o player.
    Lá na radio-justica parece-me que é um player.html.
    Estou abrindo o pop-up através do windows.open do javascript, porém para abrir a página do tocador, que no caso aqui é play.php, tenho que deixá-la fora da pasta do tema, conforme descrevi acima.
    Tá funcionando 100%, porém gostaria de gerenciar a publicidade que tem no pop-up e isso não é possivel, pois o plugin que estou usando gerencia todas as demais publicidades que estão em páginas dentro da pasta do tema e como o play.php não está, o plugin se perde…
    Pergunta: dentro da pasta do tema, não tem como rodar páginas .php (completas) ou páginas .html?
    Forte abraço e mais uma vez meu MUITO obrigado, Jonas.

  4. Jonas says:

    Certo… entendi.
    É assim, sempre que você quiser que uma página específica faça parte de seu tema, você pode faze-la normalmente, exatamente como você disse q fez, o play.php.

    1. Mova essa página para dentro da sua pasta de tema (wp-content/themes/seutema)

    2. Vá no ínicio desta página e coloque esta Tag:

    3. Ai pelo wp-admin, crie uma página, (Paginas – Adicionar Nova Pagina) , dê um nome para sua página, e na lareral direita, você vai ter um combo box, template ou modelo, escolha lá o template Radio que é o nome que você deu lá no código da sua página.

    4. Feito isso, é só publicar, e usar a url gerada em seu link. (exemplo: http://localhost/?page_id=10), lembrando que quando for colocar em produção, na web, terá que alterar essa URL tb.

  5. webipsum says:

    Valeu, Jonas.
    Sua dica foi formidável.
    Resolvido conforme sua dica acima.
    Um forte abraço e um bom final de semana.

  6. webipsum says:

    Jonas.
    Abusando da sua boa vontade :-), segue uma pergunta:
    Considerando que: o player que estou usando, no pop-up, é o windows media player. Pelo que notei é o que vc está usando na Rádio Justiça.
    – Um visitante com com Mac/Safari (não Windows), consegue ouvir a rádio normalmente?
    – Existe algum outro player web que “toca” wma, tipo aqueles de video (em flash), que “toque” em qualquer browser e S.O.?
    Muito obrigado pela habitual atenção.

Leave a Reply

Your email address will not be published. Required fields are marked *