我在轩玮博客的网站上看到这个效果，问别人能提供一下教程不，，可我不想买，就花时间研究了一下，现在我自己的站轩玮博客也加上去了，而且还适配了手机显示日期的效果

效果演示：

部署教程：
1.直接把下面的代码/wp-content/themes/zibll/inc/functions/zib-posts-list.php

找到：

//准备必要参数
    $graphic = zib_get_posts_thumb_graphic();

后面添加：

[hidecontent type=”payshow” desc=”隐藏内容：付费阅读”]

/ 找到$graphic变量后添加：轩玮博客 xuwbk.com
$time_html = '<div class="absolute-right-top padding-6">';
$time_html .= '<span class="badg c-yellow"><i class="fa fa-bolt"></i> ';
$time_html .= wp_is_mobile() ? get_the_date('m-d') : get_the_date('Y-m-d');
$time_html .= '</span>';
$time_html .= '</div>';  //这里为添加部分

继续找到：

html .= $graphic;

后面添加：

$html .= $time_html; // 添加时间显示

 

[/hidecontent]

2：在后台自定义添加CSS

[hidecontent type=”reply” desc=”隐藏内容：评论后查看”]

*卡片列表添加时间开始 轩玮博客 xuwbk.com*/
/* 基础样式 – 适配PC和手机 */
.absolute-right-top {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}

.badg.c-yellow {
display: inline-block;
padding: 2px 8px;
font-size: 14px; /* 默认14px字体 */
color: #000000; /* 黑色文字 */
background-color: transparent !important; /* 透明背景 */
border: none !important; /* 强制去除边框 */
box-shadow: none !important;
}

.badg.c-yellow i.fa-bolt {
color: #0066ff; /* 蓝色闪电图标 */
margin-right: 4px;
}

/* 手机适配 */
@media (max-width: 767px) {
.badg.c-yellow {
font-size: 14px; /* 手机端缩小字体 */
padding: 1px 6px;
}

.badg.c-yellow .fa-bolt {
font-size: 12px;
}
.absolute-right-top {
padding: 4px; /* 调整手机端间距 */
}
}

/* 去除移动端点击高亮 */
.badg.c-yellow {
-webkit-tap-highlight-color: transparent;
}

[/hidecontent]

 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。