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

前端之家收集整理的这篇文章主要介绍了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()) : ?>