Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Imprimir Taxonomia em single.php

Referente ao curso Wordpress: Criação de um tema do zero, no capítulo Taxonomia e atividade Taxonomia

por Andre Beserra
| 104.6k xp | 62 posts

Olá pessoal, tudo bem?

Para testar meus conhecimentos, no post_type "Imoveis", eu crie uma taxonomia de galeria de imagens para que na single.php seja possível incluir um slide passando as imagens do imóvel.

Entendo que para criar o algoritmo que puxa essas informações para o slider show que incluirei na single.php, preciso buscar dentro de um array que chamei de galeria_de_imagens as fotos cadastradas dos imóveis.

Entretanto, não estou sabendo fazer que, meu slider puxe uma foto por vez. Sei que essa minha dificuldade não é influencia da Biblioteca do WordPress, e sim de lógica, mas acredito que algum aluno aqui do Alura possa ter a mesma dúvida que eu futuramente.

Segue código feito por mim baseado no carrossel do Boostrap e puxando a taxonomia que esta jogando uma imagem em baixo da outra na single.php:

<div class="carousel-item" align="center">
                <?php
                    $galeria_de_imagens = get_field('galeria_de_imagens');
                    foreach($galeria_de_imagens as $galeria){
                ?>
                <img src="<?php echo $galeria['url']; ?>" class="img-responsive center-block" alt="Imagem do Cronograma">
                <div class="carousel-caption d-none d-md-block">
                    <h3><?php echo $galeria['alt']; ?></h3>
                    <p><?php the_field('subtitulo'); ?></p>
                </div>
                <?php
                    }
                ?>
            </div>

Desde já, grato!

8 respostas
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Oi Andre, tudo bem? Deixa eu resumi o problema pra ver se entendi bem: O código funciona, mas o slide apresenta todas as imagens de uma vez, ao invés de uma por vez, é isso?

por Andre Beserra
| 104.6k xp | 62 posts

Isso mesmo Wanderson!

por Daniel Omnion
| 1014.4k xp | 1150 posts

Pelo que eu entendi olhando a documentação

https://v4-alpha.getbootstrap.com/components/carousel/

Cada elemento com a class carrousel-item se refere ao conteúdo de um slide.

No caso do código postado, o loop "for" está dentro do item. Por isso que esta imprimindo tudo de uma vez.

Creio que o seguinte ajuste deve resolver o problema:

<?php
$galeria_de_imagens = get_field('galeria_de_imagens');
foreach($galeria_de_imagens as $galeria){
?>
<div class="carousel-item" align="center">
     <img src="<?php echo $galeria['url']; ?>" class="img-responsive center-block" alt="Imagem do Cronograma">
     <div class="carousel-caption d-none d-md-block">
         <h3><?php echo $galeria['alt']; ?></h3>
         <p><?php the_field('subtitulo'); ?></p>
     </div>
</div>
<?php
}
?>
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Puxa vida, cheguei tarde! Andre, é exatamente isso que o Daniel explicou acima. Testa pra gente e manda feedback aqui?

por Andre Beserra
| 104.6k xp | 62 posts

Daniel e Wanderson, muito obrigado!

Eu entendi a logica, mas mesmo eu copiando o codigo do Daniel o problema continua, achei estranho.

por Daniel Omnion
| 1014.4k xp | 1150 posts

Talvez seja algo relacionado ao HTML

Eu montei um exemplo sem o PHP, apenas HTML.

No exemplo, o primeiro slide tem que ter a classe "item active", os demais apenas a classe "item".

Tente adaptar o seu PHP nesta estrutura:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Galeria</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Exemplo Galeria</h1>

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="d-block img-fluid" src="http://www.dbins.com.br/img/banner_portfolio.jpg" alt="First slide">
           <div class="carousel-caption d-none d-md-block">
             <h3>Portfolio</h3>
             <p>Subtitulo</p>
            </div>
        </div>
        <div class="item">
          <img class="d-block img-fluid" src="http://www.dbins.com.br/img/banner_ferramentas.jpg" alt="Second slide">
          <div class="carousel-caption d-none d-md-block">
             <h3>Ferramentas</h3>
             <p>Subtitulo</p>
            </div>
        </div>
        <div class="item">
          <img class="d-block img-fluid" src="http://www.dbins.com.br/img/banner_perfil.jpg" alt="Third slide">
           <div class="carousel-caption d-none d-md-block">
             <h3>Perfil</h3>
             <p>Subtitulo</p>
            </div>
        </div>
      </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">Previous</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">Next</span>
      </a>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

   <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript">
    $('.carousel').carousel({
      interval: 2000
    })
    </script>
      </body>
</html>
por Andre Beserra
| 104.6k xp | 62 posts

Daniel,

Vi que a sua ideia foi ótima e abriu a minha mente, mas não resolve o problema.

Percebi que, o problema é, que, como eu criei uma taxonomia que é uma galeria para o post_type "Imóveis", quando eu dou um echo $galeria['url'] dentro do meu foreach($galeria_de_imagens as $galeria) ele puxa todas as url's das imagens incluindo de uma só vez no layout criado para o carrossel, mesmo sendo JavaScript.

Há alguma outra forma que eu possa imprimir dentro do carrossel cada url por vez? Só consegui imaginar o foreach como solução desse problema, mas, não aparenta ser a melhor opção.

Posso estar errado, mas quando imprimo $galeria['url'], tenho a impressão de estar chamando mais um array que esta trazendo todos os seus dados (imagens da galeria).

Acreditando nesta suposição acima, como eu poderia usar o foreach? Ou, é melhor pensar outra forma mesmo explorando a lógica com PHP ou até mesmo a Biblioteca do WordPress?

solução!
por Andre Beserra
| 104.6k xp | 62 posts

Daniel e Wanderson,

Achei a solução! hahaha

O problema estava na forma que eu estava concatenando a impressão. No código abaixo, o carrossel funcionará normalmente:

<div class="carousel-item" align="center">
    <?php
        $galeria_de_imagens = get_field('galeria_de_imagens');
        foreach($galeria_de_imagens as $galeria_de_imagem){
            echo '<img src="'.$galeria['url'].'"class="img-responsive center-block" alt="Imagem do Cronograma"'.'/>'.'<div class="carousel-caption d-none d-md-block">
                        <h3>'.$galeria['alt'].'</h3>'.'<p>'.the_field('subtitulo').'</p>
                      </div>';
        }
    ?>
</div>

Agradeço pela ajuda, sem vocês não conseguiria!