web-dev-qa-db-ja.com

カスタム投稿タイプを使用してOrbitスライダをワードプレスに統合する

私は現在FoundationPressで作業しています、それはクールな機能が満載の素晴らしい初心者テーマです。財団の軌道スライダーを介してホームページに表示される「スライド」と呼ばれるカスタム投稿タイプを作成したいと思います。私はgithub上で以前のバージョンのFoundationで動作しているように思われる解決策を見つけましたが、それは彼らが軌道スライダーのための彼らの構文に若干の変更を加えたので、Foundation 6で動作しません。ポストタイプは問題なく動作し、ループは画像を表示しますが、それらは互いの上に積み重ねられ、カルーセルのようには動作しません。

これは私のカスタムループが投稿タイプからの画像を表示するためのコードです。誰かが見て私が悪いことを教えてくれたら私はそれをいただければ幸いです。

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

私は最初から始めて、基礎軌道スライダーのためのすべての更新されたクラスでカスタムループを作成しました。誰かがこのコードを希望する場合は、以下のコードを見つけてください。

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