第一、代码部分
> <ul id="new-posts">
> <?php
> $recentPosts = new WP_Query();
> $recentPosts->query('showposts=10'); ?>
> <?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
> <li>
> <?php
> if ( has_post_thumbnail() ) {
> ?>
> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumb', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a>
> <a class="new-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
> <?php } else {?> <a class="new-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
> <?php } ?>
> <p>in <span class="new-categ"><?php $category = get_the_category(); $categLink = get_category_link($category[0]->cat_ID); ?> <a href="<?php echo $categLink; ?>" title="<?php $category[0]->cat_name; ?>"><?php echo $category[0]->cat_name; ?></a></span></p>
> </li>
> <?php endwhile; ?>
> </ul>
利用WP_Query函数调用最新的文章以及缩略图,前提是我们必须有缩略图的功能,这个我们自己添加就可以。
第二、样式部分
需要定义样式部分,根据实际情况再做未调整。
> #new-posts li { overflow:auto; margin:20px 0px;}
> #new-posts li img { float:left; margin-right:10px; border:3px solid #798295;}
> .new-post-title { text-decoration:none; font-weight:bold; color:#798295;}
> .new-post-title:hover{color:#6eaebe;}
> #new-posts li p { margin-top:10px; }
> .new-categ{padding:5px;background:#6eaebe;}
> .new-categ a{ font-weight:normal;color:#464b56;}
> .new-categ a:hover{color:#545b68;}
这样我们可以看到调用的最新WORDPRESS内容且带有缩略图效果。