Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Slider para Wordpress

Oi, eu estou vendo se consigo criar um slider simples ou Booststrap, mas queria saber um jeito mais simples de fazer isso, porque eu só preciso que tenha uma área no admin que cadastra as imagens que serão trocadas toda semana. Preciso criar plugin ou tem como fazer com custom post type? Eu não queria instalar plugins, porque o administrador, não quer.

7 respostas
solução!

Olá Gisele,

Você pode sim fazer isso com um custom post type.

Exemplo de criação de um custom post type (com apenas título e imagem):

// Arquivo functions.php
function slide_post_type()
{
    $labels = array(
        'name' => 'Slide Principal',
        'singular_name' => 'Slide',
        'menu_name' => 'Slide',
        'name_admin_bar' => 'Slide',
        'archives' => 'Slide',
        'add_new_item' => 'Adicionar novo Slide',
    );

    $args = array(
        'label' => 'Slide',
        'description' => 'Slideshow da página inicial',
        'labels' => $labels,
        'supports' => array('title', 'thumbnail'),
        'taxonomies' => array(),
        'hierarchical' => false,
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'menu_position' => 5,
        'menu_icon' => 'dashicons-format-gallery',
        'show_in_admin_bar' => true,
        'show_in_nav_menus' => true,
        'can_export' => true,
        'has_archive' => false,
        'exclude_from_search' => true,
        'publicly_queryable' => true,
        'capability_type' => 'post',
        'show_in_rest' => true,
    );

    register_post_type('slide', $args);
}

add_action( 'init', 'slide_post_type' );

E então para pegar cada slide e mostrar você pode usar um loop personalizado:

// Nome do seu custom post type
$post_type = 'slide';
// Número de slides que você quer buscar (-1 para buscar todos)
$num_slides = 5;

$loop = new WP_Query( array( 'post_type' => $post_type, 'posts_per_page' => $num_slides ) );

if( $loop->have_posts() ){
    while( $loop->have_posts() ) {
        $loop->the_post();

        // url da imagem do slide        
        $imagem = get_the_post_thumbnail_url(null, 'full', '');
    }
}

Você vai então editar essa parte do loop para criar o seu slide, seja com bootstrap ou outra biblioteca.

Espero ter ajudado, qualquer dúvida pode perguntar.

Muito obrigada, eu achei um modelo no código do tema que estou utilizando, demorou um pouco para entender o funcionamento, porque a pessoa utilizou um código de slides jquery e que era dependendente de outros scripts, então eu fiz as chamadas e funcionou, a diferença é que eu tive que criar um custom post type pelo admin, não entendi porque ele não adicionou direto.

Se fosse bootstrap, onde entra a parte do HTML? Tem várias divs o slider do Bootstrap, entre navegação e imagens. Tenho outra dúvida, mas vou abrir outra dúvida.

Olá Gisele, desculpa a demora.

O html do seu slide seria junto do último pedaço de código que eu mandei, onde está o WP_Query.

Abaixo tem um código de exemplo:

<div class="slides">

    <?php
    // Nome do seu custom post type
    $post_type = 'slide';
    // Número de slides que você quer buscar (-1 para buscar todos)
    $num_slides = 5;

    $loop = new WP_Query(array('post_type' => $post_type, 'posts_per_page' => $num_slides));
    $slides = [];

    if ($loop->have_posts()) :
        while ($loop->have_posts()) {
            $loop->the_post();

            // url da imagem do slide
            $imagem = get_the_post_thumbnail_url(null, 'full', '');
            // Salva cada slide em um array
            array_push($slides, $imagem);
        }
    ?>

        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <!-- Passa pelo array com os slides gerando a div de cada um -->
                <?php foreach ($slides as $key => $slide) : ?>
                    <!-- Esse if é para adicionar a classe 'active' apenas no primeiro slide -->
                    <div class="carousel-item<?php if ($key == 0) echo ' active'; ?>">
                        <img class="d-block w-100" src="<?php echo $slide; ?>" alt="First slide">
                    </div>
                <?php endforeach; ?>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Anterior</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Próximo</span>
            </a>
        </div>

    <?php endif; ?>

</div>

Espero que esse código ajude, qualquer dúvida pode perguntar.

Obrigada. uma dúvida nesse foreach, outra pessoa me ajudou a refatorar o código de listar playlists é obrigatório fechar com :

<?php endforeach; ?>

?

Eu abri outro tópico, porque queria ajuda com PHP:

https://cursos.alura.com.br/forum/topico-refatoracao-de-codigo-php-90586

Sim, nesse caso o endforeach é obrigatório.

Normalmente você usa com as chaves {}, mas existe essa segunda opção com o endforeach.

// Opção 1
foreach ($array as $item) {
    // Código...
}

// Opção 2
foreach ($array as $item) :
    // Código...
endforeach;

Resumindo, são apenas duas formas de escrever o mesmo código, o resultado é o mesmo

Obrigada, pode me ajudar no outro tópico, tem algo errado e eu pensei que fosse o foreach, mas não é, o problema é com o loop, eu tinha um array com diversos dados e agora tenho um array de arrays e não consigo extrair um array por vez.

https://cursos.alura.com.br/forum/topico-refatoracao-de-codigo-php-90586