WordPress 底部美化代码分享

先看看效果图

添加在footer.php文件中，注意自行修改其中链接。

HTML代码

<div class="footer hidden-xs">
<div class="footer__wrapper site-info" style="margin-top: 100px;">
<div class="footer__row">
<div class="footer__column hodss footer__column-products ducts pull-left mfu-5j">
<h4>热门资源分类</h4>
<div class="footer__column pull-left">
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3BjLw==" class="list__link">电脑主题</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3RhZy90dWJpYW8v" class="list__link">电脑图标</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3dhbGxwYXBlci8=" class="list__link">高清壁纸</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3RhZy9jdXJzb3JzLw==" class="list__link">鼠标指针</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3NraW5zLw==" class="list__link">软件皮肤</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3dhbGxwYXBlci8=" class="list__link">高清壁纸</a>
</div>
<div class="footer__column pull-left">
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL21vYmlsZS8=" class="list__link">手机壁纸</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2xhYnMv" class="list__link">问卷调查</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3Rvb2xzLw==" class="list__link">美化软件</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2J1YmJsZS8=" class="list__link">桌面秀</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3N0dWR5Lw==" class="list__link">美化教程</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3Rvb2xzLw==" class="list__link">美化软件</a>
</div>
</div>

<div class="footer__column hodss footer__column-products pull-left mob-hide mar-2x">
<h4 data-microtip="你继续使用本站即视为理解并同意以下协议" data-microtip-position="top">网站协议</h4>
<div class="footer__column">
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2d1aWZhbi8=" target="_blank" class="list__link">用户规范</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3N1Lw==" target="_blank" class="list__link">版权声明</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2t1YW4v" target="_blank" class="list__link">充值协议</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3ByaXZhY3kv" target="_blank" class="list__link">隐私权声明</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2NvLw==" target="_blank" class="list__link">授权及使用协议</a>
</div>
</div>
<div class="footer__column hodss footer__column-company pull-left mob-hide mar-20j">
<h4>关于我们</h4>
<div class="footer__column">
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2Fib3V0dXMv" target="_blank" class="list__link">关于致美化</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2NvbnRhY3Qv" target="_blank" class="list__link">联系方式</a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2pvaW51cy8=" target="_blank" class="list__link">加入我们</a>
</div>
</div>
<div class="footer__column footer__column-newsletter pull-right mar-1j">
<div style="" class="footer__row">
<div class="join join_simple">
<div class="join__form">

<form id="scbar_form" role="search" method="get" class="search-form" action="http://www.acgpk.com/" target="_blank">
<div class="join__field field">
<div class="field__wrap">
<input type="text" name="s" placeholder="" id="s" class="pd5 field__input ng-pristine ng-untouched ng-valid ng-empty ng-valid-email" value="">
<img src="http://www.acgpk.com/logo.png">
</div>
</div>
<button type="submit" name="post_type" sc="1" class="join__btn v6-btn" value="post">

<i class="sai feng-sousuo2"></i>

</button>
</form>
</div>
</div>
</div>
</div>
</div> <div class="footer__row">
<div class="footer__column footer__column-cta cta-author pull-left">
<a href="/qqqun/" class="btn v6-btn v6-btn_blue">QQ群</a>
<div class="button-cta author hodss">
<span>加入艺创博客技术QQ群一起学习美化。</span>
</div>
</div>
<div class="footer__column footer__column-cta cta-affiliate gzzh pull-left mar-20l">
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly9zcGFjZS5iaWxpYmlsaS5jb20vMTU4MDEzOA==" target="_blank" data-microtip="致美化哔哩哔哩空间" data-microtip-position="top-left"><img src="https://dl.zhutix.net/2019/02/bilibili.svg"></a>
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly93ZWliby5jb20vbWZhbjE1MQ==" target="_blank" data-microtip="致美化新浪微博" data-microtip-position="top-right"><img src="https://dl.zhutix.net/2019/02/weibo.svg"></a>
<!-- <a href="/vips" class="btn v6-btn column12">申请VIP</a>
<div class="button-cta affiliate">
<span>三折抢终生会员享免锋币下载特权</span>
</div> -->
</div>
<div class="footer__column footer__column-counts pull-right">
<div class="count" data-microtip="⛔当你的锋币＜1且60天内未登录网站会被自动删除账号" data-microtip-position="top-left">
<div class="number">221679</div>
<div class="caption">用户数量</div>
</div>
<div class="count">
<div class="number">396505</div>
<div class="caption">互动数量</div>
</div>
<div class="count">
<div class="number">1332</div>
<div class="caption">素材数量</div>
</div>
<div class="count hodss">
<div class="number">18</div>
<div class="caption">作者数量</div>
</div>
</div>
</div>
</div>
</div>

