WordPress 开发带缩略图随机文章小工具
发布:WordPress教程网 发布时间:
2023-03-08 游览次数:12次
为了让你的随机文章看起来更吸睛,这里加上特色图像的缩略图,效果如本站左边栏的随机文章,步骤和代码如下:
后台-外观-小工具-效果如下图:

流程:
一、主题根目录下创建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");'));
?>
标签 : wordpress教程 , 缩略图 , 自定义小工具 , 随机文章
本文版权归原作者所有,转载请注明原文来源出处, WordPress教程网 感谢您的支持!
本文链接: http://www.wpcn.net/1804.html
推荐内容
热点阅读
相关内容
- WordPress手动升级详细步骤
- WordPress手动安全升级
- WordPress后台无插件显示文章和分类ID
- WordPress优化:wp_head和remove_action函数
- query_posts函数把你的wordpress博客变成CMS
- Bootstrap替换WordPress的get_search_form()…
- WordPress 函数:register_sidebar()创建主…
- wp_list_comments()使用回调函数自定义评论…
- WordPress过滤器(Filters):apply_filters和…
- WordPress函数:comments_template(加载评…
- WordPress函数:comment_form( )个性化评论…
- 无处不在的WordPress的主循环
- WordPress 函数do_action()详解和应用举例
- WordPress函数:add_menu_page()后台添加顶…
- WordPress函数:add_theme_page()后台添加设…
- WordPress函数:add_submenu_page()后台为顶…
- WordPress 函数:get_template_part()调用你…
- WordPress函数:load_theme_textdomain()(…
- WordPress 3D旋转彩色标签云
- WordPress文本小工具运行PHP
- WordPress无插件实现主题彩色标签云的N种方…
- WordPress函数:wp_tag_cloud(标签云)详解和…
- WordPress函数:register post type (自定义…
- WordPress使用register_post_type 函数创建…