web-dev-qa-db-ja.com

さまざまなカテゴリの最近の投稿

私はホームページに2つの最近の投稿セクションを持つテーマを開発しています。1つは最近のポートフォリオ更新に関するもので、もう1つは最近のブログ投稿に関するものです。テーマにこれらの機能を実装するのに苦労しています。私はそれがwp_queryと関係があることを知っています、私はちょうどこれについてどのように取り組むべきか完全にはわからない。ありとあらゆる援助は大歓迎です。

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

ブログ/ポートフォリオの項目がカテゴリに分類されている場合は、テンプレートファイルの先頭でこれを実行できます。

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