<div id="footer-bottom">
<div class="footer__row site-info">
<div class="footer__column copyright pull-left">

<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5taWl0YmVpYW4uZ292LmNuLw==" target="_blank" rel="external nofollow">豫ICP备12009440号</a>

&nbsp;&nbsp;Theme by <a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly83YjIuY29t" target="_blank">柒比贰</a><!-- 18 queries 0.128s -->

</div>

<div class="footer__column payment hodss pull-right">
<!-- <i class="sai feng-anquan1"></i>
<span>技术支持:</span> -->

<img class="icon icon-v6 icon-v6-stripe teng" src="https://dl.zhutix.net/v2.1/teng.svg" title="腾讯云">
<img class="icon icon-v6 icon-v6-stripe ali" src="https://dl.zhutix.net/v2.1/ali.svg" title="阿里云">
<img class="icon icon-v6 icon-v6-stripe qiniu" src="https://dl.zhutix.net/v2.1/qiniu.svg" title="七牛云">
<img class="icon icon-v6 icon-v6-stripe youku" src="https://dl.zhutix.net/v2.1/youku.svg" title="优酷">
<img class="icon icon-v6 icon-v6-stripe alipay" src="https://dl.zhutix.net/v2.1/alipay.svg" title="支付宝">
<img class="icon icon-v6 icon-v6-stripe weixinpay" src="https://dl.zhutix.net/v2.1/weixinpay.svg" title="微信支付">
<a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly92Lnl1bmFxLmNvbS9jZXJ0aWZpY2F0ZT9kb21haW49d3d3LnpodXRpeC5jb20mYW1wO2FtcDtmcm9tPWxhYmVsJmFtcDthbXA7Y29kZT05MDAzMA==">
<img class="icon11 icon-v6 icon-v6-strip" src="https://aqyzmedia.yunaq.com/labels/label_sm_90030.png">
</a>
</div><div class="wencom pull-left">
Copyright © 2018 <a rel="external nofollow" target="_blank" href="http://www.acgpk.com/wp-content/themes/begin/go.php?url=aHR0cDovL3podXRpeC5jb20v" target="_blank">zhutiX.com</a><span class="hodss">. &nbsp;All Rights Reserved. </span>
</div></div>
</div>

样式代码放到主题目录的style.css文件内，不同主题可能会有变化（柒比贰主题放置子主题内的style.css即可）。

CSS代码

/*底部*/
.footer {
 border-bottom: 1px solid #000;
 box-sizing: border-box;
 left: 0;
 bottom: 0;
 letter-spacing: .4px;
 line-height: 1.3;
 z-index: 6;
 position: relative;
width: 100%;
 height: 405px;
 background:#ffffff url(https://dl.zhutix.net/2019/01/foot-bg.png) center bottom no-repeat;
}
.mar-1j{
 margin-top: 108px;
}
.mfu-5j {
 margin-top: -28px;
}
.mar-2x {
 margin-top: 2px;
}
.mar-20j{
 margin-top: 62px;
}
.mar-20l{
 margin-left: 34px;
}
.footer__wrapper {
 box-sizing: border-box;
 margin: 0 auto;
 padding: 85px 5px 0px;
}
 
