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.