美化版权声明

发布于 2022-02-27  473 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
先来预览一下

开工

打开主题 /Sakura/tpl/content-single.php 文件 约 33行 代码

<footer class="post-footer">

移除下面代码

<div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"  target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> <?php _e('Attribution-NonCommercial-ShareAlike 4.0 International','sakura'); /*知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议*/?></a></div>

然后添加下面代码

<div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>  <?php the_title(); ?></h></span></div>
<div class="post-copyright__type"><span class="post-copyright-info"><a href="<?php echo get_permalink()?>"><?php echo get_permalink()?></a></span></div>
<div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>killua</h></div></div>
<div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h><?php the_time('Y-n-d'); ?></h></div></div>
<div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h><?php the_modified_time('Y-n-d'); ?></h></div></div>
<div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fa fa-creative-commons" aria-hidden="true"></i> </a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div>
保存

然后

后台-自定义CSS 或者 主题内的 style.css 添加下面CSS 代码(修改代码中的图片地址 下载地址 https://pan.cbbkk.com/cc_icon.rar )

/* 版权声明 */
h {
    color: #ff8c00;
    font-size: 16px;
}
.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;
text-align: center;
}
.post-footer {
	    padding: 20px 10px;
	    -webkit-box-shadow: 2px 2px 5px;
    box-shadow: 2px 2px 5px;
	height: 180px!important;
  background-color: #eff1f3;
			border-radius: 12px !important;
	background-image: url(/wp-content/uploads/cc_icon-1.png); //自行修改图片地址
	background-position: right 10px center;
	background-repeat: no-repeat;
	  -webkit-transition: box-shadow 0.3s ease-in-out;
  -moz-transition: box-shadow 0.3s ease-in-out;
  -o-transition: box-shadow 0.3s ease-in-out;
  -ms-transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
}
.post-footer:hover {
	webkit-box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
    box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
}
.post-tags a {
	    display: inline-block;
    margin: 0.4rem
rem
 0.4rem 0.4rem 0;
    padding: 0 0.6rem;
    width: fit-content;
    border-radius: 0.6rem;
    color: #49b1f5;
    font-size: 0.85em;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

打开主题的 style.css 文件 大约 1916 行 注销 下面两行代码

.post-footer {
    padding: 20px 0;
    /*border-bottom: 1px dashed #ddd;*/
    /*border-top: 1px dashed #ddd;*/
    margin-top: 30px;
    height: 82px
}

最好也去后台关闭 点赞,分享功能,标签也不要太多。

完成。