在我们的wordpress边栏想显示我们发布的最新文章，并且带上缩略图，很多插件能帮我们完成这个功能，其实我们完全可以自己DIY，和wordpress原生态的小工具一样，直接拖过去就OK了，这里把流程和代码分享一下，有需要的朋友可以自己二次开发。本站的左边兰的最新文章就是采用了这个方法。
后台-外观-小工具-效果如下图：
开始之前你需要了解 widget 函数如何创建自定义侧边栏小工具，本站有篇文章详细介绍了用法和实例，wordpress主题开发创建你喜欢的小工具
流程：
一、主题根目录下创建recent-posts.php
二、在functions.php文件中导入recent-posts.php，这样做的目的是不让functions.php太臃肿，独立出来好管理。
三、根据你的主题样式，在style.css定义你的前端显示样式，为了你方便修改样式表，我这里加了类。
recent-posts.php源码
<?php
/**
* 带缩略图的最新文章小工具
*
* web:www.511yj.com
*/
class yj_Recent_Posts extends WP_Widget {
public function __construct() {
parent::__construct(
'yj_rp', // Base ID
__('最新文章', 'yj'), // Name
array( 'description' => __( '显示你发布的最新文章并且带有缩略图.', 'yj' ), ) // Args
);
}
public function widget( $args, $instance ) {
if (isset($instance['title'])) :
$title = apply_filters( 'widget_title', $instance['title'] );
$no_of_posts = apply_filters( 'no_of_posts', $instance['no_of_posts'] );
else :
$title = __('Latest Posts','yj');
$no_of_posts = 5;
endif;
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
// WP_Query arguments
$qa = array (
'post_type' => 'post',
'posts_per_page' => $no_of_posts,
'offset' => 0,
'ignore_sticky_posts' => 1
);
// The Query
$recent_articles = new WP_Query( $qa );
if($recent_articles->have_posts()) : ?>
<ul class="rp">
<?php
while($recent_articles->have_posts()) :
$recent_articles->the_post();
?>
<li class='rp-item'>
<?php if( has_post_thumbnail() ) : ?>
<div class='rp-thumb'><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
<?php
else :
?>
<div class='rp-thumb'><a href="<?php the_permalink(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/nthumb.png"></a></div>
<?php
endif; ?>
<div class='rp-title'><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div class='rp-date'><?php the_time('Y-m-j'); ?></div>
</li>
<?php
endwhile;
else:
?>
Oops, there are no posts.
<?php
endif;
?>
</ul>
<?php
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( '最新文章', 'yj' );
}
if ( isset( $instance[ 'no_of_posts' ] ) ) {
$no_of_posts = $instance[ 'no_of_posts' ];
}
else {
$no_of_posts = __( '5', 'yj' );
}
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '栏目标题:','yj' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
<label for="<?php echo $this->get_field_id( 'no_of_posts' ); ?>"><?php _e( '文章条数:', 'yj' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'no_of_posts' ); ?>" name="<?php echo $this->get_field_name( 'no_of_posts' ); ?>" type="text" value="<?php echo esc_attr( $no_of_posts ); ?>" />
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['no_of_posts'] = ( ! empty( $new_instance['no_of_posts'] ) ) ? strip_tags( $new_instance['no_of_posts'] ) : '5';
if ( is_numeric($new_instance['no_of_posts']) == false ) {
$instance['no_of_posts'] = $old_instance['no_of_posts'];
}
return $instance;
}
}
add_action( 'widgets_init', 'register_yj_widget' );
function register_yj_widget() {
register_widget( 'yj_Recent_Posts' );
}在functions.php文件中导入recent-posts.php，
require get_template_directory() . '/recent-posts.php';
重要说明：
1、上面的代码中我们给div 加了class='rp-thumb'所以想定义样式可以在你的样式表里style.css这样就可以了，比如我们把缩略图定义为60*60
扫描二维码关注公众号，回复：
11596155 查看本文章
.rp-thumb img{
width:60px;
height::60px;
}2、静态结构说明
<li class='rp-item'>
<div class='rp-thumb'><a>缩略图</a></div>
<div class='rp-thumb'><a href="<?php the_permalink(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/nthumb.png"></a></div>
<div class='rp-title'><a>栏目标题</a></div>
<div class='rp-date'>发布时间</div>
</li>想修改前端显示样式就从这里下手
3、如果你的文章里没有缩略图的话，这里设置了默认图片，在你的主题根目录下建立一个文件夹images,里面建一个nthumb.png,当你的文章没有缩略图时会默认显示这个，你可对这个任意DIY
4、如果你不想显示缩略图，只显示文章列表，那么把div class='rp-thumb'删除或在style.css这样设置隐藏它：
.rp-thumb {
display:none;
}
您可能感兴趣的文章:
▪ 第七课WordPress主题制作综合教程头部Brand设计
▪ 第六课511遇见Wordpress主题制作标题函数wp_title