🌟 WordPress 页眉显示随机名人名言教程（带动态切换效果）

type

status

date

Oct 31, 2025 12:29 AM

slug

summary

📌 一、插件介绍

我们使用插件 WPCode – Insert Headers and Footers + Custom Code Snippets（作者：Syed Balkhi）

⭐ 功能强大：可在 Header、Footer 或任意位置插入 HTML/JS/CSS/PHP 代码

🌐 使用方便：支持条件逻辑、广告代码、追踪代码等

⚡ 官方正版，超 200 万站点使用

安装方式：WordPress 后台 → 插件 → 搜索 WPCode → 安装并启用

📌 二、了解 BlogHash 页眉原始代码

原订阅区域代码示例：

显示鼠标箭头图标

文字和按钮是订阅提示

我们将保留图标，替换文字与按钮为名言显示

📌 三、替换订阅显示随机名言

1️⃣ 添加名言占位符

在页眉原图标旁添加 ：

id="quote-box" 是 JS 定位用

opacity 和 transition 用于淡入淡出动画

2️⃣ 插入 JS 脚本（Header 区）

在 WPCode → Header Scripts 区粘贴以下代码：

💡 说明：

页面加载后首次显示一条名言

每 10 秒随机切换，淡出再淡入

后期添加名言，只需修改 QUOTES 数组即可

初级版本-以下是刷新一次才会更新名人名言：

1. HTML 占位符

在页眉中保留图标，但去掉文字和按钮，并添加一个  占位符，用于显示名言：

id="quote-box" 用于 JS 定位和写入名言内容。

样式可自由调整，比如颜色、字体、间距。

2. JS 脚本（WPCode 插件 Header 区）

在 WPCode 插件 → Header 脚本 中添加：

document.addEventListener("DOMContentLoaded", …) 保证页面加载完成后再执行 JS，避免名言显示在页眉最上方。

每次刷新页面，随机显示一条名人名言。

📌 四、操作步骤总结

安装并启用 WPCode 插件 🔌

打开页眉模板，找到订阅区域，删除文字和按钮，仅保留图标

添加  占位符 🖋️

在 WPCode Header 区粘贴上述 JS 脚本 💻

保存并刷新网站，查看效果 🎉

📌 五、效果展示

页眉显示：鼠标图标 + 一条随机名言

每 10 秒自动切换

淡入淡出动画增加动态感

可随时在插件中添加/修改名人名言

✨ 小贴士

名言数组可以添加表情，增强趣味性

保留占位符 ，插件会自动写入内容

可搭配 CSS 调整字体、颜色、间距等

这样，你的博客页眉就变得生动有趣，每次刷新或经过 10 秒都能给访客带来不同的启发 🌈

雨生

📢 博客公告

欢迎来到我的博客！

这里是一个 札记空间，主要用于 记录和分享 个人的所思所想、学习笔记以及一些灵感片段。

本博客的特点：

✍️ 纯记录：不追求华丽辞藻，只求真实与完整。

📚 随笔式：内容涵盖学习心得、工具笔记、日常思考等。

🌐 开放分享：希望这些内容能对你有所启发。

声明：本博客仅为个人笔记整理，非商业用途，部分内容可能会参考网络资源，均注明出处。

感谢你的访问，愿你在这里有所收获！

谢绝转载！谢绝转载！谢绝转载！