详情
评论
问答

主题的网站页面底部，添加一个和示例图片样式相似的横幅广告 / 推广栏

03810
图片[1]-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载主题的网站页面底部，添加一个和示例图片样式相似的横幅广告 / 推广栏-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联

方法 1：直接添加到主题自定义 CSS/JS（简单）

  1. 登录 WordPress 后台
  2. 进入「外观」→「自定义」→「额外 CSS」 或 「自定义代码」→「自定义 HTML/JS」
  3. 添加以下代码
<!-- 底部招聘横幅 -->
<div class="zib-bottom-banner">
    <div class="banner-content">
        <span class="banner-text">海量职位 让求职更简单</span>
        <span class="banner-stat">9020+企业的共同选择</span>
        <span class="banner-stat">15700+高薪职位任您挑选</span>
        <div class="banner-buttons">
            <a href="#" class="btn-login">立即登录</a>
            <a href="#" class="btn-register">快速注册</a>
        </div>
        <span class="banner-qrcode-tip">手机也能找工作</span>
        <button class="banner-close">×</button>
    </div>
</div>

<style>
/* 底部横幅样式 */
.zib-bottom-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000;
    color: #fff;
    padding: 10px 20px;
    z-index: 9999;
    box-sizing: border-box;
}

.banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.banner-text {
    font-size: 18px;
    color: #ffd700; /* 金黄色文字 */
    font-weight: bold;
}

.banner-stat {
    font-size: 16px;
    color: #fff;
}

/* 按钮样式 */
.banner-buttons {
    display: flex;
    gap: 10px;
}

.btn-login {
    background: #1e90ff; /* 蓝色按钮 */
    color: #fff;
    padding: 6px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-login:hover {
    background: #0066cc;
    color: #fff;
}

.btn-register {
    background: #ff8c00; /* 橙色按钮 */
    color: #fff;
    padding: 6px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-register:hover {
    background: #e67e00;
    color: #fff;
}

.banner-qrcode-tip {
    font-size: 14px;
    color: #ccc;
    margin-left: 10px;
}

.banner-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin-left: 20px;
    padding: 0 10px;
}

.banner-close:hover {
    color: #ff4444;
}

/* 适配移动端 */
@media (max-width: 768px) {
    .banner-content {
        gap: 10px;
    }
    .banner-text, .banner-stat {
        font-size: 14px;
    }
    .btn-login, .btn-register {
        padding: 4px 12px;
        font-size: 12px;
    }
}
</style>

<script>
// 关闭按钮功能
document.querySelector('.banner-close').addEventListener('click', function() {
    document.querySelector('.zib-bottom-banner').style.display = 'none';
    // 可选：添加cookie，关闭后不再显示
    document.cookie = "hide_banner=1; path=/; max-age=86400"; // 24小时内不再显示
});

// 可选：读取cookie，若已关闭则不显示
window.onload = function() {
    if (document.cookie.includes('hide_banner=1')) {
        document.querySelector('.zib-bottom-banner').style.display = 'none';
    }
}
</script>

方法 2：通过子比主题的钩子函数添加（推荐）

  1. 进入「外观」→「主题文件编辑器」
  2. 找到并编辑 functions.php（子主题的 functions.php，避免主题更新丢失）
  3. 在文件末尾添加以下代码：
// 子比主题底部添加招聘横幅（仅访客可见+全设备适配+子比默认登录注册链接）
function zib_add_bottom_banner() {
    // 核心判断：仅未登录用户显示横幅
    if ( !is_user_logged_in() ) {
    ?>
    <!-- 底部招聘横幅 -->
    <div class="zib-bottom-banner">
        <div class="banner-content">
            <!-- 核心文案区：单独分组，方便适配 -->
            <div class="banner-text-group">
                <span class="banner-text">利州江畔 广元人自己的网站</span>
               <span class="banner-stat">每天更新光源动态</span>
                <span class="banner-stat sm-hide">是广元人每天都要上的网站。</span>
            </div>
            
            <!-- 按钮区：替换为子比默认登录/注册链接 -->
            <div class="banner-buttons">
                <a href="<?php echo zib_get_page_url('login'); ?>" class="btn-login">立即登录</a>
                <a href="<?php echo zib_get_page_url('register'); ?>" class="btn-register">快速注册</a>
            </div>
            
            <!-- 二维码提示区 -->
            <div class="banner-qrcode-group">
                <span class="banner-qrcode-tip xs-hide">手机也能找工作</span>
            </div>
            
            <!-- 关闭按钮 -->
            <button class="banner-close">×</button>
        </div>
    </div>

    <style>
    /* 底部横幅基础样式 */
    .zib-bottom-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #000;
        color: #fff;
        padding: 10px 15px; /* 减少左右内边距，适配小屏 */
        z-index: 9999;
        box-sizing: border-box;
        border-top: 1px solid #333; /* 加顶部边框，视觉更清晰 */
    }

    .banner-content {
        max-width: 1200px;
        width: 100%; /* 占满容器宽度 */
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap; /* 空间不足自动换行 */
        gap: 15px; /* 统一间距，替代margin更灵活 */
    }

    /* 文案分组样式：小屏时居中 */
    .banner-text-group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        flex: 1; /* 占满剩余空间，不挤压按钮 */
        min-width: 200px; /* 最小宽度，避免过度压缩 */
        justify-content: center; /* 小屏时文案居中 */
    }

    .banner-text {
        font-size: 18px;
        color: #ffd700; /* 金黄色文字 */
        font-weight: bold;
        white-space: nowrap; /* 核心文案不换行 */
    }

    .banner-stat {
        font-size: 16px;
        color: #fff;
        opacity: 0.9;
    }

    /* 按钮样式 */
    .banner-buttons {
        display: flex;
        gap: 10px;
        flex-shrink: 0; /* 按钮不被压缩 */
    }

    .btn-login {
        background: #1e90ff; /* 蓝色按钮 */
        color: #fff;
        padding: 6px 18px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s;
        white-space: nowrap; /* 按钮文字不换行 */
    }

    .btn-login:hover {
        background: #0066cc;
        color: #fff;
    }

    .btn-register {
        background: #ff8c00; /* 橙色按钮 */
        color: #fff;
        padding: 6px 18px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s;
        white-space: nowrap; /* 按钮文字不换行 */
    }

    .btn-register:hover {
        background: #e67e00;
        color: #fff;
    }

    /* 二维码提示区 */
    .banner-qrcode-group {
        flex-shrink: 0; /* 不被压缩 */
    }
    .banner-qrcode-tip {
        font-size: 14px;
        color: #ccc;
        white-space: nowrap; /* 提示文字不换行 */
    }

    .banner-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        padding: 0 10px;
        flex-shrink: 0; /* 关闭按钮不被压缩 */
        opacity: 0.8;
    }

    .banner-close:hover {
        color: #ff4444;
        opacity: 1;
    }

    /* ---------- 分层适配：覆盖所有设备 ---------- */
    /* 平板/大屏手机 (≤992px) */
    @media (max-width: 992px) {
        .banner-text { font-size: 16px; }
        .banner-stat { font-size: 14px; }
        .btn-login, .btn-register { padding: 5px 16px; font-size: 13px; }
    }

    /* 小屏手机 (≤768px) */
    @media (max-width: 768px) {
        .banner-content { gap: 10px; }
        .banner-text, .banner-stat { font-size: 14px; }
        .btn-login, .btn-register { padding: 4px 12px; font-size: 12px; }
    }

    /* 超小屏手机 (≤576px) - 关键适配 */
    @media (max-width: 576px) {
        .zib-bottom-banner { padding: 8px 10px; }
        .sm-hide { display: none !important; } /* 隐藏次要统计文字 */
        .banner-text { font-size: 14px; }
    }

    /* 迷你屏手机 (≤375px) */
    @media (max-width: 375px) {
        .xs-hide { display: none !important; } /* 隐藏二维码提示文字 */
        .banner-buttons { gap: 8px; }
        .btn-login, .btn-register { padding: 4px 10px; font-size: 11px; }
    }
    </style>

    <script>
    // 关闭按钮功能（兼容所有设备）
    document.addEventListener('DOMContentLoaded', function() {
        const closeBtn = document.querySelector('.banner-close');
        const banner = document.querySelector('.zib-bottom-banner');
        
        if (closeBtn && banner) {
            closeBtn.addEventListener('click', function() {
                banner.style.display = 'none';
                // 添加cookie，关闭后24小时不再显示
                document.cookie = "hide_banner=1; path=/; max-age=86400";
            });

            // 读取cookie，若已关闭则不显示
            if (document.cookie.includes('hide_banner=1')) {
                banner.style.display = 'none';
            }
        }
    });
    </script>
    <?php
    } // 结束登录状态判断
}
add_action('wp_footer', 'zib_add_bottom_banner');
© 版权声明
版权声明 1 本网站名称：小哥互联
2 本站永久网址：https://www.899778.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ147736299进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
网站代码
# 子比主题# WordPress# 用户体验# 自定义CSS# 网站优化# 底部横幅# 招聘横幅# functions.php# 登录注册# 移动端适配
喜欢就支持一下吧
点赞10赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容

默认头像
   
手机锁屏密码忘记了怎么解锁-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
364人已阅读
手机锁屏密码忘记了怎么解锁【手机解锁】
TOP1
360有钱联盟 推广软件赚佣金-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
360有钱联盟 推广软件赚佣金【软件赚佣金】
9个月前228人已阅读
TOP2
Windows系统自带软件深度卸载指南-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
Windows系统自带软件深度卸载指南【深度卸载】
9个月前227人已阅读
TOP3
子比主题美化-文章列表移入上浮蓝色边框扫动效果-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
子比主题美化-文章列表移入上浮蓝色边框扫动效果【浮蓝色边框扫动效果】
6个月前227人已阅读
TOP4
手机如何备份数据以防丢失？-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
手机如何备份数据以防丢失？【手机备份数据防丢失】
9个月前210人已阅读
TOP5
如何通过控制面板卸载软件-欢迎各位,本站专注于收集分享各种最新资源、技术教程、绿色软件、还有来自全网的网站模板、网站源码分享以及各种去广告软件下载小哥互联
如何通过控制面板卸载软件【电脑知识】
9个月前191人已阅读
TOP6
子比主题
子比主题
子比主题
子比主题过渡图
子比主题一款优雅的主题

安装wordpress及主题服务一次

一次购买终身免费提供主题更新服务

强大的人工服务，为你解决主题问题

    ￥749
特别特惠
￥799
立即购买
标签云
高效导航 (1)访客胶囊 (1)智能影音 (1)双重视觉模式 (1)极简美学 (1)节日交互 (1)2026新春限定 (1)丙午马年 (1)Tracker服务器 (1)磁盘缓存 (1)端口转发 (1)网页远控 (1)磁力链接 (1)挂机做种 (1)视频播放 (1)长效种子 (1)比特彗星 (1)BT下载 (1)两个按钮 (1)右侧新增 (1)搜索框架 (1)