右侧新增最后更新文章的小工具

2025年7月23日2025年7月30日网站公告cheshirex,柴郡猫

新增最后更新文章的小工具区域，目前是仅显示资源分享目录中的最新更新文章，显示10篇。

同时去除右侧原来的广告图片，0收益没什么用。

小工具代码

增加css样式

在主题额外CSS中增加：

.updated-posts-container {
max-width: 600px;
margin: 0 auto;
}
.updated-post-item {
display: flex;
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
.updated-post-item:last-child {
border-bottom: none;
}
.thumb-wrap {
flex: 0 0 100px;
height: 100px;
margin-right: 12px;
overflow: hidden;
border: 1px solid #ccc;
background: #f8f8f8;
}
.thumb-img {
width: 100px;
height: 100px;
object-fit: cover;
display: block;
}
.no-thumb {
width: 100px;
height: 100px;
background: #eee;
}
.post-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.post-title {
font-weight: 700;
color: #0056b3;
font-size: 14px; /* 已调小 */
margin: 0 0 6px;
line-height: 1.3;
text-decoration: none;
}
.post-title:hover {
text-decoration: underline;
}
.post-time {
margin: 0;
font-size: 12px;
color: #888;
}

修改functions.php

'posts_per_page' => 10---设置显示文章数量
'post_type' => ['post', 'page'], // 会查询文章和页面最后更新，如果只需要文章就用'post_type' => 'post',

在子主题functions.php中增加下面代码：

//下方为最后更新时间文章小工具展示代码
function show_updated_posts_style($atts) {
// 允许传入 category 参数
$atts = shortcode_atts([
'category' => '',
], $atts, 'updated_posts');

$args = [
'post_type' => 'post',
'posts_per_page' => 10,
'orderby' => 'modified',
'order' => 'DESC',
];

// 如果指定了分类 ID 或别名，就加入查询
if (!empty($atts['category'])) {
if (is_numeric($atts['category'])) {
$args['cat'] = intval($atts['category']); // 分类 ID
} else {
$args['category_name'] = sanitize_title($atts['category']); // 分类别名
}
}

$query = new WP_Query($args);
$output = '<div class="updated-posts-container">';
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
if (has_post_thumbnail()) {
$thumb = get_the_post_thumbnail(get_the_ID(), [100, 100], ['class' => 'thumb-img']);
} else {
$thumb = '<div class="thumb-img no-thumb"></div>';
}
$modified_time = get_the_modified_time('Y-m-d H:i');
$output .= '<div class="updated-post-item">';
$output .= '<div class="thumb-wrap">' . $thumb . '</div>';
$output .= '<div class="post-info">';
$output .= '<a class="post-title" href="' . get_permalink() . '">' . get_the_title() . '</a>';
$output .= '<p class="post-time">更新时间：' . $modified_time . '</p>';
$output .= '</div></div>';
}
} else {
$output .= '<p>暂无文章。</p>';
}
wp_reset_postdata();
$output .= '</div>';
return $output;
}
add_shortcode('updated_posts', 'show_updated_posts_style');