web-dev-qa-db-fra.com

Intégration du curseur Orbit dans Wordpress via le type de message personnalisé

Je travaille actuellement avec FoundationPress, c’est un excellent thème qui déborde de fonctionnalités intéressantes. J'aimerais créer un type de message personnalisé appelé "diapositives" qui sera affiché sur la page d'accueil par l'intermédiaire du curseur orbite de la fondation. J'ai trouvé une solution sur github qui semblait fonctionner avec les versions précédentes de foundation, mais pas avec la fondation 6, car certaines modifications ont été apportées à la syntaxe du curseur orbite. Le type de message fonctionne bien et la boucle affiche les images, mais elles sont empilées les unes sur les autres et ne fonctionnent pas comme un carrousel.

Ceci est le code de ma boucle personnalisée pour afficher les images du type de message. Je l’apprécierais si quelqu'un pouvait jeter un coup d’œil et me dire ce que je faisais mal.

 <?php   
            $args = array( 
          'post_type' => 'slides',
          'posts_per_page'  => 999
        );
        $temp = $wp_query;
        $wp_query = null;
        $wp_query = new WP_Query($args);
        if($wp_query->have_posts()) : ?>






        <ul  class="orbit-container">
         <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
          <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
            <?php   


                while($wp_query->have_posts()) : $wp_query->the_post();
                $postid = get_the_ID(); 
                if(has_excerpt()) {
                    $datacaption = 'data-caption="#slide-'.$postid.'"';
                } else { 
                    $datacaption = '';
                }
                if(has_post_thumbnail()) {          
                    $imgid = get_post_thumbnail_id($postid);
                    $alt = get_post_meta($imgid , '_wp_attachment_image_alt', true);
                    $imgurl = wp_get_attachment_url($imgid);
                    echo '<li class="orbit-slide">';
                    echo '<div>';
                    echo '<img  src="'.$imgurl.'" '.$datacaption.' alt="'.$alt.'" />';
                } else {
                    echo '<div class="orbit-slide" '.$datacaption.'>';
                    echo get_the_content();
                    echo '</div>';
                    echo '<div>';
                    echo '</li>';
               }
             if(has_excerpt()) {
                        $output  = '<span class="orbit-caption" id="slide-'.get_the_ID().'">';
                    $output .=    '<h3 class="slide-title">'.get_the_title().'</h3>';
                    $output .=    '<p class="slide-excerpt">'.get_the_excerpt().'</p>';
                    $output .= '</span>';
                    echo $output;
                };  
            endwhile; ?>

            </ul>






    <?php endif; ?>

<?php $wp_query = null; $wp_query = $temp; wp_reset_query(); ?>
custom-post-typestheme-developmentloop
2
steamfunk

Je l'ai compris, je suis parti de zéro et j'ai créé une boucle personnalisée avec toutes les classes mises à jour pour le curseur de l'orbite de la fondation. Si quelqu'un veut le code, veuillez le trouver ci-dessous:

 <?php $loop = new WP_Query( 
    array( 
    'post_type' => 'slides', 
    'posts_per_page' => 999 ) 
    ); ?>




    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="true">


            <ul class="orbit-container" >
              <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
              <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>

              <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

              <li class="orbit-slide" >
                <div>

                 <?php the_post_thumbnail(); ?>



                 <?php if(!empty($post->post_excerpt)) {
       echo '<div class="orbit-caption" >';
    the_excerpt();
        echo '</div>';

     } else {

     } ?>





                </div>

              </li>
              <?php endwhile; wp_reset_query(); ?>

            </ul>

          </div>
1
steamfunk