[亲测可用]子比主题美化教程– 首页底部导航登入美化

990

20241211183803531-学社山中人_2024-12-11_18-37-51

原帖链接：https://zy.nuoyo.cn/5215.html

将下面的代码放到：/wp-content/themes/zibll/functions.php文件里面

//底部登录
// 子比主题底部登入美化样式
function zibll_enqueue_styles() {
    wp_enqueue_style('tengfei_bottom_login_styles', get_template_directory_uri() . '/css/youlogin.css');
}
add_action('wp_enqueue_scripts', 'zibll_enqueue_styles'); 

function zibll_Add_ons_footer_sidebar_display() {
    if (is_user_logged_in()) {
        return; 
    }

    $sidebar_html = '
    <div class="wapnone">
    <div class="footSideBar footNoSideBar" style="" data-v-468191f6="">
        <div class="left_warp">
            <p class="left_word">一键注册登录，免费下载更多的资源教程</p>
            <ul class="login_ad_list">
                <li class="login_ad_item">
                    <img src="https://yizhi2024.top/wp-content/uploads/2024/12/%E5%AD%A6%E7%A4%BE%E5%B1%B1%E4%B8%AD%E4%BA%BA%E5%AF%B9%E5%8B%BE%E6%A1%86.svg" width="16" height="16">
                    <span>精品源码资源</span>
                </li>
                <li class="login_ad_item">
                    <img src="https://yizhi2024.top/wp-content/uploads/2024/12/%E5%AD%A6%E7%A4%BE%E5%B1%B1%E4%B8%AD%E4%BA%BA%E5%AF%B9%E5%8B%BE%E6%A1%86.svg" width="16" height="16">
                    <span>主题美化教程</span>
                </li>
                <li class="login_ad_item">
                    <img src="https://yizhi2024.top/wp-content/uploads/2024/12/%E5%AD%A6%E7%A4%BE%E5%B1%B1%E4%B8%AD%E4%BA%BA%E5%AF%B9%E5%8B%BE%E6%A1%86.svg" width="16" height="16">
                    <span>详细的搭建教程</span>
                </li>
				<li class="login_ad_item">
				    <img src="https://yizhi2024.top/wp-content/uploads/2024/12/%E5%AD%A6%E7%A4%BE%E5%B1%B1%E4%B8%AD%E4%BA%BA%E5%AF%B9%E5%8B%BE%E6%A1%86.svg" width="16" height="16">
				    <span>破解绿色软件工具</span>
				</li>
                <li class="login_ad_item">
                    <img src="https://yizhi2024.top/wp-content/uploads/2024/12/%E5%AD%A6%E7%A4%BE%E5%B1%B1%E4%B8%AD%E4%BA%BA%E5%AF%B9%E5%8B%BE%E6%A1%86.svg" width="16" height="16">
                    <span>这里什么都有</span>
                </li>
            </ul>
        </div>
        <div class="login-button signin-loader">
            <div class="login-button_wrapper">
                <span>立即登录</span>
                <div class="circle circle-1"></div>
                <div class="circle circle-2"></div>
                <div class="circle circle-3"></div>
                <div class="circle circle-4"></div>
                <div class="circle circle-5"></div>
                <div class="circle circle-6"></div>
                <div class="circle circle-7"></div>
                <div class="circle circle-8"></div>
                <div class="circle circle-9"></div>
                <div class="circle circle-10"></div>
                <div class="circle circle-11"></div>
                <div class="circle circle-12"></div>
            </div>
        </div>
    </div>
</div>
    ';

    echo $sidebar_html; 
}
add_action('wp_footer', 'zibll_Add_ons_footer_sidebar_display');

将下面的代码放到子比主题设置–>>自定义css样式里面