.footer__wrapper>.footer__row:first-of-type {
 margin-bottom: 20px;
}
 
.pull-left {
float: left;
}
 
.footer__column-products {
 margin-right: 95px;
}
 
.footer h4 {
 font-size: 20px;
 font-weight: 300;
 line-height: 1;
 color: #fff;
 padding-bottom: 10px;
 color: #03a9f4;
 border-bottom: #03a9f4 solid 1px;
 margin-bottom: 10px;
}
 
.footer__column-products .footer__column:not(:last-of-type) {
 margin-right: 90px;
}
.footer .list__link:hover {
 color: #03a9f4;
}
 
.footer .list__link {
 color: #979b9e;
 display: block;
 font-size: 14px;
 line-height: 2.2;
 padding: 0;
}
 
.pull-right {
float: right;
}
 
.footer .join {
 margin: 12px 0 12px;
 width: 390px;
}
.join {
 text-align: center;
}
 
.join__form {
 position: relative;
 max-width: 544px;
 margin: 0 auto;
 text-align: left;
}
 
.field {
 position: relative;
}
 
.footer .join .field__wrap {
 border: 2px solid #33353a;
}
 
.field__wrap {
 border-radius: 5px;
}
 
.footer .join .field__input {
 height: 54px;color: #a9a9a9;
 padding: 0 15px 0 58px;
}
 
.field__input {
 border: 0;
 box-sizing: border-box;
 width: 100%;
 height: 64px;
 padding: 10px 22px 0;
 background: #17181b;
 border-radius: 5px;
 font-size: 14px;
 color: #fff;
}
 
.footer button, .footer input, .footer select, .footer textarea {
 color: inherit;
 font: inherit;
 font-family: Microsoft YaHei;
 margin: 0;
 outline: none;
 font-size: 14px;
}
 
.footer .join .field__wrap img {
 height: 30px;
 left: 14px;
 position: absolute;
 top: 14px;
 vertical-align: middle;
 width: 30px;
}
 
.footer .join .field__label {
 padding: 0 56px;
 top: 22px;
}
 
.field__label {
 position: absolute;
 top: 25px;
 padding: 0 22px;
 font-size: 12px;
 color: #adb7be;
 pointer-events: none;
 transition: -webkit-transform .2s;
 transition: transform .2s;
 transition: transform .2s, -webkit-transform .2s;
}
 
.footer .join .join__btn {
 background: transparent;
 height: 38px;
 right: 10px;
 top: 2px;
 width: unset;
}
 
.join__btn {
 background: transparent;
 box-sizing: border-box !important;
 position: absolute;
 top: 22px;
 right: 14px;
 height: 46px;
 padding: 10px;
}
 
.v6-btn {
 border: 0;
 padding: 12px 20px 11px;
 border-radius: 4px;
 color: #fff;
 letter-spacing: .4px;
 outline: none;
 text-transform: uppercase;
 font-weight: normal;
 font-size: 14px;
}
 
.footer .signup-cta {
 color: #50595b;
 font-size: 13px;
}
 
.footer .social__links {
 margin: 15px 0 0;
}
 
.footer .social__links .link__container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
float: left;
-webkit-box-pack: end;
-ms-flex-pack: end;
 justify-content: flex-end;
}
 
.link__container .feng-weibo-logo {
 color: #E6162D;
}
 
.footer .social__link {
float: right;
}
 
.social__link {
 margin: 0 20px;
}
 
.footer .social__links:after {
 content: "";
 display: table;
 clear: both;
}
 
.link {
 margin-bottom: 40px;
}
 
.link .t {
 font-size: 20px;
 font-weight: 300;
 line-height: 1;
 margin: 0;
 margin-right: 20px;
 width: 100%;
}
 
.link li {
float: left;
 margin: 20px 0;
 padding: 8px;
}
 
.link li a {
 color: #adb7be;
}
 
.footer__wrapper>.footer__row:nth-of-type(2) {
 border-top: #2e2e2e solid 1px;
 padding: 30px 0;
}
 
