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.