WordPress

Inscreva-se em nosso canal no Youtube Daviwp

Utilizando Template Personalizado do Nextgen

05/05/2012 WordPress (9) comentários

Ola 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, nesse post 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 pronto!

03 – Agora voltando para o tema pegue ele coloque 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 esta instalado.

04 – Agora vamos preparar nosso template do nextgen gallery vamos criar um arquivo chamado gallery-tutorial.php salva 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á esta com os loop 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 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 ok? 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 ele vai pegar as img 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 o que fizemos foi, peguei um script jquery carousel criei um tema básico utilizando ele peguei a ul principal do html inserir no template personalizado do nextgen depois inserir o shortcode chamando o template na index.php o template personalizado fiz um loop em cima da tag li dizendo quando tiver img ele sempre repetir mas obedecendo o nosso parâmetro dentro do shortcode max=20 que exibe 20 imagens quantas imagens quiser só aumentar ou diminuir.

Baixar o thema

Abraço a todo até aproxima.

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.