.footSideBar[data-v-468191f6] {
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  -webkit-box-pack: justify;
  justify-content: space-between;
  bottom: 40px;
  width: 1040px;
  height: 76px;
  background: rgba(27,35,55,.4);
  box-shadow: 0 2px 18px rgba(42,49,67,.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 18px;
  z-index: 99999;
  transition: 0.5s ease-in-out;
}

.footSideBar {
  position: fixed;
  z-index: 1000;
  left: calc(50% + 110px);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  bottom: 24px;
  display: -webkit-box;
  display: flex;
  width: 932px;
  height: 80px;
  padding: 0 24px 0 32px;
  border-radius: 16px;
  background: rgba(27,35,55,.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px)
}

.footSideBar:hover {
  background: rgba(27,35,55,.9);
    transition: 0.5s ease-in-out;
}

.footSideBar .left_warp .left_word {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #fff
}

.footSideBar .left_warp .login_ad_list {
  margin-top: 6px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center
}

.footSideBar .left_warp .login_ad_list .login_ad_item {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.footSideBar .left_warp .login_ad_list .login_ad_item span {
  margin-left: 6px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.footSideBar .left_warp .login_ad_list .login_ad_item:not(:last-child) {
  margin-right: 24px
}

.footSideBar .login-button {
  display: -webkit-box;
  display: flex;
  width: 140px;
  height: 44px;
  border-radius: 40px;
  background: #c3d3ff;
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(78,255,233,0.7);
  --c-color-2: #1a23ff;
  --c-color-3: #7553ff;
  --c-color-4: rgba(86,255,234,0.7);
  --c-shadow: rgba(22,201,180,0.2);
  --c-shadow-inset-top: rgba(60,255,231,0.9);
  --c-shadow-inset-bottom: rgba(106,255,237,0.8);
  --c-radial-inner: #579df7;
  --c-radial-outer: #579df7;
  --c-color: #fff;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  padding: 0;
  margin: 0;
  text-align: center;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(circle,var(--c-radial-inner),var(--c-radial-outer) 80%);
  box-shadow: 0 0 14px var(--c-shadow)
}

.footSideBar .login-button,.footSideBar .login-button span {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 600;
  font-size: 16px
}

.footSideBar .login-button span {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  line-height: 24px;
  display: -webkit-box;
  display: flex
}

.footSideBar .login-button:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top),inset 0 -3px 4px var(--c-shadow-inset-bottom)
}

.footSideBar .login-button .login-button_wrapper {
  -webkit-mask-image: -webkit-radial-gradient(#fff,#000);
  overflow: hidden;
  border-radius: 40px;
  min-width: 140px;
  padding: 10px 0
}

.footSideBar .login-button .login-button_wrapper span {
  position: relative;
  z-index: 1
}

.footSideBar .login-button:hover {
  --duration: 1400ms
}

.footSideBar .login-button .login-button_wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-filter: blur(8px);
  filter: blur(8px);
  -webkit-filter: blur(var(--blur,8px));
  filter: blur(var(--blur,8px));
  background: transparent;
  background: var(--background,transparent);
  -webkit-transform: translate(0) translateZ(0);
  transform: translate(0) translateZ(0);
  -webkit-transform: translate(var(--x,0),var(--y,0)) translateZ(0);
  transform: translate(var(--x,0),var(--y,0)) translateZ(0);
  -webkit-animation: none var(--duration) var(--easing) infinite;
  animation: none var(--duration) var(--easing) infinite;
  -webkit-animation: var(--animation,none) var(--duration) var(--easing) infinite;
  animation: var(--animation,none) var(--duration) var(--easing) infinite
}

.footSideBar .login-button .login-button_wrapper .circle.circle-1,.footSideBar .login-button .login-button_wrapper .circle.circle-9,.footSideBar .login-button .login-button_wrapper .circle.circle-10 {
  --background: var(--c-color-4)
}

.footSideBar .login-button .login-button_wrapper .circle.circle-3,.footSideBar .login-button .login-button_wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px
}

.footSideBar .login-button .login-button_wrapper .circle.circle-5,.footSideBar .login-button .login-button_wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px
}

.footSideBar .login-button .login-button_wrapper .circle.circle-2,.footSideBar .login-button .login-button_wrapper .circle.circle-7,.footSideBar .login-button .login-button_wrapper .circle.circle-8,.footSideBar .login-button .login-button_wrapper .circle.circle-11,.footSideBar .login-button .login-button_wrapper .circle.circle-12 {
  --background: var(--c-color-1);
  --blur: 12px
}

.footSideBar .login-button .login-button_wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1
}

.footSideBar .login-button .login-button_wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2
}

.footSideBar .login-button .login-button_wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3
}

.footSideBar .login-button .login-button_wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4
}

.footSideBar .login-button .login-button_wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5
}

.footSideBar .login-button .login-button_wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6
}

.footSideBar .login-button .login-button_wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7
}

.footSideBar .login-button .login-button_wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8
}

.footSideBar .login-button .login-button_wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9
}

.footSideBar .login-button .login-button_wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10
}

.footSideBar .login-button .login-button_wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11
}

