教程
找到主题文件:/wp-content/themes/zibll/inc/functions/zib-posts-list.php然后在里面搜索 :获取卡片模式的文章列表 如图
替换为下方代码:
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="card-top-date" style="position: absolute; top: 10px; right: 10px; z-index: 2;">'; $html .= '<div class="post-time">'; $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="16" height="16">'; $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 class="full-date">' . $zbbox_date . '</span>'; $html .= '<span class="short-date">' . $date . '</span>'; $html .= '</div>'; $html .= '</div>'; // ========== ⬆️ 新增结束 ========== // // ========== 原始结构 100% 保留 ========== // $html .= $graphic; $html .= '<div class="item-body">'; $html .= $title; $html .= $badge; $html .= $meta; $html .= '</div>'; $html .= '</posts>'; return $html; }
CSS代码
/* 文章卡片基础样式背景美化 */ .card-top-date .post-time{color:#777;font-size:14px;display:flex;align-items:center;gap:4px;background:0 0;padding:0;border:none;box-shadow:none}.card-top-date .post-time .icon{vertical-align:middle}.card-top-date .post-time .full-date{display:inline-block}.card-top-date .post-time .short-date{display:none}@media (max-width:768px){.card-top-date .post-time .full-date{display:none}.card-top-date .post-time .short-date{display:inline-block}}