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

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

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

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

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

流程:

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

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

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

recent-posts.php源码

 __( '显示你发布的最新文章并且带有缩略图.', '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()) : ?>
		
    have_posts()) : $recent_articles->the_post(); ?>
  • WordPress 开发带缩略图的小工具最新文章
  • Oops, there are no posts.

<?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、静态结构说明

  • 缩略图
    WordPress 开发带缩略图的小工具最新文章
    栏目标题
    发布时间
  • 想修改前端显示样式就从这里下手

    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主题制作教程嵌入头部底部边栏文

    本文由 @程序员小新[Vip] 发布于 职涯宝 ,未经作者许可,禁止转载,欢迎您分享文章

    发表评论

    登录后才能评论
    小程序
    小程序
    微信客服
    微信客服
    QQ客服 建站服务
    分享本页
    返回顶部