前言

最近浏览了其他博客，发现有几个博客底下的样式挺好看的，我就想自己也弄个，但是搜了半天也找不到部署代码，最郁闷的是叫啥，我就自己给取个名字叫：浪影古韵底栏。直接自己动手把代码写出来，并进行了优化。

设计思路

我注意到原有的一些东西很单调，还有些多余的，开始的时候都设计了，后面觉得没必要，文章页已经有了，我就给去除了，下面是核心内容。

一、功能概述

• 桌面端显示底部固定栏：波浪线装饰、左侧爱心图、古风名言、分享/赞赏/返回顶部按钮
• 名言随机+自动切换：页面加载随机一句，之后每5秒淡入淡出切换
• 赞赏弹窗：点击“赞赏”弹出，显示两张微信收款二维码与说明文本（含QQ一键加群链接）
• 移动端隐藏：在≤768px 的设备上整体隐藏底部栏，避免干扰

🎯 核心功能

• 底部波浪线动画：使用外部图片资源实现波浪效果
• 爱心图标装饰：左下角固定位置显示
• 古风名言切换：6句名言每3秒自动切换，带淡入淡出效果
• 统一页面样式：所有页面显示相同的功能按钮布局

📝 名言库内容

1. 寒江孤影，江湖故人，相逢何必曾相识！
2. 名言古道残阳，天涯倦客，相见怎奈已殊途！
3. 孤灯冷酒，红尘旧梦，重逢未必再相知！
4. 荒村野渡，岁月过客，偶遇何须问来处！
5. 断桥残雪，人间离人，邂逅怎堪论过往！
6. 空庭寂月，浮世旧交，再见哪敢提当初！

🔧 功能按钮

• 评论：显示评论数并支持跳转（已去除）
• 点赞：交互式点赞功能（已去除）
• 分享：内容分享功能
• 赞赏：用户赞赏功能（添加赞赏收款弹窗）
• 收藏：内容收藏功能（已去除）
• 返回顶部：智能滚动进度显示0%-100%

🎨 技术特性

• 响应式设计：完美适配桌面（移动端开始也设计了，后面我给去除了）
• CSS优先级保护：使用!important确保样式稳定
• 内联JavaScript：确保名言切换功能可靠执行
• WordPress钩子集成：正确使用wp_head和wp_footer钩子
• 速度优化：进行速度测试，最终优化结果很满意

📱 视觉效果

• 固定底部栏：40px高度，白色背景，带阴影
• 平滑动画：500ms淡入淡出过渡效果
• 古典韵味：名言内容符合网站整体风格
• 清晰布局：功能按钮合理排列，用户体验良好

主题引入（已配置）

• wp-content/themes/zibll/functions.php 中引入

// 引入底部波浪线样式require_once get_theme_file_path('/inc/custom/footer-wave.php');

部署方式超级简单

• 将 footer-wave.php 放入子比主题 /inc/custom/ 目录（没有则创建 custom 目录）
• 将 footer-wave.js 放入子比主题 /inc/custom/ 目录
• 确认 子比主题根目录functions.php 内含引入代码（见上）

三常用配置项（在哪里改）

• 图片与基础样式：footer-wave.php → add_footer_wave_style 函数内
  • 波浪图与爱心图

$wave_img = 'https://bkm.mistora.cc/wp-content/uploads/2025/05/20250515135723250-2号参照图.webp';$love_img = 'https://bkm.mistora.cc/wp-content/uploads/2025/05/20250515135720987-love.png';

• 名言文本：footer-wave.php → add_footer_wave_html 函数内

$quotes = array(    '寒江孤影，江湖故人，相逢何必曾相识！',    '名言古道残阳，天涯倦客，相见怎奈已殊途！',    '孤灯冷酒，红尘旧梦，重逢未必再相知！',    '荒村野渡，岁月过客，偶遇何须问来处！',    '断桥残雪，人间离人，邂逅怎堪论过往！',    '空庭寂月，浮世旧交，再见哪敢提当初！');

• 自动切换间隔（默认5秒）：footer-wave.php 底部内联脚本中

setInterval(switchQuote, 5000); // 单位毫秒

• 桌面/移动显示策略（默认：移动端隐藏）
• footer-wave.php 样式中：

@media (max-width: 768px) {  .footwaveline { display: none !important; }  body { padding-bottom: 0 !important; }}

• 底栏按钮可见性
  • 目前仅保留“分享、赞赏、返回顶部”，如需恢复评论/点赞/收藏，在 footer-wave.php 的 HTML 输出处重新添加相应 块
• 赞赏弹窗内容（图片与文案）
  • footer-wave.php → HTML中已有弹窗结构：

<div class="zs-modal" ...>
  ...
  <div class="zs-modal__qrs">
    <div class="zs-modal__qr">
      <img src="https://s2.d931.com/mmy888/i/tyzyj/4e3f.png" alt="微信赞赏码1">
    </div>
    <div class="zs-modal__qr">
      <img src="https://s2.d931.com/mmy888/i/tyzyj/mlg.png" alt="微信赞赏码2">
    </div>
  </div>
  <p class="zs-modal__tip">
    扫码赞赏随机赠送会员天数或者月数，添加站长qq：
    <a href="https://qm.qq.com/q/e1RGA5hbPO" target="_blank" rel="noopener">1394025921</a>说明来意即可。
  </p>
  ...
</div>