.footer__wrapper>.footer__row {
 width: 100%;
}
 
.footer__column-cta.cta-author {
 margin-right: 60px;
}
 
a.v6-btn {
 display: inline-block;
}
 
.v6-btn_blue {
 background: #03a9f4 !important;
}
 
.footer .button-cta.author {
 max-width: 110px;
}
 
.footer .button-cta span, .caption {
 font-size: 12px;
 line-height: 1.6;
}
 
.footer .button-cta.affiliate {
 max-width: 120px;
}
 
.footer .button-cta {
 color: #50595b;
 display: -webkit-inline-box;
 display: -ms-inline-flexbox;
 display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
 flex-direction: column;
 height: 38px;
-webkit-box-pack: center;
-ms-flex-pack: center;
 justify-content: center;
 margin-left: 14px;
 vertical-align: middle;
}
 
.footer__wrapper>.footer__row:after {
 content: "";
 display: table;
 clear: both;
}
 
.footer__column-counts .count:first-of-type {
 margin-left: 0 !important;
}
 
.footer__column-counts .count {
float: left;
 margin-left: 60px;
}
 
.footer__column-counts .count .number {
 font-size: 20px;
 line-height: 1;
 margin-bottom: 6px;
 color: #d6d6d6;
}
 
.footer__column-counts .count .caption {
 color: #50595b;
 line-height: 1;
}
 
.footer__wrapper>.footer__row:last-of-type {
 margin-top: 25px;
}
 
.footer__wrapper>.footer__row {
 width: 100%;
}
 
.copyright, .copyright a,.footer .copyright {
color: #50595b;
 font-size: 13px;
}
 
.wencom,.copyright {
 margin-bottom: 10px;
}
 
.wencom {
 width: 100%;
color: #50595b;
 font-size: 13px;
}
 
#footer-bottom .payment .icon-v6-lock {
 margin-right: 6px;
 margin-top: -3px;
}
 
#footer-bottom .payment .icon {
 height: 16px;
 vertical-align: middle;
}
 
#footer-bottom .icon-v6-stripe.alipay {
 width: 50px;
 height: auto;
}
 
#footer-bottom .payment .icon-v6-stripe {
 margin-left: 30px;
}
.column12 {
 border: 2px #ff5d8f solid !important;
 color: #ff5d8f !important;
}
#footer-bottom .payment .icon-v6-stripe.weixinpay {
 width: 62px;
 height: auto;
}
 
#footer-bottom:after, .footer:after {
 content: "";
 display: table;
 clear: both;
}
 
#footer-bottom .payment span {
 font-size: 14px;
}
 
.link__container i {
 font-size: 30px;
}
 
.join__form .feng-sousuo2 {
 font-size: 24px;
 color: #a9a9a9;
}
.wencom a{
color: #00e500;
}
@media screen and (max-width: 1200px) {
.ducts {
 display: none;
}
}
 
@media screen and (max-width: 900px) {
.hodss {
 display: none;
}
.join__form {
 max-width: 100%;
}
.footer .join {
 width: 100%;
}
.wencom {
margin-bottom: 30px;
}
.footer__column-newsletter {
float: left;
}
.footer__column-newsletter, .cta-affiliate {
 margin-left: 10px;
}
.cta-author {
 height: 70px;
 margin-left: 10px;
}
}
#footer-bottom .icon11 {
 height: 35px;
 margin-left: 30px;
 margin-top: -6px;
 filter: grayscale(1);
}
#footer-bottom .icon11:hover {
 filter: grayscale(0);
}
#footer-bottom {
 bottom: 0;
 left: 0;
 border-top: 1px solid #444;
 letter-spacing: .4px;
 line-height: 1.3;
 z-index: 2;
 width: 100%;
 background: url(https://dl.zhutix.net/2018/11/footer_bottom_bg.png) repeat-x left bottom #000;
padding: 25px 0 25px 0;
 overflow: hidden;
 position: relative;
}
.gzzh img {
 height: 43px;
 margin-right: 50px;
}