初一小盏版 – 文章自定义前缀-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

初一小盏版 – 文章自定义前缀

该帖子部分内容已隐藏
付费阅读
已售 10
10
此内容为付费阅读,请付费后查看

根据https://www.zibll.com/forum-post/22599.html的创意自己写的代码,原理是使用CSF框架创建一个metabox给文章储存相关数据,然后通过过滤文章标题实现在文章前面增加前缀

效果演示:子比主题_初一小盏 (vxras.com)

前后台截图

20240609155036508-image-38

20240609155046207-image-39

20240609155055596-image-40

20240609155105139-image-41

代码

代码放在functions.php下或func.php

css

.DearLicy_prefix{
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 4px;
    margin-right: 3px;
    height: 19px;
    font-size: 12px;
    top: -3px;
    clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%);
}
.DearLicy_prefix:after, .DearLicy_prefix:after {
    position: absolute;
    content: " ";
    display: block;
    left: -100%;
    top: -5px;
    width: 15px;
    height: 145%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    animation: sweepTitle 3s ease-in-out infinite;
    transform: rotate(28deg);
}
@keyframes sweepTitle {
    0% {
        left: -100%
    }

    100% {
        left: 100%
    }
}

 

请登录后发表评论