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'。

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

Tags：wordpress教程   缩略图   自定义小工具   随机文章

转载：感谢您对Jerbo个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源Jerbo个人博客”。/web/wordpress/263.html

很赞哦！ ()