刚搭建星书签那会,很喜欢这个底部登录提示,在网上找了很久,有其他热心网友分享过,但是总有问题,放到文件中不是不显示就是登录不消失,下面这版是我之前改过之后自用的均正常。后面由于和子主题冲突,一直在吃灰,现在整理以下分享出来,效果可以看测试站:test.star8.cn
html代码,加入到wp-content/themes/onenav/footer.php文件最下方自定义代码内,子主题同理,放到footer.php最下方
更新了一下,加了群聊按钮,关闭按钮放到了右上角,群聊链接记得要替换为自己的。pc端和移动端的代码是分开的,不想要移动端显示可以直接删掉移动端部分就行。
<!-- pc端底部登录 -->
<?php if (!is_user_logged_in() && !wp_is_mobile()): ?>
<div class="none">
<div id="login-tips" class="login-tips">
<div class="close-btn" onclick="closeLoginTipsDom()"> <i class="iconfont icon-close"></i>
</div>
<center> <img class="guide-ac" src="https://cdn.aixifan.com/acfun-pc/2.8.36/img/acimg.png" alt="AC站娘" />
<i class="iconfont icon-smiley"></i>
<span class="tips-text">一键登录开启个人书签等功能!</span>
<a href="/login/"> <i class="login-btn">立即登录</i> </a>
<a href="群聊链接" target="_blank"><i class="qqqun">官方群聊</i> </a>
</center>
</div>
</div>
<script type="text/javascript">
function closeLoginTipsDom() { document.getElementById("login-tips").style.display = "none"; }
</script> <?php endif; ?>
<!-- 移动端底部登录 -->
<?php if (!is_user_logged_in() && wp_is_mobile()): ?>
<div class="none">
<div id="login-tips" class="login-tips">
<div class="close-btn" onclick="closeLoginTipsDom()"> <i class="iconfont icon-close"></i>
</div>
<center> <a href="/login/"> <i class="login-btn">立即登录</i> </a>
<a href="群聊链接" target="_blank"><i class="qqqun">官方群聊</i> </a>
</center>
</div>
</div>
<script type="text/javascript">
function closeLoginTipsDom() { document.getElementById("login-tips").style.display = "none"; }
</script> <?php endif; ?>
CSS代码
加入到主题自定义css内
@media (max-width:768px) {
.login-tips {
left:0;
}
}@media (min-width:768px) {
.login-tips {
left:0;
}
.sidebar-nav.mini-sidebar~.main-content .login-tips {
left:60px !important;
}
}
.login-tips {
position:fixed;
bottom:-2px;
right:0;
z-index:22;
background:rgba(255,255,255,0.8);
color:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);
text-align:center;
padding:10px 0;
transition:all 0.3s;
}
.login-tips .go-icon {
color:rgba(0,0,0,0.6);
font-size:22px;
vertical-align:middle;
}
.close-btn {
position:fixed;
right:10px;
}
.login-tips .login-btn,
.login-tips .qqqun{
display:inline-block;
vertical-align:baseline;
height:32px;
padding:0 20px;
background-color:#0367fd; /* 按钮背景颜色,可根据需要更改颜色 */
color:#FFFFFF; /* 文字颜色,可根据需要更改颜色 */
vertical-align:middle;
margin-left:16px;
border-radius:4px;
line-height:32px;
text-align:center;
font-size:14px;
font-weight:bold;/* 添加此行设置字体加粗 */
margin:8px 8px;
}
.io-black-mode .login-tips {
color:#c6c9cf;
background:#2C2E2F;
box-shadow:0 0 25px 5px rgba(10,10,10,.25);
}
.login-tips .guide-ac {
position: absolute;
bottom: 0;
left: 300px;
width: 300px;/* 图片宽度 */
height: auto;
object-fit: contain;
}
相关标签
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...