.footSideBar .login-button .login-button_wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
  --y: 4px;
  --animation: circle-12
}

@-webkit-keyframes circle-1 {
  33% {
    -webkit-transform: translateY(16px) translateZ(0);
    transform: translateY(16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,64px) translateZ(0);
    transform: translate(12px,64px) translateZ(0)
  }
}

@keyframes circle-1 {
  33% {
    -webkit-transform: translateY(16px) translateZ(0);
    transform: translateY(16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,64px) translateZ(0);
    transform: translate(12px,64px) translateZ(0)
  }
}

@-webkit-keyframes circle-2 {
  33% {
    -webkit-transform: translate(80px,-10px) translateZ(0);
    transform: translate(80px,-10px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(72px,-48px) translateZ(0);
    transform: translate(72px,-48px) translateZ(0)
  }
}

@keyframes circle-2 {
  33% {
    -webkit-transform: translate(80px,-10px) translateZ(0);
    transform: translate(80px,-10px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(72px,-48px) translateZ(0);
    transform: translate(72px,-48px) translateZ(0)
  }
}

@-webkit-keyframes circle-3 {
  33% {
    -webkit-transform: translate(20px,12px) translateZ(0);
    transform: translate(20px,12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,4px) translateZ(0);
    transform: translate(12px,4px) translateZ(0)
  }
}

@keyframes circle-3 {
  33% {
    -webkit-transform: translate(20px,12px) translateZ(0);
    transform: translate(20px,12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(12px,4px) translateZ(0);
    transform: translate(12px,4px) translateZ(0)
  }
}

@-webkit-keyframes circle-4 {
  33% {
    -webkit-transform: translate(76px,-12px) translateZ(0);
    transform: translate(76px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(112px,-8px) translateZ(0);
    transform: translate(112px,-8px) translateZ(0)
  }
}

@keyframes circle-4 {
  33% {
    -webkit-transform: translate(76px,-12px) translateZ(0);
    transform: translate(76px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(112px,-8px) translateZ(0);
    transform: translate(112px,-8px) translateZ(0)
  }
}

@-webkit-keyframes circle-5 {
  33% {
    -webkit-transform: translate(84px,28px) translateZ(0);
    transform: translate(84px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(40px,-32px) translateZ(0);
    transform: translate(40px,-32px) translateZ(0)
  }
}

@keyframes circle-5 {
  33% {
    -webkit-transform: translate(84px,28px) translateZ(0);
    transform: translate(84px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(40px,-32px) translateZ(0);
    transform: translate(40px,-32px) translateZ(0)
  }
}

@-webkit-keyframes circle-6 {
  33% {
    -webkit-transform: translate(28px,-16px) translateZ(0);
    transform: translate(28px,-16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(76px,-56px) translateZ(0);
    transform: translate(76px,-56px) translateZ(0)
  }
}

@keyframes circle-6 {
  33% {
    -webkit-transform: translate(28px,-16px) translateZ(0);
    transform: translate(28px,-16px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(76px,-56px) translateZ(0);
    transform: translate(76px,-56px) translateZ(0)
  }
}

@-webkit-keyframes circle-7 {
  33% {
    -webkit-transform: translate(8px,28px) translateZ(0);
    transform: translate(8px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(20px,-60px) translateZ(0);
    transform: translate(20px,-60px) translateZ(0)
  }
}

@keyframes circle-7 {
  33% {
    -webkit-transform: translate(8px,28px) translateZ(0);
    transform: translate(8px,28px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(20px,-60px) translateZ(0);
    transform: translate(20px,-60px) translateZ(0)
  }
}

@-webkit-keyframes circle-8 {
  33% {
    -webkit-transform: translate(32px,-4px) translateZ(0);
    transform: translate(32px,-4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(56px,-20px) translateZ(0);
    transform: translate(56px,-20px) translateZ(0)
  }
}

@keyframes circle-8 {
  33% {
    -webkit-transform: translate(32px,-4px) translateZ(0);
    transform: translate(32px,-4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(56px,-20px) translateZ(0);
    transform: translate(56px,-20px) translateZ(0)
  }
}

@-webkit-keyframes circle-9 {
  33% {
    -webkit-transform: translate(20px,-12px) translateZ(0);
    transform: translate(20px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(80px,-8px) translateZ(0);
    transform: translate(80px,-8px) translateZ(0)
  }
}

@keyframes circle-9 {
  33% {
    -webkit-transform: translate(20px,-12px) translateZ(0);
    transform: translate(20px,-12px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(80px,-8px) translateZ(0);
    transform: translate(80px,-8px) translateZ(0)
  }
}

@-webkit-keyframes circle-10 {
  33% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(100px,28px) translateZ(0);
    transform: translate(100px,28px) translateZ(0)
  }
}

@keyframes circle-10 {
  33% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(100px,28px) translateZ(0);
    transform: translate(100px,28px) translateZ(0)
  }
}

@-webkit-keyframes circle-11 {
  33% {
    -webkit-transform: translate(4px,4px) translateZ(0);
    transform: translate(4px,4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }
}

@keyframes circle-11 {
  33% {
    -webkit-transform: translate(4px,4px) translateZ(0);
    transform: translate(4px,4px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(68px,20px) translateZ(0);
    transform: translate(68px,20px) translateZ(0)
  }
}

@-webkit-keyframes circle-12 {
  33% {
    -webkit-transform: translate(56px) translateZ(0);
    transform: translate(56px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(60px,-32px) translateZ(0);
    transform: translate(60px,-32px) translateZ(0)
  }
}

@keyframes circle-12 {
  33% {
    -webkit-transform: translate(56px) translateZ(0);
    transform: translate(56px) translateZ(0)
  }

  66% {
    -webkit-transform: translate(60px,-32px) translateZ(0);
    transform: translate(60px,-32px) translateZ(0)
  }
}

.footNoSideBar {
  left: 0;
  right: 0;
  -webkit-transform: none;
  transform: none;
  margin: 0 auto
}
@media screen and (max-width: 1221px) { .wapnone{display:none; }
}

注意：子比主题网站注意不要开启自动加载下一页，没有底部，自然这个美化不起作用

渐变文本
标题带有亲测，是经过一定测试的源码或工具；破解软件或绿色软件一般都会报毒，如果您害怕，请勿下载安装，感谢
© 版权声明
文章说明
1 项目资源具有快速传播复制性，购买后不退款；
2 本站名称：学社山中人
3 对于网站所有项目，请用户自行分辨投资风险；
4 本站永久网址：yizhi2024.top，站长微信：CPA1523689
5 网站一切资源不代本站立场，不代表网站赞同其观点和对其承诺的收益保障负责；
6 网站资源大多存储在百度网盘，如发现链接失效，请联系站长，站长会第一时间更新；
7 本站严厉禁止发布或转载任何相关违法信息，一经发现，立马封号并移交司法机关处理；
8 网站部分内容来源于网络，仅供大家学习与参考，请在下载后24小时之内自觉删除，请您自觉配合。
THE END
WordPress主题模板
分享
相关推荐
[亲测可搭建]RiPro-V5主题V7.71开心版+开心教程-学社山中人
[亲测可搭建]RiPro-V5主题V7.71开心版+开心教程
[亲测可搭建]RiPro-V5主题V7.71开心版+开心教程
6月5日 19:10 1267
[亲测可搭建]Justnews主题6.16.7开心版WordPress主题模板-学社山中人
[亲测可搭建]Justnews主题6.16.7开心版WordPress主题模板
[亲测可搭建]Justnews主题6.16.7开心版WordPress主题模板
5月16日 09:31 1256
[亲测搭建可用]二次元动漫主题模板-SakurairoWordPress模板-学社山中人
[亲测搭建可用]二次元动漫主题模板-SakurairoWordPress模板
[亲测搭建可用]二次元动漫主题模板-SakurairoWordPress模板
5月7日 18:35 1228
[亲测搭建可用]个人博客主题wp-Concise WordPress主题模板-学社山中人
[亲测搭建可用]个人博客主题wp-Concise WordPress主题模板
[亲测搭建可用]个人博客主题wp-Concise WordPress主题模板
5月10日 11:49 1214
[亲测可搭建]OneNav一为主题V4.1602开心版WordPress主题模板-学社山中人
[亲测可搭建]OneNav一为主题V4.1602开心版WordPress主题模板
[亲测可搭建]OneNav一为主题V4.1602开心版WordPress主题模板
6月13日 01:51 1210
Ripro-v5 6.4日主题-wordpress主题模板-学社山中人
Ripro-v5 6.4日主题-wordpress主题模板
Ripro-v5 6.4日主题-wordpress主题模板
3月31日 00:25 1199
搜索
开启精彩搜索