子比主题 - 网站添加底部导航

一、操作前准备

1. 文件备份：修改主题文件前，建议先备份functions.php和footer.php文件（路径：/wp-content/themes/zibll/），避免操作失误导致主题报错；
2. 图片准备：教程涉及 2 张图片资源（原站长存于自身媒体库），需先将这 2 张图片保存到本地，后续上传至自己的博客媒体库（用于底部导航的图标或装饰元素）；
3. 代码准备：提前准备好教程中提及的 4 类代码（functions.php 代码、footer.php 代码、头部 HTML 代码、CSS 样式代码、JavaScript 代码），确保代码完整无遗漏。

二、详细操作步骤

1. 第一步：修改 functions.php 文件（添加功能支持）

• 找到文件：通过 FTP 工具或网站后台文件管理器，进入路径 /wp-content/themes/zibll/，找到并打开 functions.php 文件；
• 添加代码：将教程提供的 “functions.php 专用代码” 完整复制，粘贴到文件末尾（或主题预留的 “自定义功能代码区域”），保存文件并确认修改成功。

2. 第二步：修改 footer.php 文件（添加底部导航结构）

• 找到文件：在同一主题目录（/wp-content/themes/zibll/）中，打开 footer.php 文件；
• 定位位置：使用编辑器的 “查找” 功能，找到 </footer> 闭合标签（确保是底部导航区域对应的 footer 标签，而非其他嵌套标签）；
• 插入代码：在 </footer> 标签下方，粘贴教程提供的 “footer.php 专用代码”，保存文件。
• 图片适配：若代码中包含图片链接，需将之前上传到自己媒体库的 2 张图片链接，替换代码中的默认图片路径，确保图片正常显示。

3. 第三步：后台添加 “自定义头部 HTML 代码”

• 进入后台设置：登录 WordPress 后台，依次点击「Zibll 主题设置」→「自定义代码」，进入自定义代码配置页面；
• 粘贴代码：在 “自定义头部 HTML 代码” 输入框中，完整粘贴教程提供的头部 HTML 代码，点击页面底部的「保存设置」按钮。

4. 第四步：后台添加 “自定义 CSS 样式”

• 保持页面位置：仍在「Zibll 主题设置」→「自定义代码」页面，找到 “自定义 CSS 样式” 输入框；
• 添加样式代码：将教程提供的 CSS 样式代码复制粘贴进去，此代码用于控制底部导航的外观（如颜色、布局、hover 效果等），保存设置。

5. 第五步：后台添加 “自定义 JavaScript 代码”

• 继续操作：在同一 “自定义代码” 页面，找到 “自定义 javascript 代码” 输入框；
• 插入交互代码：粘贴教程提供的 JavaScript 代码（用于实现底部导航的点击交互、动态效果等功能），再次点击「保存设置」，完成所有代码配置。

三、注意事项

1. 代码完整性：每一步粘贴代码时，务必确保代码完整，不要遗漏开头的<script>/<style>标签或结尾的闭合标签，否则可能导致功能失效或页面错乱；
2. 图片链接替换：若底部导航包含图标，需确认媒体库中 2 张图片的链接已正确替换到代码中，避免显示 “图片失效” 的情况；
3. 浏览器缓存：设置完成后，若前台未显示底部导航，可尝试清除浏览器缓存或使用 “无痕模式” 刷新页面，查看效果。

四、结语