WordPress文章页侧边栏添加同分类最新文章小工具

今天看到飞鸟分享的一段WordPress文章页侧边栏添加同分类最新文章小工具的代码，试用了一下，效果不错，所以把方法转发过来，一个目的是为了收藏，另外也可以让更多人看到。

其前端效果如下。（前端效果在不同的主题上略有区别，仅供参考。后续版本会增加其它前端样式）

小工具特点：

1、前端简洁美观，符合大众审美

2、自定义标题，配合不同排序实现多样化小工具

3、自定义数量，控制权完全在你手中

4、自定义时段，可选一年、一月等多个时段，用户体验为王

5、自定义排序，发布时间、更新时间、随机等多种排序方式

注意事项：

按照阅读量排序需主题自带浏览量功能或实用阅读量记录插件，且以自定义栏目记录阅读量，自定义栏目名称为views，否则可能会导致排序错误。

建议只在文章页使用本小工具，否则可能会无法正常显示。

使用方法：

创建一个widget-catpost.php，放入你的主题小工具文件/文件夹中，并适当引用，将下文提供的css代码放入你的style.css文件中

<?php
/*
Widget Name:当前同分类文章 
Description:显示当前文章分类下其他文章，根据排序条件展示。
Version:1.1 
*/

add_action('widgets_init', create_function('', 'return register_widget("cat_post");'));

class cat_post extends WP_Widget {

function cat_post() {
$widget_ops = array('description' => '展示当前文章分类下其他文章(建议只在文章页使用)。');
$this->WP_Widget('cat_post', '同分类文章', $widget_ops);
}

function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['posts_num'] = strip_tags($new_instance['posts_num']);
$instance['time'] = strip_tags($new_instance['time']);
$instance['orderby'] = strip_tags($new_instance['orderby']);
return $instance;
}

function widget($args, $instance) {
extract($args, EXTR_SKIP);
echo $before_widget;
$title = apply_filters('widget_name', $instance['title']);
$posts_num = $instance['posts_num'];
$time = $instance['time'];
$orderby = $instance['orderby'];

echo $before_title.$title.$after_title; 
echo widget_cat_post($posts_num,$time,$orderby);
echo $after_widget;
}

function form($instance) {
$instance = wp_parse_args( (array) $instance, array( 
'title' => '本栏目文章',
'posts_num' => '5',
'time' => '0',
'orderby' => 'date',
));
$title = strip_tags($instance['title']);
$posts_num = strip_tags($instance['posts_num']);
$time = strip_tags($instance['time']);
$orderby = strip_tags($instance['orderby']);

?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"> 填写标题：</label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $instance['title']; ?>" />

</p>
<p>
<label for="<?php echo $this->get_field_id('posts_num'); ?>"> 显示数目：</label>
<input id="<?php echo $this->get_field_id('posts_num'); ?>" name="<?php echo $this->get_field_name('posts_num'); ?>" type="number" value="<?php echo $instance['posts_num']; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('time'); ?>">时间限制：</label>
<select id="<?php echo esc_attr( $this->get_field_id("time") ); ?>" name="<?php echo esc_attr( $this->get_field_name("time") ); ?>">
<option value="0"<?php selected( $instance["time"], "0" ); ?>>不限时间</option>
<option value="1 year ago"<?php selected( $instance["time"], "1 year ago" ); ?>>一年内</option>
<option value="1 month ago"<?php selected( $instance["time"], "1 month ago" ); ?>>一月内</option>
<option value="1 week ago"<?php selected( $instance["time"], "1 week ago" ); ?>>一周内</option>
<option value="1 day ago"<?php selected( $instance["time"], "1 day ago" ); ?>>24小时内</option>
</select>

</p>
<p>
<label for="<?php echo $this->get_field_id('orderby'); ?>">排序依据：</label>
<select id="<?php echo esc_attr( $this->get_field_id("orderby") ); ?>" name="<?php echo esc_attr( $this->get_field_name("orderby") ); ?>">
<option value="date"<?php selected( $instance["orderby"], "date" ); ?>>发布时间</option>
<option value="meta_value_num"<?php selected( $instance["orderby"], "meta_value_num" ); ?>>按阅读量</option>
<option value="title"<?php selected( $instance["orderby"], "title" ); ?>>文章标题</option>
<option value="rand"<?php selected( $instance["orderby"], "rand" ); ?>>随机排序</option>
<option value="comment_count"<?php selected( $instance["orderby"], "comment_count" ); ?>>评论数量</option>
<option value="modified"<?php selected( $instance["orderby"], "modified" ); ?>>修改时间</option>
<option value="ID"<?php selected( $instance["orderby"], "ID" ); ?>>文章ID</option>
</select>
</p>
<?php
}
}
register_widget('cat_post');

function widget_cat_post($posts_num,$time,$orderby){
?>
<div class="cat-post">
<ul>
<?php
$post_num = $posts_num;
$orderby = $orderby;
$category = get_the_category();
$cats = $category[0]->cat_ID; 
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => $posts_num,
'meta_key' => 'views',
'orderby' => $orderby,
'order' => 'DESC',
'cat' => $cats,
'caller_get_posts' => 1,
'date_query' => array(
array(
'after' => $time,
),
),

);
$query_posts = new WP_Query();
$query_posts->query($args);
while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>
<li>
<a href="<?php%20the_permalink();%20?>" title="<?php the_title(); ?>">
<i class="wi wi-right"></i><span class="hot-post-title" ><?php the_title(); ?></span>
</a>
</li>
<?php } wp_reset_query();?>
</ul>
</div>
<?php
}
?>

小工具使用方法；

1、如果你的主题有专门的小工具文件夹如widget文件夹，可以将本小工具文件直接放入，并在functions.php引用该文件（也有在小工具文件夹中自定义一个index.php，该文件已被functions.php引用，此时只需要在index.php引用widget-catpost.php即可）

2、没有专门的文件夹，只有widgets.php文件直接拿出widget-catpost.php文件中的代码，放入widgets.php中即可

3、将widget-catpost.php放入适当的文件夹，并在functions.php调用该文件即可。

CSS代码参考

/* 同分类文章小工具样式 */
.cat-post{
width: 100%;
overflow:hidden;
}
.cat-post ul{
padding: 15px;
}
.cat-post ul li{
width: 99%;
line-height: 28px;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
overflow: hidden;
}
.cat-post ul li a{
font-size: 14px;
}
.cat-post ul li a i{
font-size: 12px;
margin-right: 5px;
}

题外话：本小工具的开发参考了其他作者如知更鸟等大神的代码，算是站在巨人的肩膀上完成的。后续还会新增前端样式、设置等其他功能。如果你有兴趣，敬请期待吧。

原文地址：https://www.yaxi.net/2018-06-09/1815.html