详情
评论
问答

子比主题美化 – 首页文章卡片模式添加更新时间

原帖地址

https://www.zibll.com/forum-post/37897.html#article

效果图展示

20250807185823700-6

观赏性以及美观性加强,更新文章的日期一目了然,看着更加美观

找到主题文件:/wp-content/themes/zibll/inc/functions/zib-posts-list.php
 
然后在里面搜索 :获取卡片模式的文章列表 如图

20250807185123299-1

这整段代码替换以下代码即可:

//获取卡片模式的文章列表
function zib_posts_mian_list_card($args = array())
{
    //准备必要参数
//文章右上角显示时间
    $zbbox_date = get_the_date('Y-m-d');
    $date = get_the_date('m-d');
//文章右上角显示时间
    $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(empty($args['no_author']), true);

    $class = 'posts-item card ajax-item';
    $style = _pz('list_card_option', '', 'style');
    $class .= $style && $style != 'null' ? ' ' . $style : '';

    $html = '';
    $html .= '<posts class="' . $class . '">';
 //文章右上角显示时间
    $html .= '<div class="item-body">';
    $html .= '<div class="tools">';
    $html .= '<div class="circle">';
    $html .= '<span class="red zbbox"></span>';
    $html .= '</div>';
    $html .= '<div class="circle">';
    $html .= '<span class="yellow zbbox"></span>';
    $html .= '</div>';
    $html .= '<div class="circle">';
    $html .= '<span class="green zbbox"></span>';
    $html .= '</div>';
    $html .= '<span class="zbbox_soft_time" style="color: #7772ff; text-align: right;">';
    $html .= '<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">';
    $html .= '<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>';
    $html .= '<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>';
    $html .= '</svg>';
    $html .= '</span>';
//文章右上角显示时间
 $html .= '<div class="zbbox_posts_wap">' . $zbbox_date . '</div>';//电脑
    $html .= '<div class="wppc">' . $date .'</div>';
    $html .= '</div>';
    $html .= $graphic;
    $html .= $title;
    $html .= $badge;
    $html .= $meta;
    $html .= '</div>';
    $html .= '</posts>';
    return $html;
}

然后添加以下自定义CSS代码到子比后台自定义CSS

.tools {
    display: flex;
    align-items: center;
    margin-top: -3px;
    margin-bottom: 5px;
    height: 22px;
}
.circle {
    padding: 0 4px;
}

.zbbox {
    display: inline-block;
    align-items: center;
    width: 10px;
    height: 10px;
    padding: 1px;
    border-radius: 50%;
}

.red {
    background-color: #2997f7;
}

.yellow {
    background-color: #ff5144;
}

.green {
    background-color: #bfc930;
}

span.zbbox_soft_time {
    font-size: 14px;
    color: #787777;
    margin-left: auto;
    margin-right: 5px;
    right: 0;
    pointer-events: none;
}

.zbbox_soft_time svg {
    margin-right: 2px;
}

@media screen and (max-width: 1221px) {
    .zbbox_posts_wap { 
        display: none;
    }
}

.wppc {
    display: none;
}

@media (max-width: 767px) {
    .wppc {
        display: block !important;
    }
}

如果想在上面加个背景颜色可以添加以下css代码在子比自定义CSS即可 图片记得保存本地化

/* 首页文章卡片背景 */
.posts-item.card {
padding: 10px 10px 10px 10px!important;
background: url('https://www.dsdnn.cn/wp-content/uploads/2025/08/20250807190050574-2.png') no-repeat,linear-gradient(to bottom,#ECF5FF,#FFFFFF);
}
温馨提示:文章具有时效性,若有错误或已失效,请在下方留言或联系站长
© 版权声明

THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容