WordPress 开发带缩略图的小工具最新文章

概述在我们的wordpress边栏想显示我们发布的最新文章，并且带上缩略图，很多插件能帮我们完成这个功能，其实我们完全可以自己DIY，和wordpress原生态的小工具一样，直接拖过去就OK了，这里把流程和代码分享一下，有需要

在我们的wordpress边栏想显示我们发布的最新文章，并且带上缩略图，很多插件能帮我们完成这个功能，其实我们完全可以自己DIY，和wordpress原生态的小工具一样，直接拖过去就OK了，这里把流程和代码分享一下，有需要的朋友可以自己二次开发。本站的左边兰的最新文章就是采用了这个方法。

后台-外观-小工具-效果如下图：

开始之前你需要了解 Widget 函数如何创建自定义侧边栏小工具，本站有篇文章详细介绍了用法和实例，wordpress主题开发创建你喜欢的小工具

流程：

一、主题根目录下创建recent-posts.PHP

二、在functions.PHP文件中导入recent-posts.PHP，这样做的目的是不让functions.PHP太臃肿，独立出来好管理。

三、根据你的主题样式，在style.CSS定义你的前端显示样式，为了你方便修改样式表，我这里加了类。

recent-posts.PHP源码

点击查看recent-posts.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()) : ?>

while($recent_articles->have_posts()) :

$recent_articles->the_post();

?>

else :

?>

endif; ?>

enDWhile;

else:

?>

Oops,there are no posts.

endif;

?>

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' );

}

?>

}

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

.rp-thumb img{

wIDth:60px;

height::60px;

}

2、静态结构说明

想修改前端显示样式就从这里下手

3、如果你的文章里没有缩略图的话，这里设置了默认图片，在你的主题根目录下建立一个文件夹images,里面建一个nthumb.png,当你的文章没有缩略图时会默认显示这个，你可对这个任意DIY

4、如果你不想显示缩略图，只显示文章列表，那么把div class='rp-thumb'删除或在style.CSS这样设置隐藏它：

.rp-thumb {

display:none;

}

总结

以上是内存溢出为你收集整理的WordPress 开发带缩略图的小工具最新文章全部内容，希望文章能够帮你解决WordPress 开发带缩略图的小工具最新文章所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。