WordPress子比主题版权美化
起因
因为我之前写过butterfly的版权美化
所以我一直想给子比的版权也做个美化，所以我就开始了紧张的移植(摸鱼)工作
更新日志
最新更新日期：3/29
3/29
更新FontAwesome导致的显示和加载问题
3/18
发布第一版
效果
![图片[1]-WordPress子比主题版权美化-小N同学](https://ask.qcloudimg.com/http-save/yehe-6779133/014aba18720d25241375fb27453be0db.png)
图片[1]-WordPress子比主题版权美化-小N同学
![图片[2]-WordPress子比主题版权美化-小N同学](https://ask.qcloudimg.com/http-save/yehe-6779133/0e351ef76a53f09e1fef405f7e06db64.png)
图片[2]-WordPress子比主题版权美化-小N同学
其中URL颜色是根据主题色调整的！
代码
<head>
<style type="text/css">
.post-copyright {
box-shadow: 2px 2px 5px;
line-height: 2;
position: relative;
margin: 40px 0 10px;
padding: 10px 16px;
border: 1px solid var(--light-grey);
transition: box-shadow .3s ease-in-out;
overflow: hidden;
border-radius: 12px!important;
background-color: var(--main-bg-color);
}
.post-copyright:before {
position: absolute;
right: -26px;
top: -120px;
content: '\f25e';
font-size: 200px;
font-family: 'FontAwesome';
opacity: .2;
}
.post-copyright__title {
font-size: 22px;
}
.post-copyright_type {
font-size: 18px;
color:var(--theme-color)
}
.post-copyright .post-copyright-info {
padding-left: 6px;
font-size: 15px;
}
.post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, .post-copyright-m-info .post-copyright-u {
display: inline-block;
width: fit-content;
padding: 2px 5px;
font-size: 15px;
}
.muted-3-color {
color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px){.post-copyright-m-info{display:none}}
</style>
</head>
<body>
<div class="post-copyright" style="max-width:800px;margin:0 auto;">
<div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong><script>document.write(document.title);</script></strong></span></div>
<div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type"><script>var url = window.location.href;document.write(document.URL);</script></span></div>
<div class="post-copyright-m">
<div class="post-copyright-m-info">
<div class="post-copyright-a">
<strong>文章作者</strong>
<div class="post-copyright-cc-info">
<strong><a href="https://www.nesxc.com/">Charon小N同学</a></strong>
</div>
</div>
<div class="post-copyright-c" style="margin:10px 20px">
<strong>隐私政策</strong>
<div class="post-copyright-cc-info">
<strong><a href="https://www.nesxc.com/privacy-policy-2/">PrivacyPolicy</a></strong>
</div>
</div>
<div class="post-copyright-u" style="margin:10px 20px">
<strong>用户协议</strong>
<div class="post-copyright-cc-info">
<strong><a href="https://www.nesxc.com/use-generator/">UseGenerator</a></strong>
</div>
</div>
<div class="post-copyright-c" style="margin:10px 20px">
<strong>许可协议 </strong>
<div class="post-copyright-cc-info">
<a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a>
<strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">NC-SA 4.0</a></strong></div>
</div>
</div>
</div>
</div>
</body>其中的手机优化是将四个小模块隐藏以达到手机端阅读体验优化的效果
把代码内的url和名称改成你的即可。
安装方法
复制上述代码，前往主题配置页面-文章-文章页面
![图片[3]-WordPress子比主题版权美化-小N同学](https://ask.qcloudimg.com/http-save/yehe-6779133/0c7c35a74fcb32646164e186cff3087f.png)
图片[3]-WordPress子比主题版权美化-小N同学
找到版权设置页面
![图片[4]-WordPress子比主题版权美化-小N同学](https://ask.qcloudimg.com/http-save/yehe-6779133/76c08997a1accbddc8753546b23ebb6a.png)
图片[4]-WordPress子比主题版权美化-小N同学
将上面的代码插入保存即可。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录