web-dev-qa-db-fra.com

Afficher le type de publication personnalisé et les champs personnalisés dans un carrousel d'amorçage

J'utilise le plugin wordpress "Types" pour la première fois. J'ai créé un type de message personnalisé, ainsi que certains champs personnalisés.

Comment appeler dynamiquement toutes les publications personnalisées dans un carrousel Bootstrap et afficher les champs de cette boucle?

Et comment puis-je limiter le nombre de messages qui circuleront dans le carrousel? Une autre condition est que je dois ajouter cette classe "active" Bootstrap nécessaire à seulement le premier message.

Voici mon premier coup, (notez aussi que j'ai quelques js personnalisés pour créer une pagination pour le carrousel, mais ce n'est pas un problème (pour l'instant!))

<!-- need to limit the entire carousel to displaying the 5 latest posts -->
    <div id="myCarousel2" class="carousel">
        <div class="carousel-inner2">

            <?php $loop = new WP_Query( array( 'post_type' => 'testimonial' ) ); ?>
            <div class="item active" data-title=""><!-- the first div needs a class of active, but the others do not -->
                <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                    <div class="slide-copy"><?php the_content(); ?></div>
                    <!-- need to display a custom field or two here -->
                <?php endwhile; ?>
          </div>
        </div>
      </div><!-- end myCarousel -->

Voici ma deuxième tentative. Cela a fonctionné à merveille, sauf pour l'affichage des valeurs de champ personnalisées. Aucune suggestion? Il semble que la syntaxe soit correcte ... Me manque-t-il quelque chose de fondamental ici?

<?php $the_query = new WP_Query(array(
'post_type' => 'testimonial', 
'posts_per_page' => 1 
));
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item active" data-title="">
    <div class="slide-copy">
        <?php the_content();?>
        <span class="byline"><?php echo get_post_meta($post->ID, 'authorinfo', true); ?></span>
    </div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php $the_query = new WP_Query(array(
'post_type' => 'testimonial', 
'posts_per_page' => 5, 
'offset' => 1 
));
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item" data-title="">
    <div class="slide-copy">
    <?php the_content();?>
    <span class="byline"><?php echo get_post_meta($post->ID, 'authorinfo', true); ?></span>
    </div>
</div>
custom-post-typescustom-fieldtwitter-bootstrapplugin-types
6
cindyg

J'ai trouvé que pour des choses comme ça, get_posts est plus facile.

<?php
    // Set up your arguments array to include your post type,
    // order, posts per page, etc.

    $args = array(
        'post_type' => 'testimonial',
        'posts_per_page' => 3,
        'orderby' => 'date',
        'order' => 'DESC'
    );

    // Get the posts
    $testimonials = get_posts($args);

    // Loop through all of the results
    foreach ($testimonials as $testimonial)
    {
        // Since we're doing this outside the loop,
        // Build the apply the filters to the post's content

        $content = $testimonial->post_content;
        $content = str_replace(']]>', ']]&gt;', $content);
        $content = apply_filters('the_content', $content);

        // Build out the carousel item
?>
        <div class="item-active">
            <?php echo get_post_thumbnail($testimonial->id); ?>
            <div class="carousel-caption">
                <h4><?php echo $testimonial->post_title; ?></h4>
                <?php echo $content; ?>
            </div>
        </div>
<?php
    }
?>

Cela a fonctionné si souvent pour moi que c'est devenu ma méthode de prédilection pour tous mes carrousels, jQuery ou Twitter Bootstrap.

J'espère vraiment que cela aide.

Référence de fonction Codex pour get_posts

2
Alex Lane

Lisez "Plusieurs boucles en action sur la page du codex". Je pense que vous aurez votre réponse là-bas ... du moins j’avais la mienne: http://codex.wordpress.org/The_Loop

J'ai utilisé une catégorie "sélectionnée". Et la requête a été faite par "Plusieurs boucles en action". Première boucle avec un seul poste dans la catégorie sélectionnée pour activer la classe de carrousel bootstrap. Ensuite, l’autre boucle place les autres catégories moins la première.

  <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
   <div class="carousel-inner">
    <?php 
      $my_query = new WP_Query('category_name=featured&posts_per_page=1');
      while ($my_query->have_posts()) : $my_query->the_post();
      $do_not_duplicate = $post->ID;?>
       <!-- The 1st Loop... -->
       <div class="active item well-blue">
         <div class="offset1">              
         <h3><?php the_title(); ?></h3>
         <p class="lead"><?php $excerpt = strip_tags(get_the_excerpt()); echo $excerpt; ?></p>
         <a href="<?php the_permalink() ?>" class="btn" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Read more...</a>
       </div> 
     </div>
    <?php endwhile;
      // The 2nd Loop limits the query to 2 more posts...
    $limit_query = new WP_Query('posts_per_page=2');
    if($limit_query->have_posts()) : while ($limit_query->have_posts()) : $limit_query->the_post(); 
    if( $post->ID == $do_not_duplicate ) continue; ?>
    <!-- The 2nd Loop same data as 1st loop -->
    <?php endwhile; endif;  wp_reset_query(); ?>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>

J'espère que ça a aidé.

1
jose pacheco

Vous devez écrire une instruction conditionnelle pour que la classe active répète les publications. C'est la technique que j'ai utilisée avec les types de publication personnalisés.

`

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <?php 

                    if( $query->have_posts() ) : 
                      while( $query->have_posts() ) : 
                        $query->the_post(); 
                        $i++;
                  ?>

                    <div class="item <?php if ( $i == 1 ) {echo 'active';} ?>">

                      <p><?php the_field('testimonial'); ?></p>
                      <div class="testimonials-image">
                          <img class="img-responsive" src="<?php the_field('testimonial_image'); ?>" alt="">
                      </div>
                      <h5><?php the_field('testimonial_name'); ?></h5>
                      <h6><?php the_field('testimonial_occupation'); ?></h6>

                    </div>

                  <?php 
                    endwhile; 
                      endif; 
                        wp_reset_postdata(); 
                  ?>

                </div>

                <!-- Controls -->
                <a class="left" href="#carousel-example-generic" role="button" data-slide="prev">
                  <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right" href="#carousel-example-generic" role="button" data-slide="next">
                  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                  <span class="sr-only">Next</span>
                </a>

              </div>
            </div>
        </div>
    </div>
</div>

`

0
Justyn Thomas

Ce que vous demandez n’est pas tout à fait clair, vous voudrez peut-être poser quelques questions concrètes dans votre message.

Je pense que l’une des choses que vous souhaitez est de savoir comment permettre à WP_Query de sélectionner un nombre spécifique de publications. Par défaut, WP_Query est conçu pour la pagination de toutes les publications, mais vous n’avez pas à utiliser la pagination. Mais pour indiquer à WP_Query de ne sélectionner que N nombre de publications pour la "première page", vous pouvez utiliser le paramètre showposts .

Pour les méta-valeurs, vous voudrez probablement get_post_meta () , mais si vous souhaitez utiliser des méta-valeurs dans votre WP_Query, vous aurez besoin de meta_query .

CSS propose un pseudo-sélecteur :first-child pour couvrir le premier élément d'un conteneur. Sinon, bien que ce ne soit probablement pas l'endroit pour cela, vous pouvez simplement configurer une variable de comptage en dehors de la boucle et faire quelque chose comme if ($count++ == 0) $class = 'active'; à l'intérieur.

0
totels