6
respostas

Como faço um carousel usando o wordpress?

Estou começando um tema do zero no wordpress, e gostaria de fazer um carousel, só que o que encontro nas minhas pesquisas não tem me ajudado. Alguém pode me ajudar nisso?

6 respostas

Oi Luana, tudo bem? Geralmente eu usaria um plugin pra isso. Pra não ficar o código prezo ao tema, mas claro, isso é questão de escolha.

Posso te ajudar. O que você pretende realmente?

Talvez este tutorial seja útil:

https://www.lyrathemes.com/bootstrap-carousel-tutorial/

Wanderson, quero um carousel apenas na minha página inicial. Para isso, fiz uma front-page.php. Tenho uma página estática e outra de post. Não tem dado certo da maneira que te descrevo abaixo, porque uma foto tem ficado embaixo da outra. Não tem saído um carousel. Pode dá uma olhadinha no código?

Front-page.php:

<?php
    $queryTaxonomy = array_key_exists('taxonomy', $_GET);
    if( $queryTaxonomy && $_GET['taxonomy'] == '') {
        wp_redirect( home_url() );
        exit;
    }

    $css_escolhido = 'index';
    require_once('header.php');
?>

<?php $args = array('post_type' => 'banner', 'posts_per_page'=> 8);
        $loop = new WP_QUERY($args);
        if($loop -> have_posts()):
?>


<div id="bannerFotos" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

        <?php while($loop->have_posts()): $loop->the_post(); ?>
        <li data-target="bannerFotos" data-slide-to="<?php echo $n++;?>"</li>
        <?php endwhile;?>

</ol>

<div class = "carousel-inner">
        <?php while($loop->have_posts()): $loop->the_post(); ?>
        <div class="carousel-item <?php if(0==$b) { echo "active";} ?>">
        <img  class = "img-fluid d-block">

        </div>                       
</div>

<div class="carousel-inner" role="listbox">
        <div class= "carousel-active">
         <?php if(has_post_thumbnail()) {the_post_thumbnail();} ?>
         <div class="carousel-caption d-none d-md-block">
                                <?php the_title();?>
                                <?php the_content();?>
        </div>
        </div>


</div>

        <?php endwhile ?>

</div>


<a class="carousel-control-prev" href="#bannerFotos" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#bannerFotos" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

<?php endif; wp_reset_query();?>

<?php get_footer(); ?>

function.php

function wptutspluscreateposttype() { $labels = array( 'name' => ( 'Banners' ), 'singular_name' => ( 'banner' ), 'addnew' => ( 'New banner' ), 'add_new_item' => ( 'Add New banner' ), 'edititem' => ( 'Edit banner' ), 'new_item' => ( 'New banner' ), 'viewitem' => __( 'View banner' ), 'search_items' => ( 'Search banners' ), 'not_found' => ( 'No banners Found' ), 'not_found_in_trash' => ( 'No banners found in Trash' ), ); $args = array( 'labels' => $labels, 'has_archive' => true, 'public' => true, 'hierarchical' => false, 'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail', 'page-attributes' ), 'taxonomies' => array( 'post_tag', 'category'), ); register_post_type( 'banner', $args ); } add_action( 'init', 'wptutsplus_create_post_type' );

function wptutsplus_front_page_banner() {

$query = new WP_Query( array( 'post_type' => 'banner', ));

if ( $query->have_posts() ) { ?>

<?php } wp_reset_postdata();

}

Certo, mas para as fotos ficarem uma abaixo da outra, alguma coisa está faltando, seja um script jquery ou mesmo um arquivo css. Não parece ser problema no seu HTML.

Você está usando bootstrap ou é impressão minha? É aquele carousel que você quer usar?

Você tem certeza que o jQuery e o Bootstrap.js estão sendo carregados corretamente na página?

Oi Luana o Wordpress já facilita tanto essas questões dá uma olhada no vídeo desse link:

Carousel Wordpress

Espero ter ajudado bons estudos.

Oi Luana como ficou essa questão já foi solucionada?