web-dev-qa-db-fra.com

articles récents pour différentes catégories

Je développe un thème qui comportera deux sections d'articles récents sur la page d'accueil: une section pour les mises à jour récentes du portefeuille et l'autre pour les articles de blog récents. J'ai du mal à mettre en œuvre ces fonctions dans le thème; Je sais que c'est quelque chose à voir avec wp_query, je ne suis pas tout à fait sûr de savoir comment s'y prendre. Toute aide est grandement appréciée.

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;
}
postswp-queryrecent-posts
1
user1255049

Si les éléments de blog/portfolio sont regroupés en catégories, vous pouvez le faire en haut de votre fichier de modèle:

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

Puis dans votre balisage:

<?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><!-- end recent-work -->
<?php endif; ?>
    <div class="divider">
            <img src="img/divider.png" alt="Section divider" />
    </div><!-- end divider -->

<?php // repeat the whole if clause here for the blog posts, just replace $blog_query with $portfolio_query ?>
1
jessica