WordPress

Inserir Lightbox no WordPress com jQuery

Salve salve planeta terra, o tutorial de hoje é pra ensinar a inserir lightbox no WordPress com jQuery, sem usar nenhum plugin do WP pra isso.

Mas pra que isso serve? Imagine a página de interna de um blog onde a imagem do Post tem uma medida de 400X400px e quando você clica sobre ela, o fundo da tela escurece e a imagem é exibida nas medidas 700 X 700px, esse é apenas um simples exemplo, existem N maneiras de se utilizar lightbox no WordPress.

Clique aqui e veja o exemplo.

Como inserir Lightbox no WordPress com jQuery

No exemplo, vou usar o plugin PrettyPhoto do jQuery pra fazer o efeito, o bacana do prettyPhoto é que além de imagens, ele também exibe slideshow de imagens, galeria de imagens, vídeos do Youtube, vídeos do Vimeo, Iframe, Flash e conteúdo HTML. No lightbox também existe um botão de curtir do Facebook além de título da foto, etc, mas chega de enrolação e vamos ao código.

Passo 1: O jQuery

Vamos inserir o jQuery na nossa página e você pode colocar entre as tags < head > < /head > do seu site (forma recomendada). Veja abaixo que estamos usando uma biblioteca versão 1.8 e esta sendo carregada direto da API do Google. Se você já esta usando alguma versão na sua página, ignore essa etapa, caso você precise, veja esse post sobre conflito de jQuery.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Passo 2: add o prettyPhoto

Você pode fazer o download do prettyPhoto do meu GitHub aqui ou pode baixar ele direto do desenvolvedor

Depois de baixar, suba os arquivos para a seguinte pasta no seu WordPress wp-content/themes/seutema/js/prettyPhoto caso essas pastas não existam, crie elas.

Agora vamos abrir o arquivo header.php que fica no seguinte caminho wp-content/themes/seutema/header.php e antes de fechar a tag < /head> adicione o código abaixo

<!-- CHAMANDO O SCRIPT DO PRETTYPHOTO -->
<script type="text/javascript" src="<?php bloginfo(template_url);?>/js/prettyPhoto/js/jquery.prettyPhoto.js"></script>

Passo 3: add o CSS

Ainda no arquivo header.php, adicione o código abaixo para chamar o CSS na sua página.

<link rel="stylesheet" href="<?php bloginfo('template_url');?>/js/prettyPhoto/css/prettyPhoto.css" type="text/css"/>

É isso, agora vamos para o próximo passo, que continua no header.php

Passo 4: O Script

Para inicializar o prettyPhoto, devemos adicionar o script abaixo

<script type="text/javascript" charset="utf-8">
 var $j = jQuery.noConflict();
 // Use jQuery com a variavel $j(...)
 $j(document).ready(function(){
    $j("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Se por um acaso, você for exibir o lightbox no WordPress apenas na página interna de posts ( single.php ) sugiro que faça um if para inserir os códigos acima ( passo 1, 2 e 3 ) e assim, exibir eles somente na página desejada.

Passo 4: A função para add rel=’prettyPhoto’ aos links

Bom pra que a imagem abra com lightbox no WordPress, você precisa adicionar o comando rel=’prettyPhoto’ dentro da sua tag < a href='' > mas esse processo não é funcional, pois imagine que quem vai administrar o blog/site não tenha conhecimento nenhum de HTML, isso já pode se tornar um problema, então tem uma função pra add automaticamente o comando nas imagens que contenham link.

Abra seu arquivo functions.php que fica no seguinte caminho wp-content/themes/seutema/functions.php e adicione o código abaixo no fim do arquivo.

// ADICIONA REL PRETTYPHOTO NOS LINKS DAS IMAGENS DO POST
add_filter('the_content', 'addrel', 12);
function addrel ($content)
{   global $post;
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="prettyPhoto"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

Essa função basicamente, adiciona o rel =’prettyPhoto’ em qualquer link para imagens no conteúdo do post, você também pode adaptar a função para se encaixar a sua necessidade.

É isso, agora automaticamente as imagens com links vão abrir com o efeito ao serem clicadas, insira as imagens dentro do seu conteúdo e pronto, você já tem um lightbox no WordPress.

Nesse post eu apenas mostro as configurações básicas do prettyPhoto, caso você queira personalizar, velocidade da animação, opacidade do background, marcações e aprender como implementar vídeos, IFRAME, etc, sugiro que visite a página do desenvolvedor para maiores informações.

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

Agora você já sabe como inserir lightbox no WordPress com jQuery, o que achou do tutorial? Comente

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado