WordPress

Inscreva-se em nosso canal no Youtube Daviwp

Como criar um slide para WordPress utilizando o custom post type

29/09/2012 WordPress (49) comentários

Olá pessoal vamos agora aprender a criar um slide para nosso tema, iremos usar o custom post type do wordpress vamos la?
Basta seguir os passos abaixo para entender como vai criar o seu slide.

01 – Primeiro vamos baixar o exemplo que eu fiz, um teminha so com o slide funcionando clique aqui para baixar

02 – Agora depois de ter baixado o tema instale no seu wordpress, acesse o painel admin do wordpress e veja que no canto esquerdo no seu painel apareceu uma opção slider, ok seu exemplo ja esta instalado.

03 – Agora vamos inserir duas imagens para ver funcionando nosso exemplo de slider para inserir é bem simples basta clicar em adicionar novo agora digite um titulo se sua imagem tiver um lik insira na opção url do banner caso não tem deixa em branco em exemplo digite um pequeno texo para exibir no slide agora no lado direito em imagem destacada vc clica em configurar imagem destacada ao abrir clique em selecionar arquivo escolha uma foto dentro do seu computador depois de ter escolhido mais abaixo clique em usar como imagem destacada pronto sua imagem foi inserida so fechar agora clique no botão azul do wordpress plublicar feito isso faça novamente para inserir outra imagem para ver o slider funcionando ok agora acesse o tema e vai ver as duas imagens funcionando com o texto inserido é isso ai galera agora vamos ver como foi feito.

Como foi feito

Bom esse slide foi desenvolvido da seguinte forma
criamos um arquivo functions.php dentro dele criamos um custom post type como pode ver o codigo abaixo.

<?php 
 
// Habilitando o uso das imagens destacadas ou post thumbnails
if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    add_image_size('banner-slider', 570, 270, true);
}
 
//Custom post Slide
 
add_action( 'init', 'QDSliderInit' );
function QDSliderInit() { global $qd_Slider; $qd_Slider = new QDSlider(); }
 
class QDSlider {
 
				function QDSlider() {
				register_post_type( 'slider',
					array(
						'label' => __( 'Slider' ),
						'singular_label' => __( 'Slider' ),
						'public' => true,
						'menu_position' => 5,
						'query_var' => true,
						'supports' => array('title','thumbnail','excerpt'),
						'rewrite' => array('slug'=>'slider')
						//'taxonomies' => array('post_tag')
					)
				);
 
                add_action("admin_init", array(&$this, "admin_init"));
                add_action('save_post', array(&$this, 'save_post_data'));
 
                // Add custom post navigation columns
                add_filter("manage_edit-Slider_columns", array(&$this, "nav_columns"));
                add_action("manage_posts_custom_column", array(&$this, "custom_nav_columns"));
 
        }
 
        function admin_init(){
                add_meta_box("slider-url-meta", "URL do Banner", array(&$this, "slider_url_meta_box"), "slider", "normal", "high");
                add_meta_box("slider-target-meta", "Modo de abertura do link", array(&$this, "slider_target_meta_box"), "slider", "normal", "high");
        }
 
        function slider_url_meta_box() {
            global $post;
            $meta_qd_slider_url = get_post_meta($post->ID, 'qd_slider_url', true);
 
            // Verify
            echo'<input type="hidden" name="qd_slider_url_noncename" id="qd_slider_url_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
 
            // Fields entry   
            echo '<p><label>URL (https://):<br />';
            echo '<input type="text" name="qd_slider_url" size="100" value="'.$meta_qd_slider_url.'" />';
        }            
 
        function slider_target_meta_box() {
           global $post;
            $meta_qd_slider_target = get_post_meta($post->ID, 'qd_slider_target', true);
 
            // Verify
            echo'<input type="hidden" name="qd_slider_target_noncename" id="qd_slider_target_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />'; 
 
            //Field entry
            echo '<select name="qd_slider_target" >';
            if($meta_qd_slider_target == 0){ echo '<option selected="selected" value="0">Abrir na mesma janela</option>';  } else { echo '<option value="0">Abrir na mesma janela</option>'; }
            if($meta_qd_slider_target == 1){ echo '<option selected="selected" value="1">Abrir em nova janela</option>';  } else { echo '<option value="1">Abrir em nova janela</option>'; }
            echo '</select>';
        }
 
