WordPress 开发带缩略图随机文章小工具

以前曾经分享了一篇给wordpress 后台小工具增加一个随机文章,但没有附加缩略图的功能，为了让你的随机文章看起来更吸睛，这里加上特色图像的缩略图，效果如本站左边栏的随机文章，步骤和代码如下：

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

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

流程：

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

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

/**

* 带缩略图的随机文章

require get_template_directory() . '/inc/rand-posts.PHP';

三、根据你的主题样式，在style.css定义你的前端显示样式，为了你方便修改样式表，我这里给 li 加了类class='rp-thumb'。

rand-posts.PHP源码

点击 rand-posts.PHP源码

PHP

/**

* 带缩略图的随机文章小工具

* web:www.511yj.com

class yj_Random_Posts extends WP_Widget {

public function __construct() {

parent::__construct(

'yj_rp_random',// Base ID

__('随机文章','yj'),// Name

array( 'description' => __( 'yj-带缩略图的随机文章小工具.','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,

'orderby' =>'rand'

);

// The Query

$recent_articles = new WP_Query( $qa );

if($recent_articles->have_posts()) : ?>

PHP

while($recent_articles->have_posts()) :

$recent_articles->the_post();

PHP if( has_post_thumbnail() ) : ?>
PHP the_permalink(); ?>">PHP the_post_thumbnail('thumbnail'); ?>
PHP
else :
?>
PHP the_permalink(); ?>">PHP echo get_stylesheet_directory_uri(); ?>/images/511yj.jpg">
PHP
endif; ?>
PHP the_permalink(); ?>">PHP the_title(); ?>
PHP the_time('Y-m-j'); ?>
PHP
endwhile;
else:
?>
Oops,there are no posts.
PHP
endif;
?>
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' );
}
?>
PHP echo $this->get_field_id( 'title' ); ?>">PHP _e( '栏目标题:','yj' ); ?>
PHP echo $this->get_field_id( 'title' ); ?>" name="PHP echo $this->get_field_name( 'title' ); ?>" type="text" value="PHP echo esc_attr( $title ); ?>" />
PHP echo $this->get_field_id( 'no_of_posts' ); ?>">PHP _e( '文章条数:','yj' ); ?>
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 ); ?>" />
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',create_function('','return register_widget("yj_Random_Posts");'));
?>
小工具随机文章

相关文章

给WordPress菜单中UL下的某一个或某几个LI添加自定义类

我们有时候在定制WORDPRESS主题的时候，由于菜单样式的要求我...

让WordPress主题支持中文图片及中文附件上传

很多朋友在做wordpree主题制作的时候会经常遇到一个问题，那...

屏蔽wordpress后台无用菜单和模块提升wordpress运行效率

wordpress后台的模块很多，但并不是每个都经常用到。介绍几段...

WordPress导入数据库出现”Unknown collation: ‘utf8mb4_unicode_ci”之类错误的解决办法

从WordPress4.2版本开始，如果我们在MYSQL5.1版本数据中导出...

修改WordPress上传文件大小限制

很多网友会遇到这样一个问题，就是WordPress网站上传图片、附...

WordPress代码高亮插件WP-CodeBox

对于经常要在文章中出现代码的IT相关博客，安装一个代码高亮...

WordPress 开发带缩略图随机文章小工具

流程：

rand-posts.PHP源码

相关文章