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

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

511遇见

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

流程:

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

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

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

recent-posts.php源码

  1. <?php
  2. /**
  3.  * 带缩略图的最新文章小工具
  4.  *
  5.  * web:www.511yj.com
  6.  */
  7. class yj_Recent_Posts extends WP_Widget {
  8. 	public function __construct() {
  9. 		parent::__construct(
  10. 			'yj_rp', // Base ID
  11. 			__('最新文章', 'yj'), // Name
  12. 			array( 'description' => __( '显示你发布的最新文章并且带有缩略图.', 'yj' ), ) // Args
  13. 		);
  14. 	}
  15. 	public function widget( $args, $instance ) {
  16. 	if (isset($instance['title'])) :
  17. 		$title = apply_filters( 'widget_title', $instance['title'] );
  18. 		$no_of_posts = apply_filters( 'no_of_posts', $instance['no_of_posts'] );
  19. 	else :
  20. 		$title = __('Latest Posts','yj');
  21. 		$no_of_posts = 5;
  22. 	endif;				
  23. 		echo $args['before_widget'];		
  24. 		if ( ! empty( $title ) )
  25. 			echo $args['before_title'] . $title . $args['after_title'];		
  26. 		// WP_Query arguments
  27. 		$qa = array (
  28. 			'post_type'              => 'post',
  29. 			'posts_per_page'		 => $no_of_posts,
  30. 			'offset'				 => 0,
  31. 			'ignore_sticky_posts'    => 1
  32. 		);		
  33. 		// The Query
  34. 		$recent_articles = new WP_Query( $qa );
  35. 		if($recent_articles->have_posts()) : ?>
  36. 		<ul class="rp">
  37. 		<?php
  38. 			while($recent_articles->have_posts()) : 
  39. 			$recent_articles->the_post();
  40.          ?>        		 
  41. 		         <li class='rp-item'>
  42. 		         <?php if( has_post_thumbnail() ) : ?>
  43. 		         <div class='rp-thumb'><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
  44. 		         <?php 
  45. 		         else :
  46. 		         ?>
  47. 		         <div class='rp-thumb'><a href="<?php the_permalink(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/nthumb.png"></a></div>
  48. 		         <?php
  49. 		         endif; ?>	
  50. 		         <div class='rp-title'><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
  51. 		         <div class='rp-date'><?php the_time('Y-m-j'); ?></div>
  52. 		         </li>      		      
  53. 		<?php
  54. 		      endwhile;
  55. 		   else: 
  56. 		?>		
  57. 		      Oops, there are no posts.		
  58. 		<?php
  59. 		   endif;
  60. 		?>
  61. 		</ul>
  62. 		<?php		
  63. 		echo $args['after_widget'];
  64. 	}
  65.  	public function form( $instance ) {
  66. 		if ( isset( $instance[ 'title' ] ) ) {
  67. 			$title = $instance[ 'title' ];
  68. 		}
  69. 		else {
  70. 			$title = __( '最新文章', 'yj' );
  71. 		}
  72. 		if ( isset( $instance[ 'no_of_posts' ] ) ) {
  73. 			$no_of_posts = $instance[ 'no_of_posts' ];
  74. 		}
  75. 		else {
  76. 			$no_of_posts = __( '5', 'yj' );
  77. 		}
  78. 		?>
  79. 		<p>
  80. 		<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '栏目标题:','yj' ); ?></label> 
  81. 		<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 ); ?>" />		
  82. 		<label for="<?php echo $this->get_field_id( 'no_of_posts' ); ?>"><?php _e( '文章条数:', 'yj' ); ?></label>
  83. 		<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 ); ?>" />
  84. 		</p>
  85. 		<?php 
  86. 	}	
  87. 	public function update( $new_instance, $old_instance ) {
  88. 		$instance = array();
  89. 		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
  90. 		$instance['no_of_posts'] = ( ! empty( $new_instance['no_of_posts'] ) ) ? strip_tags( $new_instance['no_of_posts'] ) : '5';
  91. 		if ( is_numeric($new_instance['no_of_posts']) == false ) {
  92. 			$instance['no_of_posts'] = $old_instance['no_of_posts'];
  93. 			}
  94. 		return $instance;		
  95. 	}
  96. }
  97. add_action( 'widgets_init', 'register_yj_widget' );  
  98. function register_yj_widget() {  
  99.     register_widget( 'yj_Recent_Posts' );  
  100. }

在functions.php文件中导入recent-posts.php,

  1. require get_template_directory() . '/recent-posts.php';

重要说明:

1、上面的代码中我们给div 加了class='rp-thumb'所以想定义样式可以在你的样式表里style.css这样就可以了,比如我们把缩略图定义为60*60

  1. .rp-thumb img{
  2. 	width:60px;
  3. 	height::60px;
  4. 	}

2、静态结构说明

  1. <li class='rp-item'>		    
  2.   <div class='rp-thumb'><a>缩略图</a></div>
  3.   <div class='rp-thumb'><a href="<?php the_permalink(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/nthumb.png"></a></div>		       
  4.   <div class='rp-title'><a>栏目标题</a></div>
  5.   <div class='rp-date'>发布时间</div>
  6.  </li>

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

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

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

  1. .rp-thumb {
  2. 	display:none;
  3. 	}

发布日期:

所属分类: Wordpress 综合 标签: