wordpress显示缩略图和设置样式

时间:2012-11-18 14:13:36

标签: css wordpress

我正在尝试做的是用缩略图显示帖子并显示标题和内容的前三行我想要实现的是这个

Date

thumbnail - title
            some content

此刻我有特色图片通过,但我正在努力让剩下的只是为了重申我想要一个左侧的特色图像,旁边的标题日期和旁边的内容。继承人此刻的样子

enter image description here

继承我的职能

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>

1 个答案:

答案 0 :(得分: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

上使用摘录功能的详细信息,请参阅