效果展示:
![[亲测可用]子比主题卡片模式的文章列表Mac三点和时间显示功能-子比主题美化教程](https://yizhi2024.top/wp-content/uploads/2026/06/20260615235421708-学社山中人_2026-06-15_23-53-25.webp)
第一:
在宝塔面板中,找到zib-posts-list.php文件,路径:域名/wp-content/themes/zibll/inc/functions,打开文件,搜索:卡片模式,如下图,替换框选的这一整段,替换代码为以下代码
![[亲测可用]子比主题卡片模式的文章列表Mac三点和时间显示功能-子比主题美化教程](https://yizhi2024.top/wp-content/uploads/2026/06/20260615234654875-学社山中人_2026-06-15_23-46-38.webp)
//获取卡片模式的文章列表
function zib_posts_mian_list_card($args = array())
{
$graphic = zib_get_posts_thumb_graphic();
$title = zib_get_posts_list_title();
$badge = zib_get_posts_list_badge($args);
$meta = zib_get_posts_list_meta(!$args['no_author'], true);
$class = 'posts-item ajax-item card';
$style = _pz('list_card_option', '', 'style');
$class .= $style && $style != 'null' ? ' ' . $style : '';
// 三点和时间功能开始
$svg_icon = '<svg t="1718343757391" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6786" width="20" height="20">
<path d="M690.176 843.776l239.616-358.4c10.24-14.336 6.144-32.768-8.192-43.008-4.096-4.096-10.24-6.144-16.384-6.144H716.8v-225.28c0-16.384-14.336-30.72-30.72-30.72-10.24 0-20.48 6.144-24.576 14.336L421.888 552.96c-10.24 14.336-6.144 32.768 8.192 43.008 4.096 4.096 10.24 6.144 16.384 6.144H634.88v225.28c0 16.384 14.336 30.72 30.72 30.72 10.24 0 20.48-6.144 24.576-14.336z" p-id="6787" fill="#17abe3"></path>
<path d="M204.8 231.424h204.8c34.816 0 61.44 26.624 61.44 61.44s-26.624 61.44-61.44 61.44H204.8c-34.816 0-61.44-26.624-61.44-61.44s26.624-61.44 61.44-61.44z m0 491.52h204.8c34.816 0 61.44 26.624 61.44 61.44s-26.624 61.44-61.44 61.44H204.8c-34.816 0-61.44-26.624-61.44-61.44s26.624-61.44 61.44-61.44z m-81.92-245.76h163.84c34.816 0 61.44 26.624 61.44 61.44s-26.624 61.44-61.44 61.44H122.88c-34.816 0-61.44-26.624-61.44-61.44s26.624-61.44 61.44-61.44z" opacity=".3" p-id="6788" fill="#17abe3"></path>
</svg>';
$html = '';
$html .= '<posts class="' . $class . '">
<div class="item-body">';
global $post;
$post_id = $post->ID;
$cache_key = 'post_modified_time_' . $post_id;
$modified_time = get_transient($cache_key);
if (false === $modified_time) {
$query = new WP_Query(array(
'post__in' => array($post_id),
'fields' => 'ids',
));
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$modified_time = array(
'full' => get_the_modified_time('Y-m-d'),
'short' => get_the_modified_time('m-d')
);
}
}
wp_reset_postdata();
set_transient($cache_key, $modified_time, HOUR_IN_SECONDS);
}
if (is_array($modified_time) && isset($modified_time['full']) && isset($modified_time['short'])) {
$html .= '<div class="tools">
<div class="circle">
<span class="red tfbox"></span>
</div>
<div class="circle">
<span class="yellow tfbox"></span>
</div>
<div class="circle">
<span class="green tfbox"></span>
</div>
<span class="tengfei_soft_time" style="color: #7772ff; text-align: right;">
' . $svg_icon . '
</span>
<div class="tengfei_posts_wap">
' . $modified_time['full'] . '
</div>
<div class="wppc">
' . $modified_time['short'] . '
</div>
</div>';
} else {
$html .= '<div class="tools">
<div class="circle">
<span class="red tfbox"></span>
</div>
<div class="circle">
<span class="yellow tfbox"></span>
</div>
<div class="circle">
<span class="green tfbox"></span>
</div>
<span class="tengfei_soft_time" style="color: #7772ff; text-align: right;">
' . $svg_icon . '
</span>
<div class="tengfei_posts_wap">
N/A
</div>
<div class="wppc">
N/A
</div>
</div>';
}
// 三点和时间功能结束
$html .= $graphic;
$html .= $title;
$html .= $badge;
$html .= $meta;
$html .= '</div>';
$html .= '</posts>';
return $html;
}
第二:
在网站后台-主题设置,全局设置-自定义CSS代码,复制粘贴以下代码
测试环境:
宝塔面板Ubantu22.04
子比主题文件版本V8.6
标题带有亲测,是经过一定测试的源码或工具;破解软件或绿色软件一般都会报毒,如果您害怕,请勿下载安装,感谢
© 版权声明
THE END
相关推荐


![[亲测可用]子比主题网站会员点击会员按钮依然能进入会员页面-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/11/20241125195451688-学社山中人_2024-11-25_19-54-42.webp)

![鼠标移动到文章标题变色[子比主题美化教程]-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/04/Snipaste_2024-04-07_21-41-49-1024x469.png)
![[亲测可用]网站免费天气代码-添加实时天气教程-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/11/20241125200837690-学社山中人_2024-11-25_20-08-22.webp)
![[亲测可用]子比主题去除文章页面作者信息板块-子比主题美化-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/10/20241008144538199-学社山中人_2024-10-08_14-44-24.webp)
![[亲测可用]IDM6.42免费安装已激活pj版-重新打包版(Windows软件)-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/09/20240925213046592-学社山中人_2024-09-25_21-30-24.webp)
![[亲测搭建可用]美女写真打赏视频打赏系统2024.3.31(带有视频搭建教程和使用教程)-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/03/image-49.png)

![[亲测可用]美团京东拼多多代付三合一版本代付源码(搭建教程+配置教程)-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/09/20240913000623356-1.webp)

![[亲测可用]百度文库下载器-学社山中人](https://yizhi2024.top/wp-content/uploads/2025/12/20251208200331306-image.png)
![[亲测可用]易支付/码支付使用教程(梦码助手)24.07.28-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/05/image-58-1024x469.png)
![[亲测可用]写真视频打赏源码网站子比二开写真视频打赏网站源码-学社山中人](https://yizhi2024.top/wp-content/uploads/2024/08/20240830165645811-下载.jpg)
