一为导航(OneNav主题)美化-下方悬浮登录提示

刚搭建星书签那会，很喜欢这个底部登录提示，在网上找了很久，有其他热心网友分享过，但是总有问题，放到文件中不是不显示就是登录不消失，下面这版是我之前改过之后自用的均正常。后面由于和子主题冲突，一直在吃灰，现在整理以下分享出来

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; ?>
php
1.28 KB
© 星书签导航
<!-- 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;
}
php
1.2 KB
© 星书签导航
@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;
}