Utilizando template personalizado do Nextgen

Olá, pessoal.

Vamos aprender um pouco sobre template personalizado do plugin nextgen gallery. Com ele, você consegue desenvolver a galeria que quiser, mas para você dominar sua galeria é preciso um conhecimento em PHP – não precisa ser o expert no assunto, mas saber utilizar o básico. Neste artigo, vamos desenvolver um carousel alimentado pelo nextgen pegando todas imagens dos álbuns ou galeria criada.

Tópicos

01 – Primeiro vamos baixar nosso tema já com os scripts do nosso carousel clique aqui.

02 – Instale o plugin NextGEN Gallery no seu WordPress, acesse plugins, adicionar novo na busca, coloque o nome do plugin aparecendo o mesmo nome, clique em instalar, em seguida ative, e pronto!

03 – Agora, voltando para o tema, pegue-o e coloque-o no diretório themas do WordPress. Feito isso, volte ao painel do WordPress, acesse o wp-admin -> aparência e ative o nosso tema. Pronto, está instalado.

04 – Agora vamos preparar nosso template do nextgen gallery. Vamos criar um arquivo chamado gallery-tutorial.php e salvá-lo no diretório wp-content – > plugins -> nextgen-gallery -> view.

05 – Inseri o código abaixo no nosso arquivo gallery-tutorial.php. Esse código já está com os loops necessários para chamar nossas imagens do nextgen. Esse html é o mesmo utilizado na nossa index.php do tema; repare as funções.

<?php
/**
Template personalizado desenvolvido por daviwp
post do site http://daviwp.com
**/
?>
 <ul id="mycarousel" class="jcarousel-skin-tango">
    <?php foreach ( $images as $image ) : ?>
        <li>
        <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
	<?php if ( !$image->hidden ) { ?>
	<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
	<?php } ?>
	</a>
        </li>
    <?php endforeach; ?>    
    </ul>

06 – Agora abra nossa index.php e remova a ul id mycarousel da linha 29 a 39 do nosso tema.

07 – com a nossa index.php aberta, onde foi removido ficou assim: div wrap e div galeria. Dentro da div galeria, inseri o código abaixo, nosso shortcode, chamando nosso template gallery-tutorial.php prev. Explicação: nossa galeria é randômica, vai exibir um máximo de 20 imagens utilizando o template tutorial. Dessa forma, qualquer galeria ou álbum vai pegar as imagens recentes.

<?php echo do_shortcode('[random max=20 template=tutorial]'); ?>

Bom, galera, é isso, espero que todos gostem. Vou dar uma explicação geral do nosso código: peguei um script jquery carousel, criei um tema básico utilizando-o, peguei a ul principal do html, inseri no template personalizado do nextgen, depois inseri o shortcode chamando o template na index.php. No template personalizado, fiz um loop em cima da tag li, dizendo que quando tiver img, ele sempre tem que repetir, mas obedecendo o nosso parâmetro dentro do shortcode max=20, que exibe quantas imagens quisermos – basta aumentar ou diminuir.

Baixar o theme

Abraço a todo até a próxima.