Como criar um slide para wordpress utilizando o custom post type
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")); // If you want to use a custom template name add_action("template_redirect", array(&$this, 'template_redirect')); } 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 (http://):<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í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; } } // If you want to use a custom template name you can use template_redirect() // WP defaults to single-"custom-post-name".php function template_redirect() { global $wp; if ($wp->query_vars["post_type"] == "slider") { include(TEMPLATEPATH . "/single-slider.php"); die(); } } } // 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
