不同类别的最新帖子

我正在开发一个主题，在主页上有两个最近的帖子部分——一个是最近的投资组合更新部分，另一个是最近的博客帖子部分。我正在努力实现主题中的这些功能；我知道这与wp\\u查询有关，但我不完全确定如何进行。非常感谢您的任何帮助。

HTML：

    <div id="recent">
        <div id="recent-work">
                <p><span>Recent Work</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                        <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
        </div><!-- end recent-work -->
        <div class="divider">
                <img src="img/divider.png" alt="Section divider" />
        </div><!-- end divider -->
        <div id="recent-blog">
                <p><span>Recent Blog</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                        <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
        </div><!-- end recent-blog -->
</div><!-- end recent -->

CSS

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
    padding-bottom: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
    position:relative;
}

#recent #recent-work p {
    padding-bottom: 20px;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-blog {
    display: block;
    float: right;
    position:relative;
}

#recent #recent-blog p {
    padding-bottom: 20px;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent .next {
    position: absolute;
    bottom: -40px;
    right: 0px;
}

<?php $portfolio_query = new WP_Query(\'posts_per_page=3&category_name=portfolio\'); // note \'portfolio\' is the category slug $blog_query = new WP_Query(\'posts_per_page=3&category_name=blog\'); // note \'blog\' is the category slug ?>

<?php if ($portfolio_query->have_posts()) : ?> <div id="recent"> <div id="recent-work"> <p><span>Recent Work</span></p> <?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?> <a href="<?php the_permalink(); ?>"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> <?php endwhile; ?> <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div> </div> <?php endif; ?> <div class="divider"> <img src="img/divider.png" alt="Section divider" /> </div> <?php // repeat the whole if clause here for the blog posts, just replace $blog_query with $portfolio_query ?>

小码农CODE

相关推荐

Most visited posts