如何在复杂的滑块中查询帖子

时间：2015-03-16 作者：Tcmxc

我正在尝试将帖子查询到滑块中。下面是滑块的HTML标记。每张幻灯片都有幻灯片和相关缩略图。

 <div id="example1" class="slider-pro">
    <div class="sp-slides">
        <div class="sp-slide">
            <img class="sp-image" src="../src/css/images/blank.gif"
                 data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
                 data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
             <p class="sp-layer sp-black sp-padding" 
                data-position="bottomLeft"
                data-show-transition="up" data-hide-transition="down">
                1st slide Lorem ipsum dolor sit ametayyyyyeee <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
            </p>
        </div>
        <div class="sp-slide">
            <img class="sp-image" src="../src/css/images/blank.gif"
                data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg"
                data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg"/>
             <p class="sp-layer sp-black sp-padding" 
                data-position="bottomLeft"
                data-show-transition="up" data-hide-transition="down">
                2nd slide Lorem ipsum dolor sit ametayyyyyeee <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
            </p>
        </div>
        <div class="sp-slide">
            <img class="sp-image" src="../src/css/images/blank.gif"
                data-src="http://bqworks.com/slider-pro/images/image3_medium.jpg"
                data-retina="http://bqworks.com/slider-pro/images/image3_large.jpg"/>
             <p class="sp-layer sp-black sp-padding" 
                data-position="bottomLeft"
                data-show-transition="up" data-hide-transition="down">
                3rd slide Lorem ipsum dolor sit ametayyyyyeee <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
            </p>
        </div>
        <div class="sp-slide">
            <img class="sp-image" src="../src/css/images/blank.gif"
                data-src="http://bqworks.com/slider-pro/images/image4_medium.jpg"
                data-retina="http://bqworks.com/slider-pro/images/image4_large.jpg"/>
            <p class="sp-layer sp-black sp-padding" 
                data-position="bottomLeft"
                data-show-transition="up" data-hide-transition="down">
                4th slide Lorem ipsum dolor sit ametayyyyyeee <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
            </p>
        </div>
        <div class="sp-slide">
            <img class="sp-image" src="../src/css/images/blank.gif"
                data-src="http://bqworks.com/slider-pro/images/image5_medium.jpg"
                data-retina="http://bqworks.com/slider-pro/images/image5_large.jpg"/>
             <p class="sp-layer sp-black sp-padding" 
                data-position="bottomLeft"
                data-show-transition="up" data-hide-transition="down">
                5th slide Lorem ipsum dolor sit ametayyyyyeee <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
            </p>
        </div>
    </div>
    <div class="sp-thumbnails">
        <div class="sp-thumbnail">
            <div class="sp-thumbnail-title">1st slide Lorem ipsum</div>
            <div class="sp-thumbnail-description">1Dolor sit amet, consectetur adipiscing elit sed</div>
        </div>
        <div class="sp-thumbnail">
            <div class="sp-thumbnail-title">2nd slide Do eiusmod</div>
            <div class="sp-thumbnail-description">2 Tempor incididunt ut labore et dolore magna aliqua</div>
        </div>
        <div class="sp-thumbnail">
            <div class="sp-thumbnail-title">3rd slide Ut enim</div>
            <div class="sp-thumbnail-description">3 Ad minim veniam, quis nostrud exercitation</div>
        </div>
        <div class="sp-thumbnail">
            <div class="sp-thumbnail-title">4th slide Ullamco oris</div>
            <div class="sp-thumbnail-description">4 Nisi ut aliquip ex ea commodo consequat</div>
        </div>
        <div class="sp-thumbnail">
            <div class="sp-thumbnail-title">5th slide Duis aute</div>
            <div class="sp-thumbnail-description">5 Irure dolor in reprehenderit in voluptate velit</div>
        </div>
    </div>
</div>
这是我想到的，但它不起作用。“sp缩略图”元素正在重复Heres a screen shot 

       <?php
        $args = array( 
             \'post_type\' => array(\'post\', \'music-videos\'),
             \'posts_per_page\' => 5,
             \'orderby\'  => \'menu_order post_date\',
              );
        $loop = new WP_Query( $args );

        ?>

        <div id="example1" class="slider-pro">
            <div class="sp-slides">
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                <div class="sp-slide">
                      <div class="sp-image">
                    <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
                        <?php the_post_thumbnail( \'related-thumb\' ); ?>
                    </a>
                  </div>


                 <p class="sp-layer sp-black sp-padding" 
                    data-position="bottom"
                    data-show-transition="up" data-hide-transition="down">
                     <span class="hide-small-screen" style="font-size:1.75em    ;"><?php the_title(); ?></span>
                </p>
            </div>
            <div class="sp-thumbnails">
                <div class="sp-thumbnail">
                    <div class="sp-thumbnail-title"><?php the_title(); ?></div>
                </div>
            </div>

        <?php endwhile; ?>
        </div>
        </div>
     <?php wp_reset_postdata(); ?>

1 个回复
最合适的回答,由SO网友:Tcmxc 整理而成

I figured it out

      <?php
        $args = array( 
             \'post_type\' => array(\'post\', \'music-videos\'),
             \'posts_per_page\' => 5,
             \'orderby\'  => \'menu_order post_date\',
              );
        $loop = new WP_Query( $args );
        ?>
        <div id="example1" class="slider-pro">
            <div class="sp-slides">
                <div class="sp-thumbnails" >
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <div class="sp-slide">
                <div class="sp-image">
                    <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
                        <?php the_post_thumbnail( \'related-thumb\' ); //the_post_thumbnail( \'col-4-img-thumb\' ); ?>
                    </a>
                </div>
                 <div class="sp-layer sp-black sp-padding" 
                    data-position="bottom"
                    data-show-transition="up" data-hide-transition="down">
                    <span class="hide-small-screen" style="font-size:1.75em;"><?php the_title(); ?></span>
                </div>
            </div>
            <div class="sp-thumbnail">
                <div class="sp-thumbnail-title"><?php the_title(); ?>
                </div>
            </div>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
            </div>
        </div>
    </div>
结束
标签： wp-query   query   小码农  

相关推荐

如何使用标准的QUERY_POST按多个字段排序？

在我们的archive.php 我们将显示与所选类别匹配的所有项目。这工作非常好。然后，我们对其进行了改进，添加了一个排序（就在循环之前），并将每页的帖子数从默认的10个增加到了10个，如下所示：$posts = query_posts($query_string . \'&orderby=title&order=asc&posts_per_page=99\'); 这更有效。现在，我们想按多个字段进行排序，比如menu_order 然后title. 我看不到使用我们现有