        function save_post_data( $post_id ) {
                global $post;
 
                // Verify slider url
                if ( !wp_verify_nonce( $_POST["qd_slider_url_noncename"], plugin_basename(__FILE__) )) {
                        return $post_id;
                }
                if ( 'page' == $_POST['post_type'] ) {
                        if ( !current_user_can( 'edit_page', $post_id ))
                                return $post_id;
                } else {
                        if ( !current_user_can( 'edit_post', $post_id ))
                                return $post_id;
                }
 
                $data = $_POST['qd_slider_url'];                    
                // New, Update, and Delete
                if(get_post_meta($post_id, 'qd_slider_url') == "") 
                        add_post_meta($post_id, 'qd_slider_url', $data, true);
                elseif($data != get_post_meta($post_id, 'qd_slider_url', true))
                        update_post_meta($post_id, 'qd_slider_url', $data); 
                elseif($data == "")
                        delete_post_meta($post_id, 'qd_slider_url', get_post_meta($post_id, 'qd_slider_url', true));                            
 
 
                // Verify slider target
                if ( !wp_verify_nonce( $_POST["qd_slider_target_noncename"], plugin_basename(__FILE__) )) {
                        return $post_id;
                }
                if ( 'page' == $_POST['post_type'] ) {
                        if ( !current_user_can( 'edit_page', $post_id ))
                                return $post_id;
                } else {
                        if ( !current_user_can( 'edit_post', $post_id ))
                                return $post_id;
                }
 
                $data = $_POST['qd_slider_target'];                    
                // New, Update, and Delete
                if(get_post_meta($post_id, 'qd_slider_target') == "") 
                        add_post_meta($post_id, 'qd_slider_target', $data, true);
                elseif($data != get_post_meta($post_id, 'qd_slider_target', true))
                        update_post_meta($post_id, 'qd_slider_target', $data); 
                elseif($data == "")
                        delete_post_meta($post_id, 'qd_slider_target', get_post_meta($post_id, 'qd_slider_target', true));        
        }
 
        function nav_columns($columns) {
                $columns = array(
                        "cb" => "<input type=\"checkbox\" />",
                        "title" => "T&iacute;tulo do slider",
                        "slider_url" => "URL",
                        "slider_image" => "Imagem",
                );
 
                return $columns;
        }
 
        function custom_nav_columns($column) {
                global $post;
                switch ($column) {
                        case "slider_url":
                                $meta = get_post_custom();
                                echo $meta["qd_slider_url"][0];
                                break;
                        case "slider_image":
                                echo '<style type="text/css">.slider-img img{width:350px; height:auto;}</style>';
                                echo '<span class="slider-img">';
                                the_post_thumbnail('medium');
                                echo '</span>';
                                break;
                }
        }
 
}
// End Slider Panel

05 – E para chamar a função, listando as imagens na home veja o codigo abaixo.

<?php
						$loop = new WP_Query( array( 'post_type' => 'Slider','showposts' => 10 ) );
						while ( $loop->have_posts() ) : $loop->the_post();
						$custom = get_post_custom($post->ID);  
						$qd_slider_url = $custom["qd_slider_url"][0];
						$qd_slider_target = $custom["qd_slider_target"][0];
						if($qd_slider_target == 0){ $qd_slider_target = "_top";}
						if($qd_slider_target == 1){ $qd_slider_target = "_blank";}
                    ?>
                        <div class="slide">
<a href="<?php echo $qd_slider_url; ?>" target="<?php echo $qd_slider_target; ?>">
<?php the_post_thumbnail('banner_home'); ?></a>
                            <div class="caption" style="bottom:0">
                                <p><?php the_excerpt();?></p>
                            </div>
                        </div>
                    <?php endwhile; ?>

06 – E para finalizar nosso tutorial você percebeu que qualquer tamanho de imagem que você coloca ela redimenciona para o tamanho certo do slide, para quem não sabe esta se perguntando como isso esta acontecendo simples dentro do nosso functions.php eu coloquei uma função size veja o codigo abaixo, veja que tem um add_image_size(‘banner-slider’, 570, 270, true); isso que esta redimencionando nossa imagem mas se você vai fazer um slide maior ou menor que isso so alterar o 570 e o 270 esse nome banner-slider é a referencia que damos para nosso codigo la na home que quando tiver imagem eu quero que ela fica do tamanho de 570px por 270px ok pessoal?

// Habilitando o uso das imagens destacadas ou post thumbnails
if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
	add_image_size('banner-slider', 570, 270, true);
}

