How to wrap posts into divs?

时间:2011-09-26 作者:Nsokyi

有人知道我如何扭转这种局面吗:

<div id="mySlides">

    <?php query_posts(\'showposts=4&cat=11\'); ?>
    <?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

        <div>

            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>

        <?php endwhile; ?>
    <?php endif; ?>

</div>

<div id="myController">
    <span class="jFlowControl">1</span>
    <span class="jFlowControl">2</span>
    <span class="jFlowControl">3</span>
    <span class="jFlowControl">4</span>
</div>

<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>

<div class="clear">
进入:

<div id="mySlides">
<div id="slide1"><img src="images/slide1.jpg" alt="Slide 1 jFlow Plus" />
 <span><h2>Welcome to the First Slide!</h2><p>We hope you enjoy the jFlow Plus Slider - a light-weight slider for your web design needs. <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide2"><img src="images/slide2.jpg" alt="Slide 2 jFlow Plus" />
 <span><h2>Hey you made it to the Second Slide!</h2><p>We Know you enjoy this plugin... it\'s not too hard to implement, right? <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
</div>
<div id="slide3"><img src="images/slide3.jpg" alt="Slide 3 jFlow Plus" />
 <span><h2>Woah You\'re on the Third Slide</h2><p>You\'ve completed quiet the journey! All the way from slide 1 to slide 3... congratulations! <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
 </div>
 </div>  

<div id="myController">
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
</div>
我需要将每个帖子预览打包到div中,这样jFlow就可以将它们组织成幻灯片,如http://dre.im/how-to-create-a-jquery-carousel-with-wordpress-posts/

谢谢

2 个回复
最合适的回答,由SO网友:Chip Bennett 整理而成

我想这可能是一个更复杂的问题,但我会尽量如实回答。以下代码将每个帖子的内容包装在<div>:

<?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

        <div id="slide<?php the_ID(); ?>>

            // Post content - i.e. your slider image - goes here

        </div>

    <?php endwhile; ?>
<?php endif; ?>
现在,这里固有的问题是:幻灯片内容在哪里,以及如何将幻灯片图像添加到该内容中?您是否使用自定义帖子类型?您是否使用特色图片?您是否使用自定义post meta?

我们需要更多的信息,以便准确地指定如何使用循环输出特定内容。

EDIT

根据您的评论,此代码将使用特征图像作为滑块图像(并假设您创建了自定义图像大小,slider-image, 将文章标题用作滑块标题,将文章摘录用作滑块文本:

EDIT 2

现在在滑块图像周围包括一个post permalink:

<?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

        <div id="slide<?php the_ID(); ?>>

            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail( \'slider-image\' ); ?>
            </a>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>

        </div>

    <?php endwhile; ?>
<?php endif; ?>
这将为您的示例标记提供合理的近似值。

SO网友:petermolnar

之前缺少结束div标记<?php endwhile; ?>.

因此:

<div id="mySlides">

    <?php query_posts(\'showposts=4&cat=11\'); ?>
    <?php if (have_posts()) : ?>
        <?php $counter = 1; ?>
        <?php while (have_posts()) : the_post(); ?>
            <div id="slide<?php echo $counter; ?>"><img src="images/slide<?php echo $counter; ?>.jpg" alt="Slide <?php echo $counter; ?> jFlow Plus" />
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
            </div>
            <?php $counter++; ?>
        <?php endwhile; ?>
    <?php endif; ?>
</div>

结束

相关推荐

jQuery in header or footer

从我的阅读来看,如果可能的话,将jquery和依赖项之类的脚本作为首选项加载到页脚中似乎是一个很好的例子;然而有两件事让我困惑。首先,wp\\u enqueue\\u script()的默认设置是将脚本放在页脚中,其次(可能是相关的)是codex 请注意,在运行wp\\u head之前,您必须将脚本排队,即使它将被放置在页脚中。这是否意味着即使脚本设置为加载到页脚中,它仍然会在早期加载,因此我们失去了页脚放置的一些优势?Edit - 以防万一,上述不正确的陈述将来会使任何人感到困惑。我意识到从那以后我一直