本文介绍如何在子比主题的顶部多功能组件中，通过 typed.js 库实现一个自带光标闪烁的逐字打字机效果，让网站标语或标题像真人打字一样逐字显现。所有修改均在主题后台的自定义代码中完成，无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用 Zibll 子比主题并希望为网站标题或标语增加动态打字效果的 WordPress 站长

核心价值：通过 typed.js 库为网站顶部标题添加逐字打印动画，让网站第一视觉更具动感和吸引力。

操作前准备

在开始配置之前，需要先确认以下几点：

• 无需修改主题文件：所有代码均通过主题后台的自定义代码功能添加，升级主题时效果不会丢失。
• 操作入口：
  • HTML 代码：WordPress 后台 → 「Zibll子比主题」→「主题设置」→「页面&显示」→「顶部多功能组件」→「叠加搜索组件」→「额外内容」
  • JS 代码：WordPress 后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义底部HTML代码」
  • CSS代码：WordPress 后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义CSS样式」
• 核心库说明：打字机效果依赖 typed.js 库（v2.0.12），一个轻量级的 JavaScript 打字动画库。
• 备份建议：在添加任何自定义代码前，建议先备份网站。

完整代码部署

部署 HTML 结构

• 登录 WordPress 后台，进入 「Zibll子比主题」→「主题设置」。
• 在左侧菜单找到 「页面&显示」，点击 「顶部多功能组件」。
• 找到 「叠加搜索组件」 区域，在 「额外内容」 文本框中粘贴以下 HTML 代码：

说明：#typed-strings 中的多个 <p> 标签代表不同时段依次显示的打字内容，可以根据需要自行修改。

部署 JavaScript 代码

• 在左侧菜单找到 「全局&功能」，点击 「自定义代码」 选项卡。
• 找到 「自定义底部HTML代码」 文本框，在末尾粘贴以下完整代码：

说明：第一段 <script> 是 typed.js 的核心库代码（v2.0.12），已压缩。第二段是初始化代码，用于激活打字效果。

重要提示：如果上面的 typed.js 压缩代码复制不完整，也可以直接通过 CDN 引用官方库，将第一段 <script> 替换为：

保存设置

点击页面底部的 「保存设置」 按钮，刷新前台即可看到打字机效果。

参数自定义说明

你可以在初始化代码中调整以下参数，定制打字效果：

参数	说明	推荐值
typeSpeed	打字速度（毫秒/字符）	80（适中）、50（较快）、120（较慢）
backSpeed	删除速度（毫秒/字符）	40（适中）、20（快速删除）
backDelay	删除前停顿时间（毫秒）	1500（1.5秒）、3000（3秒）
startDelay	开始前延迟（毫秒）	500（0.5秒）
loop	是否循环播放	true（循环）、false（仅一次）
showCursor	是否显示光标	true（显示）、false（隐藏）
cursorChar	光标字符	'|'（竖线）、'_'（下划线）、'▍'（方块）

文字内容修改

修改 HTML 中 #typed-strings 里的 <p> 标签内容即可更换打字文字：

<div id="typed-strings">
    <p>这里输入第一段文字</p>
    <p>这里输入第二段文字</p>
    <p>这里输入第三段文字</p>
</div>

精简版

将下面的代码放到：自定义CSS样式即可！

将下面的代码放到你想显示的地方即可！

效果演示

渡漳网提供海量免费游戏资源、PPT模板、办公文档、自学教程、系统源码、绿色软件、设计素材等纯净安全资源。