Fim é isso ai pessoal espero que curta grande abraço até a proxima!
Post Daviwp

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.

  • joel

    Ola, nao consegui instalar o slade tentei pelo painel do wordpress deu erro, instalei por ftp mas nao apareceu no wordpress, tem ideia de que aconteceu?…. grato

    • Davi

      Olá Joel, você tem que baixar esse tema aqui no site, depois colocar dentro da sua pasta themes do wordpress, feito isso acesse o seu painel do wordpress, localiza no menu esquerdo, vai até aparencia, depois clique em themas, e procure o tema que vc acabou de colocar na pasta themes do wordpress, achou o thema? clique em ativar pronto! agora siga os passos no post para inserir imagem e ver o slider funcionando. abraço!

  • mira matias

    PERFEITO… uma dúvida se eu quiser para o slider ficar pegando toda tela tipo 1920 px (largura) ele vai centralizar automaticamente ou precisa de um css?

    • Davi

      Isso, pode mexer no css do slider e no size do codigo fazendo ele gerar uma imagem relativo ao tamanho da sua tela .

  • LeczSLE

    Parabéns pela postagem, muito boa. E o blog é sensacional. Estou aprendendo muito com seus conhecimentos, estou começando agora, mas espero ficar tão bom quanto você no assunto. Gostaria de saber se existe alguma tag que habilite a alteração das imagens no header, sem precisar alterar o CSS manualmente.

    • Davi

      Bom dia LeczSLE, espero sempre poder ajudar! tem uma funcão que coloca no functions.php, você pode sempre alterar a cor ou imagem do seu header sem mexer no css. depois vou da uma procurada aqui parece que ja fiz isso em alguns sites, achando te mando.

  • Olá muito legal o script, saberia me dizer se tem como colocar uma data de inicio e uma de fim nesse slider? Exemplo o slide 1 aparece no dia 12/12/2012 e desaparece no dia 22/12/2012
    o slider 2 entra no dia 12/12/2012 e desaparece no dia 18/12/2012 e assim por diante.

    • Davi

      Olá Luiz, tem como fazer nesse script não da

  • tiagoweb

    parabéns manolo
    pela sua dedicação e por incentivar as pessoa q estão iniciando no wp.
    vc é o cara.

    • daviwp

      Valeu brother!

  • Parabéns Davi, seus posts são fantásticos, parabéns pelo trabalho. Uma solução muito boa, facilita a vida de muita gente. Um grande abraço.

    • Davi

      Obrigado brother! Abraço!

  • Gilvan Medeiros

    Ótimo slide, bem interessante mesmo, parabéns.
    Teria como instalar/adaptar ele em outro tema?

    • daviwp

      Olá Gilvan, Sim so pegar os códigos e levar para o tema que desejar.

      • Gilvan Medeiros

        Estou engatinhando ainda no wordpresss, não estou conseguindo colocar os códigos no functions e index.

        • daviwp

          Olá Gilvan o primeiro tópico é o código que deve ser inserido no arquivo functions.php e o tópico 5 é o código do seu index.php ou paginas page.php category.php onde quiser saco?

  • daviwp

    Você que que colocar a chamada que esta na home dentro da template page que vc quer por exemplo page.php coloco o código dentro dessa page ele vai exibir onde for page, se for algo especifico coloco tipo, page-sobre.php e por ai vai.

  • Renan Lara

    Faltou só o botão de curtir a sua publicação!
    Muito bom cara, parabéns, isso ajuda muuito! 😉

    • daviwp

      Mano tem em dois lugares abaixo da data do post e no rodapé do post tb da uma conferia e compartilha ai pra nos abraço!

  • Renan Lara

    Outra coisa interessante…
    Como eu poderia utilizar esse código só que fazendo dele um plugin? O CPT é agarrado ao theme e com o plugin eu poderia instala-lo em qualquer outro WP sem precisar fazer o CPT.

    • daviwp

      Olá Renan, bem transformar ele em um plugin tem algumas mudanças fica mais difícil um pouco mas nada impossível futuramente posso fazer um post transformando ele em plugin não sei hehe o tempo esta curto! rs

  • Gilberto Medeiros

    Não funcionou, pois a imagem não está aparecendo, levando em conta que vc mencionou que a imagem é auto ajustada, eu publiquei 2 imagens grandes, mas elas não aparece no slide, o que pode estar acontecendo, estou usando em localhost.

    • daviwp

      Olá Gilberto obrigado pelo contato,
      Bem pode ser algo errado que esta acontecendo ao copiar ou editar o código por ai, para a img reajustar automático você precisa trocar o nome banner_home para banner-slider

      • Gilberto Medeiros

        Show eu não mudei nada no seu exemplo, só publiquei a imagem tamanho grande, mas seguindo o que vc orientou eu publiquei outras 2 imagens menores e deu certo, parabéns pelo trabalho desenvolvido!!!
        Estou levando surra em implantar um menu dentro do tema, pois estou partindo do zero, vc tem alguma publicação falando de menu?

  • Francisco

    David,
    Talvez vc possa me ajudar. Estou usando um tema chamado Viper. Ele tem a opção de Slide Show, mas as imagens não estão centralizadas na altura dentro da célula designada. Isso ocorre no Desktop, já no iPad, por exemplo, está correto.
    Não sei onde alterar? Você pode me ajudar.
    Grato
    Francisco

    • daviwp

      Olá Francisco, me mande um email.

  • daviwp

    Olá Fabrício, dentro da query $loop = new WP_Query( array( ‘post_type’ => ‘Slider’,’showposts’ => 10,’menu_order’, ‘rand’ ) );

    veja que inserir no loop ‘menu_order’, ‘rand’ isso vai deixar seu slider randômico

  • Silvio

    Olá boa tarde a todos, Davi como faço pra colocar um meta box com a opção de upload de imagens? já vi vários tutoriais, mas alguns dão erro na hora de baixar as imagens.

  • Olá Pessoal! Davi, primeiramente parabéns pelo site…show de bola.
    Então, estou criando um site, vamos dizer caseiro, pois não tenho conhecimentos avançados…
    Comprei um templates e na versão demo tem um slider fixo na pagina inicial, porém eu não consigo colocar esse modelo de slider na minha pagina inicial.
    Se vc entrar no meu site http://www.toaldoassados.com.br , vc vai ver que até tem o espaço, porém não faço idéia de como fazer isso…
    Se alguém puder me ajudar fico feliz.
    Obrigado!
    Este link é o site demo
    https://www.aivahthemes.com/victoria/

    • daviwp

      Olá Rosalice,
      esse espaço no seu tema é para uma opção de slider maior, no seu caso esta habilitado o slider menor abaixo, se não for utilizar o slider grande, acesse o admin do seu tema verifica por featured_slider ou slider tenta procurar algo relacionado a desabilitar slider full, caso não consiga pode enviar os dados de acesso do seu admin no meu email que olho pra você segue [email protected]

  • daviwp

    Olá Ageu,
    Manda o link pra mim dar uma olhada posso te ajudar sim!

    • Ageu Rodrigues de Oliveira

      offsetarq.com

  • daviwp

    Funciona em qualquer tema

  • Fabrício Raimundi

    Boa tarde Davi, estou usando seu tutorial em outro site novamente. Nesse surgiu mais uma dúvida, como adicionar a classe “img-responsive” do bootstrap na tag img? Aguardo e obrigado!

    • daviwp

      Olá Fabrício, você pode utilizar esse script
      $( “.slider img” ).addClass( “img-responsive” );

    • daviwp

      Coloque o Script no seu footer.php dentro das tags não é no fuctions.php

  • daviwp

    Código atualizado para nova versão do wp 4.0

  • daviwp

    Olá Diego, sim, você precisa usar um script que possibilita fazer isso, por exemplo o bxslider
    veja https://bxslider.com/examples/thumbnail-pager-2

    • Fox Diego

      Valeu meu rei!

    • Fox Diego

      Obrigado pela resposta, Davi. Outra duvida, como é possível fazer que o slider funcione de forma automática? No momento ele só corre se o usuário clicar nas setas.

      Obrigado

      • daviwp

        Olá Diego,

        Vai depender do script de slide que for utilizar, no exemplo que citei acima o bxslider https://bxslider.com/
        nesse caso só utilizar um parâmetro dele mesmo veja exemplo.

        $(‘.bxslider’).bxSlider({
        auto: true
        });

  • Fabrício Raimundi

    Opa Davi, blza?

    Cara, já usei esse teu código em alguns sites, muito bom! Estou precisando agora utilizar o Custom Post Type para alguns slides porém com categorias, para direcionar os slides de determinada categoria para sua área específica. Qual a forma mais simples de fazer isso com base nesse seu código?

    Aguardo. Abraço!

    • daviwp

      Olá Fabricio,

      Sim tem como, você precisa registrar a taxonomy
      por aqui fica complicado te mostrar, entra em contato comigo no [email protected] que te explico no gtalk.

      Abs!

  • daviwp

    Olá Carlos, mim add no Gtalk que batemos um papo sobre sua duvida, [email protected]

  • Henrique Sousa

    como faço para pegar a url de cada imagem… pois meu slide já está pronto ai só quero inserir as urls das imagens inseridas no admin slider

  • daviwp

    Aline.

    Esse slider não funciona por categoria.
    Teria que ser feito de outra forma, posso te mostrar entre em contato [email protected]

    Abraço.