css - wordpress 显示缩略图和设置样式

Question

嗨，我想做的是显示带缩略图的帖子并显示标题和内容的前三行，我想实现的是这个

Date

thumbnail - title
            some content

目前我有特色图片，但我正在努力获得其余部分，只是重申我想要左侧的特色图片，旁边是标题日期和旁边的内容。这是目前的样子

这是我的功能

if ( function_exists( 'add_theme_support' ) ) { 
        add_theme_support( 'post-thumbnails' ); } //Adds thumbnails compatibility to the theme
set_post_thumbnail_size( 200, 170, true ); // Sets the Post Main Thumbnails
    add_image_size( 'recent-thumbnails', 55, 55, true ); // Sets Recent Posts Thumbnails}


function recentPosts() {
    $rPosts = new WP_Query();
    $rPosts->query('cat=4&showposts=3&orderby=date');
        while ($rPosts->have_posts()) : $rPosts->the_post(); ?>
            <li>
                <a href="<?php the_permalink();?>"><?php the_post_thumbnail('recent-thumbnails'); ?></a>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
            </li> 
        <?php endwhile; 
    wp_reset_query();
}

这是我的CSS

#posts { width:600px; height:auto; float:left; margin-top:20px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#080808;}
#posts  .news{ width:600px; height:auto; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000000; display:inline-block;}
#posts  a{ font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000000; display:inline-block;}

这是我在 index.php 中的调用方式

 <div class="news">
                <?php echo recentPosts(); ?>
                </div>

Answer 1

要显示缩略图、标题和文本，您可以使用如下内容:

<a href="<?php the_permalink();?>"><?php the_post_thumbnail('recent-thumbnails'); ?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>  
<p><?php the_excerpt(); ?></p>

#news img {
float:left;
margin: 0 5px 5px 0; 
}
#news h2 {}
#news p {}

您可以控制摘录长度以仅显示帖子中一定数量的字符。查看有关在 Wordpress Codex 上使用摘录功能的更多信息 http://codex.wordpress.org/Function_Reference/the_excerpt