子比主题-卡片列表右上角添加文章发布时间

演示效果：

教程开始：

1.直接把下面的代码/wp-content/themes/zibll-child/inc/functions/zib-posts-list.php

// 在zib_posts_mian_list_card函数中找到$graphic变量后添加：
$time_html = ‘<div class=”absolute-right-top padding-6″>’;
$time_html .= ‘<span class=”badg c-yellow”><i class=”fa fa-bolt”></i> ‘.get_the_date(‘Y-m-d’).'</span>’;
$time_html .= ‘</div>’;


// 然后在$html拼接部分修改为：
$html .= ‘<posts class=”‘ . $class . ‘”>’;
$html .= $graphic;
$html .= $time_html; // 添加时间显示
$html .= ‘<div class=”item-body”>’;
$html .= $title;
$html .= $badge;
$html .= $meta;
$html .= ‘</div>’;
$html .= ‘</posts>’;

2.后台自定义CSS添加下面的代码

/* 添加在主题自定义CSS中 */
.absolute-right-top {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.badg.c-yellow {
background: rgba(255,193,7,0.15);
color: #ffc107;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
.badg.c-yellow i {
margin-right: 3px;
}

如何你在卡片列表已经做过其它的美化，用下面的代码替换CSS

.post-date {
    position: absolute;
    top: 10px; /* 根据需要调整距离顶部的距离 */
    right: 20px; /* 根据需要调整距离右侧的距离 */
    background-color: white; /* 根据需要调整背景色 */
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px; /* 根据需要调整字体大小 */
    color: black; /* 根据需要调整字体颜色 */
}

.absolute-right-top {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.badg.c-yellow {

color: black;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
.badg.c-yellow i {
margin-right: 3px;
}

到此教程结束。

阿七源码友情提示：修改原代码做好备份