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

在我们的wordpress边栏想显示我们发布的最新文章，并且带上缩略图，很多插件能帮我们完成这个功能，其实我们完全可以自己DIY，和wordpress原生态的小工具一样，直接拖过去就OK了，这里把流程和代码分享一下，有需要的朋友可以自己二次开发。本站的左边兰的最新文章就是采用了这个方法。

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

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

流程：

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

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

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

recent-posts.php源码

<?php
/*** 带缩略图的最新文章小工具** web:www.511yj.com*/
class yj_Recent_Posts extends WP_Widget {public function __construct() {parent::__construct('yj_rp', // Base ID__('最新文章', 'yj'), // Namearray( 'description' => __( '显示你发布的最新文章并且带有缩略图.', '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);     // The Query$recent_articles = new WP_Query( $qa );if($recent_articles->have_posts()) : ?><ul class="rp"><?phpwhile($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/nthumb.png"></a></div><?phpendif; ?>    <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>                   <?phpendwhile;else: ?>      Oops, there are no posts.       <?phpendif;?></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', 'register_yj_widget' );
function register_yj_widget() {  register_widget( 'yj_Recent_Posts' );
}

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

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

重要说明：

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

.rp-thumb img{width:60px;height::60px;}

2、静态结构说明

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

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

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

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

.rp-thumb {display:none;}

您可能感兴趣的文章:

▪ wordpress主题开发创建你喜欢的小工具

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

▪ 第七课WordPress主题制作综合教程头部Brand设计

▪ wordpress优化title的seo技巧

▪ 第十课:wordpress主题制作主题布局

▪ 第六课511遇见Wordpress主题制作标题函数wp_title

▪ wordpress调用最新文章五种方法包括排除置顶文章

▪ 第一课：511遇见wordpress本地环境搭建以及多站点配置

▪ 第九课WordPress主题制作自定义顶部图像

▪ 第四课wordpress主题制作教程嵌入头部底部边栏文

WordPress 开发带缩略图的小工具最新文章相关推荐

WordPress 开发带缩略图随机文章小工具
以前曾经分享了一篇给WordPress后台小工具增加一个随机文章,但没有附加缩略图的功能,为了让你的随机文章看起来更吸睛,这里加上特色图像的缩略图,效果如本站左边栏的随机文章,步骤和代码如下: 后台 ...
wordpress后台管理（八）外观-小工具：管理常用的DUX主题附带的小工具或wordpress自带的小工具
本篇文章,可以结合我的主页或上一篇文章,看看我公共头部添加的那些工具.外观-小工具中,就是用来管理常用的DUX主题附带的小工具或wordpress自带的小工具:
WordPress添加侧栏小工具-博客统计(网站统计)
WordPress侧边栏"博客统计"小工具的制作方法.首先要下载cztcms.zip文件,解压得到一个PHP文件.蓝奏云地址:▶ cztcms.zip 1.将这个PHP文件放到主题 ...
WordPress如何调用其他网站的最新文章
WordPress开发网站想在主题设置的某个位置专门来显示作者网站里某个分类下的文章:或者我们想在一个网站里调用另外一个WordPress网站内的文章,在网上找了很多方法,好多都是两个站点都是Word ...
wordpress多站点主站调用分站最新文章_企业网站SEO最新的7个优化步骤！
如果你是一个企业主,你有建立企业官方网站的经验,在2-3年的运作中,我相信你至少修改了一个网站,甚至做了一个重大的SEO策略调整.当我们开始建立一个公司的时候,很多时候就是认为只要我们有一个公司的网站 ...
php如何设置标题的图标,WordPress最新文章标题添加最新图标标志方法
我们是否经常有些WordPress程序的个人博客最新文章标题旁边会有一个New最新图标的标志.虽然这个功能并不是多么伟大,但是在有些细节上确实让用户在浏览网站的时候有点新意.至少可以告诉用户最新一天或 ...
WordPress自定义小工具
介绍在WordPress自带的小工具无法满足你的需要时,只能是自定义了. 查看原文:http://surenpi.com/2015/11/04/wordpress%e8%87%aa%e5%ae%9a ...
正则表达式之小工具系列
正则表达式之小工具系列文章目录正则表达式之小工具系列一.cut列截取工具二.sort排序工具三.uniq去重四.tr替换五.混合题目一.cut列截取工具指定截取列和awk差不多,但是 ...
【Python的自学之路】(六):案例分析第四课-小工具2.0
目录序言背景思路代码及解析跋文序言小工具1.0版本,备份oracle存储过程的小工具上篇文章已经都了解完毕了,下面继续进行功能升级,2.0版本-表数据的导出功能. 背景案例分析第四课- ...

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

重要说明：

WordPress 开发带缩略图的小工具最新文章相关推荐

最新文章

热门文章