文章目录[隐藏]
以前曾经分享了一篇 给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源码
<?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()) : ?> <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/511yj.jpg"></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', create_function('', 'return register_widget("yj_Random_Posts");')); ?>