Suporte » Desenvolvendo com WordPress » Criar galeria fora dos posts

  • Olá, amigos do fórum WordPress
    Tenho uma dúvida e preciso da ajuda de vocês.
    Eu preciso criar uma galeria de imagens que não fique dentro do post.
    Quero que o cliente adicione mais imagens com links e automaticamente cada uma delas vá parar em uma menu carrossel que fiz com Jquery.
    Esse menu está em uma parte do template, fora do loop.

    Obrigado, amigos!

Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • Crie um custom post com nome “Post Slide” e dê suporte ao que desejar que apareça em seu slide.

    Depois faça um WP_query para recuperar esses posts e exibir em forma de slide.

    Se deseja usar só imagens no slide dê suporte a miniaturas e remova o editor para que ele não possa escrever, já que no slide não terá texto.

    É uma das formas que acho mais elegante e simples para o usuário.
    A forma de criar um item para o slide será a mesma de criar um novo post, coisa que ele já deve estar acostumado, ou se for iniciante no Wp será um das primeiras coisas que ele vai aprender.

    Criador do tópico Fernando Acosta

    (@amgnando)

    Amigo, não entendi muito bem como iria funcionar a dinâmica dos códigos. Teria como me ajudar? Obrigado

    Bom Fernando vou usar uma base que tenho aqui pronta, mas não se iluda achando que irá copiar e colar e tudo está pronto, mas valos lá.

    Tudo que eu colocar copiar vc pode copiar e colar no seu código que não irá estragar nada, no máximo é só vc deletar que tudo volta ao normal.

    Primeiro vamos criar um Post_type (Post personalizado), que será o post slide e tem exclusivamente essa função de servir como alimentador de um slide.

    Antes que venha a pergunta a mente, sim, é possivel converter este post personalizado depois para um post normal através de plugins específicos.

    Copie para o function

    //Cria post Custom Chamado de Post Slide.
    add_action( 'init', 'zin_create_post_type' );
    function zin_create_post_type() {
      register_post_type( 'post_slide',
        array(
          'labels' => array(
            'name' => 'Post Slides',
            'singular_name' => 'Post Slide',
    		'add_new' => 'Novo Post Slide',
    		'add_new_item' => 'Adicionar Novo Post Slide',
    		'edit_item' => 'Editar Post Slide',
    		'new_item' => 'Novo Post Slide'
          ),
          'public' => true,
    	  'menu_position' => 5,
    	  'supports' => array( 'title' , 'editor' , 'sticky' , 'excerpt' , 'comments' ),
    	  'exclude_from_search' => true,
    	  'taxonomies' => array( 'category' , 'post_tag' ),
          'rewrite' => array('slug' => 'destaque')
        )
      );
    }

    Agora vc já pode ver um menu “post Slide” logo abaixo do menu post em sua administração.

    A forma de criar o post slide é a mesma de criar um post normal.
    Eu adicionei a capacidade de criar categorias ou tags para estes posts, mas elas não são usadas para o slide, servem exlusivamente para organização do administrador e futuramente caso venha a converter em um post normal.

    Criando posts slides eles não irão aparecer em nenhum lugar a não ser que vc o chame, então agora vamos criar um loop para chamar estes posts slide e criar nossa Slide com eles.

    Crie um arquivo chamado slide.php e copie este código para ele e salve o arquivo

    <?php	$loop = new WP_Query( array( 'post_type' => 'post_slide', 'posts_per_page' => 6, 'orderby' => 'date', 'order' => 'ASC') );
    if ($loop->have_posts()): //Se existe posts Side.?>
    
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/slide_custom.js"></script>
    
    <div id="slide-center" class="spliter-main">
    	<div id="slide-center-home">
    		<ul id="slideshow">
    			<?php	while ( $loop->have_posts() ) : $loop->the_post(); //Primeiro while loop em busca de posts Slide. ?>
    
    			<?php if(the_thumb_imagem()) { //Verifica se o post possui imagem, se não tiver não exibe o post no Slide. ?>
    				<li>
    					<div class="post-slide">
    						<h2><?php the_title(); ?></h2>
    						<p class="slide-content"><?php the_content_limite(240); ?></p>
    						<a  class="more-slide" href="<?php the_permalink() ?>" title="Veja mais detalhes de <?php the_title(); ?>">Leia Mais</a>
    						<img class="thumb-slide" src="<?php echo get_template_directory_uri(); ?>/scripts/timthumb.php?src=<?php echo the_thumb_imagem('full');?>&w=560&h=210&zc=1" alt="<?php the_title(); ?>"/>
    					</div>
    				</li>
    			<?php } ?>
    			<?php endwhile; //Fim do Primeiro loop. ?>
    		</ul>
    
    		<ul id="slide-nav">
    			<?php	while ( $loop->have_posts() ) : $loop->the_post(); //Novo while loop para gerar as miniaturas do Slide. ?>
    
    				<?php if(the_thumb_imagem()) { //Verifica se o post possui imagem, se não tiver não exibe a miniatura do Slide. ?>
    					<li><a href="#"><img class="thumb-nav" src="<?php echo get_template_directory_uri(); ?>/scripts/timthumb.php?src=<?php echo the_thumb_imagem('thumbnail');?>&w=108&h=50&zc=1" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"/></a></li>
    				<?php } ?>
    
    			<?php endwhile; //fim do segundo loop. ?>
    		</ul>
    
    	</div><!--#slide-center-home-->
    </div><!--#slide-center-->
    <?php else: //Se não existe posts para o Slide.?>
    <div id="slide-center-no-post" class="spliter-main"></div>
    <?php endif; ?>

    Agora já temos o loop e vc pode adicionar este loop em qualquer lugar do tema que deseja ter seu slide com
    get_template_part('slide');

    Está pronto a parte do php, agora basta adicionar os códigos jquery e personalizar com css

    Vale lembrar que eu uso uma função para ter as imagens nos post, em seu caso basta alterar para ter as imagens via thumbnails, recurso usado atualmente pela maioria dos temas.

    E aqui um exemplo de como pode ficar
    http://subefotos.com/ver/?30a4e1ebeb45b1b436124dfbd4dcf49ao.jpg

Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • O tópico ‘Criar galeria fora dos posts’ está fechado para novas respostas.