WordPress

Inscreva-se em nosso canal no Youtube Daviwp

Utilizando fancybox na imagem inserida no post do seu site WordPress

24/05/2013 WordPress (7) comentários

Olá Pessoal, mais um post legal, simples! mas pode ser muito usado no nosso dia a dia,
este método é muito legal porque só vai aplicar o nosso efeito fancybox na imagem inserida dentro do nosso post,
mesmo você tendo uma imagem um botão que não foi inserido no post ele não vai ter o efeito legal né?
então vamos lá,

01 – Primeiro baixe os script do fancybox no site Fancybox

02 – Agora descompacta o arquivo baixado do site acima, dentro dele copia a pasta source e cole no seu tema wordpress

03 – Depois de ter colado a pasta source no seu tema cole os códigos abaixo no seu header.php veja que temos dois código, um link css, e o outro o script do fancybox
veja também o caminho para seu tema você pode utilizar o código bloginfo(‘template_directory’) para dar o caminho do seu tema.

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

04 – Agora já estamos quase do fim, vamos pegar nossa chamada para executar nossa função do fancybox faça o mesmo cole esse código ou no seu header.php ou footer.php mais indicado no footer

 
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

05 – Agora vem o segredo porque só na imagem do post vai ser aplicado o efeito fancybox, bem a magica esta nesse código abaixo hehehe isso mesmo!
vamos pegar esse código e colar no seu arquivo functions.php, esse código vai adicionar a class fancybox dentro da nossa href da img do post fazendo assim nosso efeito funcionar só nas img do post
massa né?

 
add_filter('the_content', 'add_gallery_id_rel');
function add_gallery_id_rel($link) {
	global $post;
	return str_replace('<a href', '<a class="fancybox" rel="gallery1" href', $link);
}

Bem pessoal é isso, espero que gostem! qualquer duvida manda email, estou também no facebook e twitter
um abraço até o próximo.

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

  • muito bom!

  • daviwp

    Olá Aline, coloque um if na chamada de script do seu fancybox, por exemplo if(is_page(’20’):?> significa que o script vai execultar so na pagina do ID 20 ok?

  • Fernando Andrade

    Legal,
    Mas assim ele vai colocar a class do fancybox em todos os links do post, inclusive nos que são são imagens.

    • daviwp

      Olá Fernando, isso mesmo ele pega todo o the_content do site, só o que for inserido dentro do editor, os links que já possui links esternos não serão afetados. irei atualizar esse post com opção so para galeria do wp.

  • daviwp

    Olá Wanderson, este metodo foi feito para funcionar com img inseridas dentro do post, para galeria, você pode utilizar um jQuery add class que adiciona a class do fancybox veja como ficaria, ignore esse tutorial, na parte de colocar o código no functions, acrescenta esse código abaixo no seu footer.php, importante saber a class da sua galeria.

    $( “.galerry img” ).addClass( “fancybox” );

  • Denilton Filho

    Parabéns, ótimo Post

    • daviwp

      Olá Danilton.
      Obrigado!