CoreNext主题网站底部美化

简介

在这篇教程中，我将展示如何在使用CoreNext主题上添加带有Font Awesome图标的底部徽章。这些徽章可以用于显示关于本站、侵权处理、网站地图、申请友链等信息。

正文

1.准备工作

确保您的WordPress网站已安装并启用CoreNext主题。

安装插件Font Awesome图标库（直接插件库搜索即可）。

2.添加CSS

将以下CSS代码添加到您的主题的自定义CSS区域中。可以在WordPress后台导航主题设置 – 插入代码  – 自定义CSS 里面。

/*底部栏关于本站、侵权处理、网站地图、申请友链 CSS样式*/
.footer-badge{display:inline-block;border-radius:4px;text-shadow:none;font-size:12px;color:#fff;line-height:15px;margin-bottom:5px;}.footer-badge .fa{margin-right:5px;}.footer-badge .badge-title{display:inline-block;background-color:#635f57;padding:4px 4px 4px 6px;border-top-left-radius:4px;border-bottom-left-radius:4px;}.footer-badge .badge-link{text-decoration:none;color:#fff;}.footer-badge .badge-value{display:inline-block;padding:4px 6px 4px 4px;border-top-right-radius:4px;border-bottom-right-radius:4px;color:#fff;}.footer-badge .bg-fen{background-color:#57cd4e;}.footer-badge .bg-red{background-color:#f55066;}.footer-badge .bg-green{background-color:#3bca6e;}.footer-badge .bg-about{background-color:#48d3dd;}.footer-badge .bg-delete{background-color:#ddab40;}.footer-badge .bg-working{background-color:#8eaf33;}.footer-badge .bg-cai{background-image:-webkit-linear-gradient(0deg,#3ca5f6 0%,#a86af9 100%);}

CSS代码已进行压缩，以提高加载速度和优化性能。如果需要修改，请先将代码格式化。

3.添加HTML结构

将以下HTML代码添加到您的Word Press – 外观 – 小工具 – 自定义HTML—底部小工具[左侧] 里面

<div class="footer-badge">
<span class="badge-title"><i class="fa fa-info-circle"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-about">关于本站</span></a>
</div>

<div class="footer-badge">
<span class="badge-title"><i class="fa fa-ban"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-delete">侵权处理</span></a>
</div>

<div class="footer-badge">
<span class="badge-title"><i class="fa fa-sitemap"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-red">网站地图</span></a>
</div>

<div class="footer-badge">
<span class="badge-title"><i class="fa fa-link"></i></span><a class="badge-link" href="链接" rel="external nofollow" target="_blank"><span class="badge-value bg-fen">申请友链</span></a>
</div>

预览效果