webentwicklung-frage-antwort-db.com.de

Orbit-Schieberegler über benutzerdefinierten Beitragstyp in WordPress integrieren

Ich arbeite zurzeit mit FoundationPress. Es ist ein großartiges Starter-Thema, das mit coolen Funktionen geladen ist. Ich möchte einen benutzerdefinierten Beitragstyp namens "Folien" erstellen, der auf der Startseite über den Orbit-Schieberegler der Stiftung angezeigt wird. Ich habe eine Lösung für Github gefunden, die mit früheren Versionen von Foundation zu funktionieren schien, aber es funktioniert nicht mit Foundation 6, da sie einige Änderungen an ihrer Syntax für den Orbit-Schieberegler vorgenommen haben. Der Post-Typ funktioniert einwandfrei und die Schleife zeigt die Bilder an, aber sie sind übereinander gestapelt und funktionieren nicht wie ein Karussell.

Dies ist der Code für meine benutzerdefinierte Schleife zum Anzeigen der Bilder vom Beitragstyp. Ich würde mich freuen, wenn jemand einen Blick darauf werfen und mir sagen könnte, was ich falsch mache.

 <?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(); ?>
2
steamfunk

Ich habe herausgefunden, dass ich von vorne angefangen habe und eine benutzerdefinierte Schleife mit allen aktualisierten Klassen für den Foundation Orbit Slider erstellt habe. Wenn jemand den Code haben möchte, finden Sie ihn unten:

 <?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