纯代码实现WordPress同分类文章列表小工具

一般wordpress的侧边栏小工具都是调用整站的文章,螳螂妖的动机认为这对于SEO其实是不友好的。

今天就分享一个WordPress同分类文章列表小工具,自带设置选项包括显示数量、时段限制、排序依据等。通过合理的设置,可以大大提高相关文章内链效果,给访客一个良好的阅读引导,进一步提高访问量。

WordPress同分类文章列表小工具

WordPress同分类文章列表小工具,顾名思义:显示与目前文章相同分类下的其他文章,以列表形式展现。并通过数量、时段、排序依据等来实现不同的列表,

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

自定义时段,可选一年、一月等多个时段

小工具特点:

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

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

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

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

自定义时段,可选一年、一月等多个时段

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

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

注意事项:

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

螳螂妖的动机:建议只在文章页使用本小工具,否则可能会无法正常显示。

使用方法:

下载本文后方提供的widget-catpost.php,放入你的主题小工具文件/文件夹中,并适当引用,将下文提供的css代码放入你的style.css文件中

附:常见的小工具使用方法;

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调用该文件即可。

小工具代码和下载地址:

下载地址:widget-catpost

具体代码如下:

<?php
/*
Widget Name:当前同分类文章 
Description:显示当前文章分类下其他文章,根据排序条件展示。
Version:1.1 
Author:雅兮网 
Author URI:https://www.yaxi.net
*/

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 the_permalink(); ?>" 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
}
?>

CSS代码参考

/* 同分类文章小工具样式 by 雅兮网yaxi.net */
.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

未经允许不得转载:地下室先生博客 » 纯代码实现WordPress同分类文章列表小工具

赞 (1) 打赏作者

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