给wordpress添加一个好看的页脚

DDM
84
文章
0
评论
2019年7月14日18:39:53 评论 11056字阅读36分51秒

给wordpress添加一个好看的页脚,如图。

从隔壁网站扒下来的,同时为了备忘。

话不多说,上代码

如下代码,添加在footer.php文件中,自行修改其中链接。

<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="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3BjLw==" class="list__link">电脑主题</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3RhZy90dWJpYW8v" class="list__link">电脑图标</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3dhbGxwYXBlci8=" class="list__link">高清壁纸</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3RhZy9jdXJzb3JzLw==" class="list__link">鼠标指针</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3NraW5zLw==" class="list__link">软件皮肤</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/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="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL21vYmlsZS8=" class="list__link">手机壁纸</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2xhYnMv" class="list__link">问卷调查</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3Rvb2xzLw==" class="list__link">美化软件</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2J1YmJsZS8=" class="list__link">桌面秀</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3N0dWR5Lw==" class="list__link">美化教程</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/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="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2d1aWZhbi8=" target="_blank" class="list__link">用户规范</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3N1Lw==" target="_blank" class="list__link">版权声明</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2t1YW4v" target="_blank" class="list__link">充值协议</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL3ByaXZhY3kv" target="_blank" class="list__link">隐私权声明</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/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="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2Fib3V0dXMv" target="_blank" class="list__link">关于致美化</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cHM6Ly96aHV0aXguY29tL2NvbnRhY3Qv" target="_blank" class="list__link">联系方式</a>
<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/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="https://zhutix.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="https://dl.zhutix.net/v2.1/so.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="https://www.dmlove.net/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="https://www.dmlove.net/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>


页脚2代码

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

	<a rel="external nofollow" target="_blank" href="https://www.dmlove.net/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="https://www.dmlove.net/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="https://www.dmlove.net/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="https://www.dmlove.net/wp-content/themes/begin/go.php?url=aHR0cDovL3podXRpeC5jb20v" target="_blank">zhutiX.com</a><span class="hodss">. &nbsp;All Rights Reserved. </span>
</div>

</div>
	</div>

以下是css代码。

新建css引用也可以,直接放在wordpress中的外观—自定义—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;
}
继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
  • 本文由 发表于 2019年7月14日18:39:53
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
开启CDN后wordpress后台打不开的解决办法 WordPress

开启CDN后wordpress后台打不开的解决办法

现在很多站长把网站放到国外,使用CDN加速功能提高国内的访问速度,前面提到过开启腾*讯*云CDN后wordpress后台显示:连接被重置的解决办法,而今天遇到的是另外一种情况,有时候会遇到开启CDN后...
网站如何做到不在移动端显示PC端部分模块 WordPress

网站如何做到不在移动端显示PC端部分模块

做站的时候会在PC端显示一些广告或者按钮一些模块。 但是在移动端上的样式会挡住大部分内容,会使使用移动端的人感到不舒服,很差的体验感。 只需要一段代码即可解决此问题,适合任何网站,任何主题。 @med...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: