WordPress-添加侧边媒体栏

其实很简单做一个全局悬浮块就行
代码在最下面
105-110行内容改成客户的联系方式
219行改图标是的形状的圆形50% 正方形0% 圆角8%-16%

<!-- 引入字体图标库 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4210690_bfpz45tuycu.css">

<!-- 侧边栏：用于展示联系信息及快捷操作 -->
<aside class="contact-sidebar">
    <!-- 侧边栏隐藏/显示控制按钮 -->
    <div class="contact-sidebar-hide icon-box" onclick="toggleSidebar()">
        <i id="hidetoright" class="icon iconfont icon-arrowrighttoright"></i>
    </div>

    <!-- 手机号联系入口（WhatsApp） -->
    <div class="contact-sidebar-phone icon-box">
        <a class="a-open" 
           href="" 
           target="_blank" 
           rel="noopener"
           id="whatsappLink">
             <i class="icon iconfont icon-whatsapp"></i>
        </a>
        <div class="phone">
            <span class="show-phone" id="phoneDisplay"></span>
        </div>
    </div>

    <!-- 邮箱联系入口 -->
    <div class="contact-sidebar-email icon-box">
        <a class="a-open" href="" id="emailLink">
             <i class="icon iconfont icon-mail"></i>
        </a>
        <div class="email">
            <span class="show-email" id="emailDisplay"></span>
        </div>
    </div>

    <!-- 二维码展示（暂未启用）
    <div class="contact-sidebar-code icon-box">
        <a class="a-open" href="#" target="_blank" rel="noopener">
            <i class="icon iconfont icon-weixin"></i>
        </a>
        <div class="code">
            <img class="show-code" src="../../images/code.png" alt="微信二维码">
        </div>
    </div>
    -->

    <!-- 回到顶部按钮（暂未启用）
    <div class="contact-sidebar-totop icon-box" onclick="toTop()">
        <i class="icon fa fa-light fa-arrow-up fa-lg"></i>
    </div>
    -->
</aside>

<!-- 底部栏：移动端联系信息展示 -->
<footer class="footerbar" id="footerbar">
    <!-- 底部栏隐藏/显示控制按钮 -->
    <div class="foot-hide foot-box" onclick="toggleFooter()">
        <i id="hidetoleft" class="icon iconfont icon-arrowlefttoleft"></i>
    </div>

    <!-- 底部栏手机号入口 -->
    <div class="foot-phone foot-box">
        <a class="a-open" 
           href="" 
           target="_blank" 
           rel="noopener"
           id="footerWhatsappLink">
             <i class="icon iconfont icon-whatsapp"></i>
        </a>
        <div class="show-footer_phone">
            <span class="show-phone" id="footerPhoneDisplay"></span>
        </div>
    </div>

    <!-- 底部栏邮箱入口 -->
    <div class="foot-email foot-box">
        <a class="a-open" 
           href="" 
           target="_blank" 
           rel="noopener"
           id="footerEmailLink">
             <i class="icon iconfont icon-mail"></i>
        </a>
        <div class="show-footer_email">
            <span class="show-email" id="footerEmailDisplay"></span>
        </div>
    </div>

    <!-- 底部栏二维码（暂未启用）
    <div class="foot-code foot-box">
        <i class="icon iconfont icon-erweima"></i>
        <div class="show-footer_code">
            <img src="../../images/code.png" alt="联系客服二维码">
        </div>
    </div>
    -->

    <!-- 底部栏回到顶部（暂未启用）
    <div class="foot-totop foot-box" onclick="toTop()">
        <i class="icon-foot fa fa-light fa-arrow-up fa-lg "></i>
    </div>
    -->
</footer>

<script>
    // 配置信息 - 在此处修改联系方式，所有引用处会自动更新
    const contactConfig = {
        phone: '8613800000000',       // 电话号码（用于链接）
        phoneDisplay: '+86 15862618383', // 显示的电话号码
        email: 'hello@example.com' // 邮箱地址
    };

    // 初始化联系方式
    function initContactInfo() {
        // 更新侧边栏联系方式
        document.getElementById('whatsappLink').href = `https://api.whatsapp.com/send?phone=${contactConfig.phone}`;
        document.getElementById('phoneDisplay').textContent = contactConfig.phoneDisplay;
        document.getElementById('emailLink').href = `mailto:${contactConfig.email}`;
        document.getElementById('emailDisplay').textContent = contactConfig.email;

        // 更新底部栏联系方式
        document.getElementById('footerWhatsappLink').href = `https://api.whatsapp.com/send?phone=${contactConfig.phone}`;
        document.getElementById('footerPhoneDisplay').textContent = contactConfig.phoneDisplay;
        document.getElementById('footerEmailLink').href = `mailto:${contactConfig.email}`;
        document.getElementById('footerEmailDisplay').textContent = contactConfig.email;
    }

    // 页面加载完成后初始化联系方式
    window.addEventListener('DOMContentLoaded', initContactInfo);

    // 侧边栏切换状态计数器（用于控制图标旋转角度）
    let sidebarToggleCount = 0;
    // 底部栏切换状态计数器
    let footerToggleCount = 0;

    /**
     * 切换侧边栏显示/隐藏状态
     * 1. 控制切换按钮的旋转动画
     * 2. 控制联系信息的平移显示/隐藏
     */
    function toggleSidebar() {
        // 获取DOM元素
        const toggleIcon = document.getElementById('hidetoright');
        const whatsappItem = document.querySelector('.contact-sidebar-phone');
        const emailItem = document.querySelector('.contact-sidebar-email');
        const codeItem = document.querySelector('.contact-sidebar-code');

        // 更新旋转角度（每次点击旋转180度）
        sidebarToggleCount += 180;
        toggleIcon.style.transform = `translate(-50%, -50%) rotate(${sidebarToggleCount}deg)`;

        // 切换显示/隐藏状态
        const isHidden = whatsappItem.style.transform === 'translateX(100px)';
        if (isHidden) {
            // 显示元素
            whatsappItem.style.transform = 'translateX(0)';
            emailItem.style.transform = 'translateX(0)';
            if (codeItem) codeItem.style.transform = 'translateX(0)';
        } else {
            // 隐藏元素
            whatsappItem.style.transform = 'translateX(100px)';
            emailItem.style.transform = 'translateX(100px)';
            if (codeItem) codeItem.style.transform = 'translateX(100px)';
        }
    }

    /**
     * 切换底部栏显示/隐藏状态
     * 1. 控制切换按钮的旋转动画
     * 2. 控制联系信息的平移显示/隐藏
     */
    function toggleFooter() {
        // 获取DOM元素
        const toggleIcon = document.getElementById('hidetoleft');
        const whatsappItem = document.querySelector('.foot-phone');
        const emailItem = document.querySelector('.foot-email');
        const codeItem = document.querySelector('.foot-code');

        // 更新旋转角度（每次点击旋转180度）
        footerToggleCount += 180;
        toggleIcon.style.transform = `translate(-50%, -50%) rotate(${footerToggleCount}deg)`;

        // 切换显示/隐藏状态
        const isHidden = whatsappItem.style.transform === 'translateX(-1000px)';
        if (isHidden) {
            // 显示元素
            whatsappItem.style.transform = 'translateX(0)';
            emailItem.style.transform = 'translateX(0)';
            if (codeItem) codeItem.style.transform = 'translateX(0)';
        } else {
            // 隐藏元素
            whatsappItem.style.transform = 'translateX(-1000px)';
            emailItem.style.transform = 'translateX(-1000px)';
            if (codeItem) codeItem.style.transform = 'translateX(-1000px)';
        }
    }

    /**
     * 回到页面顶部功能
     * 兼容不同浏览器的滚动高度获取方式
     */
    function toTop() {
        // 现代浏览器
        if (window.scrollTo) {
            window.scrollTo(0, 0);
        } else {
            // 兼容旧浏览器
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    }
</script>
<style>
/* 图标容器基础样式 */
.icon-box {
    width: 50px;
    height: 50px;
    /* 圆形边框颜色 (当前注释掉) */
    /* border: 2px solid #c9c9c9; */
    border-radius: 50%;
    position: relative;
    /* 圆形框内背景色 */
    background-color: rgba(255, 255, 255, 0.25);
    margin-bottom: 5px;
}

/* 图标通用样式 */
.icon {
    /* 侧边图标颜色 */
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
}

/* 特定图标样式调整 */
.icon-arrowrighttoright {
    font-size: 30px !important;
}

.icon-mail {
    font-size: 20px !important;
    top: 47%; /* 微调邮件图标垂直位置 */
}

.icon-whatsapp {
    font-size: 20px !important;
}

.icon-weixin {
    font-size: 30px;
}

/* 侧边栏元素颜色定义 */
.contact-sidebar-hide {
    /* hide侧边按钮背景颜色 */
    background-color: #1C5E9A;
}

.contact-sidebar-phone {
    /* 电话图标背景颜色 */
    background-color: #1C5E9A;
}

.contact-sidebar-email {
    /* 邮箱图标背景颜色 */
    background-color: #1C5E9A;
}

.contact-sidebar-code {
    /* 二维码图标背景颜色 */
    background-color: #1C5E9A;
}

/* 底部栏元素样式 */
.foot-hide {
    /* 底部隐藏按钮背景颜色 */
    background-color: #1C5E9A;
    width: 60px !important;
    height: 50px; /* 明确高度，确保图标显示完整 */
    z-index: 9999; /* 确保在其他元素上方显示 */
}

.foot-phone,
.foot-email,
.foot-code {
    background-color: #1C5E9A;
    transition: all 1s ease; /* 平滑过渡动画 */
}

/* 底部栏容器样式 */
.foot-box {
    /* 底部边框颜色 (当前注释掉) */
    /* border: 2px solid #fff; */
    margin: 0px -1px 0px 0px;
    width: 50%;
    cursor: pointer; /* 鼠标悬停显示手型 */
    position: relative;
}

/* 底部栏元素边框调整 */
.foot-box:nth-child(2),
.foot-box:nth-child(3),
.foot-box:nth-child(4) {
    border-left: 0px;
}

/* 底部栏整体样式 */
.footerbar {
    z-index: 9999; /* 确保在页面内容上方显示 */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    transition: all 0.3s linear; /* 平滑过渡效果 */
}

/* 底部栏图标样式 */
.icon-foot {
    /* 底部图标颜色 */
    color: rgb(86, 86, 243);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 弹出信息样式 */
.code > .show-code,
.email > .show-email,
.phone > .show-phone {
    /* 侧边栏弹出文本大小 */
    font-size: 18px;
    white-space: nowrap; /* 防止文本换行 */
    padding: 0px 20px;
}

/* 侧边栏整体样式 */
.contact-sidebar {
    position: fixed;
    z-index: 9999; /* 确保在页面内容上方显示 */
    right: 0;
    bottom: 15%;
    padding: 6px 6px 0;
    border-radius: 20px 0 0 20px; /* 右侧圆角 */
}

/* 侧边栏元素动画效果 */
.contact-sidebar-phone {
    transition: all 1.2s; /* 电话图标的过渡时间 */
}

.contact-sidebar-email {
    transition: all 0.9s; /* 邮箱图标的过渡时间 */
}

.contact-sidebar-code {
    transition: all 0.6s; /* 二维码图标的过渡时间 */
}

.icon-arrowlefttoleft {
    font-size: 30px !important; /* 增大底部箭头大小，与侧边栏箭头保持一致 */
}
    
.icon-arrowlefttoleft,
.icon-arrowrighttoright {
    transition: all 0.3s; /* 箭头图标的过渡时间 */
}

/* 侧边栏内部元素样式 */
.contact-sidebar > div {
    cursor: pointer; /* 鼠标悬停显示手型 */
    text-align: center;
}

.contact-sidebar > div h3 {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

/* 侧边栏弹出框样式 */
.contact-sidebar > div .code,
.contact-sidebar > div .email,
.contact-sidebar > div .phone,
.contact-sidebar > div .hide {
    padding: 6px;
    align-items: center;
    display: none; /* 默认隐藏 */
    position: absolute;
    z-index: 9999; /* 确保在图标上方显示 */
    top: 15%;
    right: 70px; /* 显示在图标左侧 */
    border-radius: 8px;
    box-shadow: 8px 8px 8px 8px rgba(88, 95, 110, 0.22); /* 阴影效果 */
    background-color: #f7f7f7;
}

/* 底部栏弹出框样式 */
.footerbar > div .show-footer_code,
.footerbar > div .show-footer_email,
.footerbar > div .show-footer_phone {
    padding: 6px;
    align-items: center;
    display: none; /* 默认隐藏 */
    position: absolute;
    z-index: 9999; /* 确保在图标上方显示 */
    bottom: 110%; /* 显示在图标上方 */
    font-size: 10px;
    border-radius: 8px;
    box-shadow: 8px 8px 8px 8px rgba(88, 95, 110, 0.22); /* 阴影效果 */
    background-color: #f7f7f7;
}

/* 侧边栏弹出框箭头样式 */
.contact-sidebar > div .email:after,
.contact-sidebar > div .phone:after,
.contact-sidebar > div .code:after {
    position: absolute;
    top: 50%;
    left: 100%; /* 箭头显示在右侧 */
    content: '';
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #ffffff; /* 三角形箭头 */
}

/* 悬停显示弹出框 */
.contact-sidebar-email:hover .email,
.contact-sidebar-phone:hover .phone,
.contact-sidebar-code:hover .code,
.foot-email:hover .show-footer_email,
.foot-phone:hover .show-footer_phone,
.foot-code:hover .show-footer_code {
    display: block;
}

/* 二维码图片样式 */
.show-footer_code > img,
.code > img {
    width: 80px !important;
}

/* 电话弹出框宽度 */
.phone {
    width: 200px;
}

/* 链接样式 */
.a-lg {
    width: 100px;
    height: 100px;
}

.a-open {
    display: block;
    height: 50px;
    border-radius: 50px;
}

/* 响应式显示控制 */
@media (min-width: 770px) {
    /* 大屏幕隐藏底部栏 */
    .footerbar {
        display: none;
    }
}

@media (max-width: 770px) {
    /* 小屏幕隐藏侧边栏 */
    .contact-sidebar {
        display: none;
    }
}
</style>
WordPress-添加侧边媒体栏

相关文章

用 Astro 做工业官网➔

用 Android 做疲劳检测➔

MediaPipe 手势识别的几个坑➔
