第一篇文章以不同的风格和其他帖子以不同的风格

时间:2013-09-12 22:41:11

标签: php css wordpress

我对WP_Query和HTML输出有这个问题:

查询:

<!-- Category posts -->
<!-- Entretencion -->
<article class="six column">
<?php
$caps = new WP_Query();
$caps->query('posts_per_page=4&category_name=entretencion');
while($caps->have_posts()) {
    $caps->the_post();
    $count++;
    if($count == 1) {
?>
<!--First post -->
<h4 class="cat-title"><a href="#"><?php $category = get_the_category();  echo $category[0]->cat_name; ?></a></h4>
<div class="post-image">
    <a href="#"><img src="<?php bloginfo( 'template_url' ); ?>/upload/imagepost1.jpg" alt=""></a>
</div>

<div class="post-container">
    <h2 class="post-title">Create a Flexible Folded Paper Effect Using CSS3 Features</h2>
    <div class="post-content">
        <p>Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non</p>
    </div>
</div>

<div class="post-meta">
    <span class="comments"><a href="#">24</a></span>
    <span class="author"><a href="#">nextwpthemes</a></span>
    <span class="date"><a href="#">13 Jan 2013</a></span>
</div>
<!-- End of first post -->              
<?php } if($count >= 2) { //Contador ?>
<!-- Second and others posts -->
<div class="other-posts">
    <ul class="no-bullet">
        <!-- Repeat this list with post 2, 3, and 4 -->
        <li id="<?php echo $post->ID; ?>">
            <a href="#"><img src="<?php bloginfo( 'template_url' ); ?>/upload/thumb1.jpg" alt=""></a>
            <h3 class="post-title"><a href="#">Check Out the New Recommended Resources on Webdesigntuts+</a></h3>
            <span class="date"><a href="#">13 Jan 2013</a></span>
        </li>
    </ul>
</div>
<?php } // Fin contador ?>
<?php } ?>
</article>

但HTML输出使用类other-post重复3 div。

问题(左)原(右)

enter image description here

如何只重复li标签?

1 个答案:

答案 0 :(得分:1)

<!-- Category posts -->
<!-- Entretencion -->
<article class="six column">
<?php
$count = '';
$perpage = 4;
$caps = new WP_Query();
$caps->query('posts_per_page='.$perpage.'&category_name=entretencion');

while($caps->have_posts()) {
    $caps->the_post();
    $count++;
    if($count == 1) {
?>
<!--First post -->
<h4 class="cat-title"><a href="#"><?php $category = get_the_category();  echo $category[0]->cat_name; ?></a></h4>
<div class="post-image">
    <a href="#"><img src="<?php bloginfo( 'template_url' ); ?>/upload/imagepost1.jpg" alt=""></a>
</div>

<div class="post-container">
    <h2 class="post-title">Create a Flexible Folded Paper Effect Using CSS3 Features</h2>
    <div class="post-content">
        <p>Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non</p>
    </div>
</div>

<div class="post-meta">
    <span class="comments"><a href="#">24</a></span>
    <span class="author"><a href="#">nextwpthemes</a></span>
    <span class="date"><a href="#">13 Jan 2013</a></span>
</div>
<!-- End of first post -->              
<?php
    }

    //only on second post/loop
    if($count == 2) {
?>
    <!-- Second and others posts -->
    <div class="other-posts">
        <ul class="no-bullet">
<?php   
    }

    if($count >= 2) { //Contador
?>
        <!-- Repeat this list with post 2, 3, and 4 -->
        <li id="<?php echo $post->ID; ?>">
            <a href="#"><img src="<?php bloginfo( 'template_url' ); ?>/upload/thumb1.jpg" alt=""></a>
            <h3 class="post-title"><a href="#">Check Out the New Recommended Resources on Webdesigntuts+</a></h3>
            <span class="date"><a href="#">13 Jan 2013</a></span>
        </li>
<?php
    }

    //again, only on final loop
    if($count == $perpage) {
?>
        </ul>
    </div>
<?php
    }
}
?>
</article>

这只会在第二个循环中输出一个li,并在$ perpage的末尾输出(我保留那些你要求原始WP_Query的4个页面)。 这很难看,但应该有用。

相关问题