温馨提醒
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
本文最后更新于2022年9月30日,已超过 30天没有更新
很多网站在底部有一个未登录状态提示浏览者登陆的一个条幅,个人认为是可以有效增加客户粘度的,下面我们一起来看看怎么美化一个出来。
第一步:上传附件中的“yite-login.php”文件到主题 /parts/文件夹中;
第二步:打开主题footer.php文件,找到“<?php get_template_part( 'parts/off-canvas' ); ?>”,在改行代码前面增加以下代码:
<?php get_template_part( 'parts/yite-login' ); ?>
第三步:将以下代码添加至主题 functions.php文件尾部:
//未登录状态网站底部提示
function curPageURL()
{
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on")
{
$pageURL .= "s";
}
$pageURL .= "://";
$pageURL .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
return $pageURL;
}
第四步:进入后台—Ripro主题设置-顶部设置,将以下css样式内容添加至“自定义CSS样式代码”选项框内,保存即可!
//未登录状态网站底部提示
.site-header{
transition: All 0.5s ease-in-out;
-webkit-transition: All 0.5s ease-in-out;
-moz-transition: All 0.5s ease-in-out;
-o-transition: All 0.5s ease-in-out;
}
.wic_slogin .wp{width:100%;align-content:center;}
.wic_slogin_qq .fa-qq,.wic_slogin_wechat .fa-wechat,.loginbutton .fa-user{color:#fff;margin-right:3px;}
.wic_slogin{position:fixed;z-index:99;left:0;bottom:0;width:100%;padding:20px 0;text-align:center;height:auto;line-height:45px;background:#f9f9f9;border-top:1px solid #e6e6e6;font-family:microsoft yahei;transition: All 0.5s ease-in-out;-webkit-transition: All 0.5s ease-in-out;-moz-transition: All 0.5s ease-in-out;-o-transition: All 0.5s ease-in-out;background:#fff;}
.wic_slogin_info{display:inline-block;*zoom:1;*display:inline;font-size:22px;color:#000;letter-spacing:2px;height:40px;line-height:40px;font-weight: 300;}
.wic_slogin_info a{color:var(--accent-color)}
.wic_slogin_info a:hover{text-decoration:none;color:var(--accent-color-min)}
.wic_slogin_btn{display:inline-block;*zoom:1;*display:inline;line-height:40px;height:40px;margin:0 8px}
.wic_slogin_btn a{display:block;background: -webkit-gradient(linear,left top,right top,from(var(--accent-color)),to(var(--accent-color-min)));background: linear-gradient(90deg,var(--accent-color),var(--accent-color-min));color:#fff;padding:0 20px;border-radius:3px;font-size:16px;border-radius: 50px;}
.wic_slogin_btn a:hover{text-decoration:none}
.wic_slogin_line{display:inline-block;*zoom:1;*display:inline;width:1px;height:10px;background:#ccc}
.wic_slogin_qq{border-radius: 10%;display:inline-block;*zoom:1;*display:inline;line-height:40px;height:40px;margin:0 8px;white-space: nowrap;}
.wic_slogin_qq a{display:block;color:#fff;padding:0 20px;border-radius:3px;font-size:16px;background:#0486f5;border-radius: 50px;}
.wic_slogin_qq a:hover{background-color:#0486f5;text-decoration:none}
.wic_slogin_wechat{display:inline-block;*zoom:1;*display:inline;line-height:40px;height:40px;margin:0 8px;white-space: nowrap;}
.wic_slogin_wechat a{display:block;color:#fff;padding:0 20px;border-radius:3px;font-size:16px;background:#2bac19;border-radius: 50px;}
.wic_slogin_wechat a:hover{background-color:#2bac19;text-decoration:none}
.top_login{line-height: 30px;height: 30px;}
.top_login a{font-size:14px}
.wechat-mini{align-items: center;border-radius: 50%;cursor: pointer;display: flex;font-size: 14px;height: 30px;justify-content: center;width: 30px;margin-right: 10px;background-color: #2bac19;border: 0;color: #fff;}
.qq-mini{align-items: center;border-radius: 50%;cursor: pointer;display: flex;font-size: 14px;height: 30px;justify-content: center;width: 30px;margin-right: 10px;background-color: #0486f5;border: 0;color: #fff;}
.login-title{font-size:16px;color:#fff;}
.wic_slogin_qq.top_login{
display: block;
color: #fff;
padding: 0 20px;
border-radius: 3px;
font-size: 16px;
background: #0486f5;
border-radius: 50px;
}
.wic_slogin_wechat.top_login{
display: block;
color: #fff;
padding: 0 20px;
border-radius: 3px;
font-size: 16px;
background: #2bac19;
border-radius: 50px;
}
@media (max-width:768px) {
.wic_slogin_info {display:relative;font-size:16px;line-height: 30px;height: 30px;}
.wic_slogin_btn a,.wic_slogin_qq a,.wic_slogin_wechat a{font-size:12px;height: 30px;line-height: 30px;padding:0 8px;}
.wic_slogin_btn,.wic_slogin_qq,.wic_slogin_wechat{height: 30px;line-height: 30px;}
.wic_slogin{padding:5px;line-height: 35px;}
.login-title{display:none;}
.wic_slogin_qq.top_login,.wic_slogin_wechat.top_login{align-items: center;align-content:center;width:30px;padding:0px}
.top_login .fa{margin: 7px;}
.actions .wic_slogin_qq a,.actions .wic_slogin_wechat a{align-items: center;border-radius: 50%;cursor: pointer;display: flex;font-size: 14px;height: 30px;justify-content: center;width: 30px;margin-right: 5px;border: 0;}
.actions .wic_slogin_qq a i,.actions .wic_slogin_wechat a i{padding-left: 2px;}
}
版权声明:原创作品,未经允许不得转载,否则将追究法律责任。
本站资源有的自互联网收集整理,如果侵犯了您的合法权益,请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
本文链接:悟空资源网https://www.wkzyw.com/29601.html
许可协议:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
本站资源有的自互联网收集整理,如果侵犯了您的合法权益,请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
本文链接:悟空资源网https://www.wkzyw.com/29601.html
许可协议:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
评论1+
我按照你的指引添加了代码,没搞出来哦。