用于 WordPress 的 JavaScript
已发表: 2023-02-12作为 WordPress 用户，您可能偶尔希望在不破坏主题的情况下调整您的页面或帖子超出主题允许的范围。 例如，您可能想在您的站点中添加一个交互式元素，但是当您保存更改时，WordPress 会删除您的代码。
由于将代码直接添加到页面或帖子中并不容易，因此这可能是一个令人沮丧的障碍。 但是，有一种方法可以克服它。 可以在 WordPress 平台内使用 JavaScript 将动态元素添加到页面和帖子，或整个网站。
在本文中，我们将了解 JavaScript，它是什么，以及如何使用它来增强您的 WordPress 数字体验。 我们还将检查几个可以帮助您在您的网站上实施 JavaScript 的插件。 收集您所有令人惊叹的网站创意，让我们开始吧！
什么是 JavaScript？
JavaScript 是最流行的编程语言之一。 它可以为网站添加一层动态功能。 虽然大多数网站的基本元素都是用 HTML 和 CSS 组合在一起的，但 JavaScript 为聚会带来了大量引人入胜的选项。 这可能包括从交互式计算器到实时信息提要的任何内容。
JavaScript 的优势之一是它通常部署为客户端编程。 这意味着脚本在访问者查看页面时从其浏览器运行。 一旦 HTML 和 CSS 部署并创建了页面结构，JavaScript 就可以在其他元素之上运行以实现某些动态目标。
JavaScript 做什么？
因此，我们现在知道 JavaScript 主要是一种客户端编程元素，可以改变站点现有的 HTML 和 CSS。 但是它还能做什么呢？ 您可以使用 JavaScript 来做一些有用的事情，包括：
- 在网页上执行事件
- 表单验证，您需要将值存储在变量中
- 可以放在页面或帖子上的第三方 API
由于 JavaScript 由用户的浏览器运行，它也可以从该浏览器收集数据。 这对于制作快速高效的网站来说是必不可少的，这些网站可以快速加载图像并对移动设备做出良好的响应。
什么时候应该将 JavaScript 添加到 WordPress？
当您想要向您的 WordPress 页面添加一个元素时，添加 JavaScript 会派上用场，否则在部署时会使您的服务器陷入困境。 这可能包括复杂的功能，例如音频或视频播放器。 此外，如果您使用大量第三方应用程序，您可能需要向您的站点添加一段 JavaScript 才能使它们正常运行。
由于 JavaScript 被写入 HTML 页面，因此由用户的浏览器决定如何处理它。 因此，虽然 JavaScript 可以在服务器端使用，但它真正的超能力在于客户端实现。
JavaScript 实施的其他一些机会包括基于事件的操作。 这是当您需要在您的网站上发生某些事情以响应用户的操作时，例如鼠标点击或窗口大小调整。
6 个顶级 JavaScript WordPress 插件
现在我们已经介绍了 JavaScript 必须提供的基础知识，让我们来看看一些可以帮助您在网站上安全部署脚本的 WordPress 插件。 下面，我们将回顾六个提供各种不同选项和功能的 WordPress 插件。
1.插入页眉和页脚
这个 WordPress 插件自称是向您的 WordPress 网站添加代码的最简单方法。 Insert Headers and Footers 由 WPBeginner 提供，可以帮助您集成来自社交媒体平台等的第三方 API。 所有这一切都是可能的，无需直接编辑您的 WordPress 主题。
主要特征：
- 为一站式页眉或页脚脚本编辑和插入提供简单的界面
- 使您能够选择在页眉或页脚中插入 JS 代码
- 允许您将 Google Analytics 添加到任何主题
- 可以使用多种代码，包括 HTML、CSS 和 JavaScript
价格：这是一个免费插件。
2. 简单的自定义CSS和JS
简单自定义 CSS 和 JS 插件作为开发工具非常方便，如果升级到专业版则最有效。 它主要关注您网站的外观更改。 更重要的是，它使您能够添加自定义 CSS 和自定义 JavaScript，而无需修改您的 WordPress 主题或插件文件。 通过将代码更改应用到特定页面或 URL 的能力，您可以在使元素生效之前对其进行测试。
主要特征：
- 包括带有语法高亮显示的文本编辑器
- 让您内联或在单独的文件中打印代码
- 在站点的页眉或页脚中启用代码放置
- 可以在前端或管理端添加任意数量的代码
- 更改主题时保留更改
价格：此插件是免费选项。
3. 崇光页眉页脚
SOGO Header Footer 非常适合利用第三方 API 功能。 您可以将 JavaScript 添加到包含 Google 再营销代码的页面的页眉和页脚，仅举一个例子。 请记住，您可能需要购买专业版才能删除广告或访问高级选项。
主要特征：
- 包括对 WooCommerce 商店页面的支持
- 使您能够将 JS 代码应用于所有页面和帖子，或指定某些页面和帖子
- 与古腾堡兼容
- 支持术语和类别页面
价格：有免费版和高级版，起价为 7.90 美元。
4.页脚脚本
这个强大的 WordPress 插件将您的重要脚本移动到您网站的页脚。 如果您的主题运行大量脚本，您可能希望这样做以减少加载时间，或清除图像加载的任何瓶颈。 应该注意的是，只有当您有插件和正确使用 wp_enqueue_scripts 的主题时，脚注脚本才有效。
主要特征：
- 使您能够通过帖子/页面编辑屏幕 metabox 直接禁用特定页面和帖子上的插件功能
- 允许您通过设置页面禁用特定存档页面上的插件
- 可以选择将哪些脚本保留在站点的标题中
价格：这个插件是 100% 免费的。
5. CSS 和 JavaScript 工具箱
接下来，CSS & JavaScript Toolbox 提供了一个仪表板选项，用于管理您网站的所有代码和片段。 对于希望对其代码进行大量控制的开发人员来说，这是一个强大的工具，该工具箱使您能够创建代码块以在您的站点上使用。 您可以添加和管理您的代码块独有的 CSS、JavaScript、HTML 和 PHP 代码，并将它们添加到几乎任何地方。
主要特征：
- 允许您将 CSS、JavaScript、PHP 和 HTML 添加到页面、帖子、自定义帖子类型、标签、类别、URL 等
- 使您能够在不修改主题文件的情况下添加前端样式
- 无需额外的自定义插件或黑客来添加功能
- 帮助您添加用于广告和访客跟踪或社交媒体渠道的第三方脚本
- 可以避免使用 FTP，并在仪表板中管理所有代码添加和更改
价格：您可以试用免费插件，或以 29 美元的价格购买高级版本。
6. 脚本和样式
最后，Scripts n Styles 使您能够将自定义 CSS 和 JavaScript 直接添加到单个帖子、页面或任何其他已注册的自定义帖子类型中。 在 JavaScript 领域，这个插件还带有一些内置的安全功能。 如果您有很多人在您的 WordPress 网站上工作，这将很有帮助。
主要特征：
- 允许您将类添加到正文标签和帖子容器
- 使您能够通过全局设置页面为整个站点创建脚本
- 将新类添加到 TinyMCE 格式下拉菜单，用于帖子和页面的直接样式
- 提供限制特定用户类型使用的选项
价格：使用此插件免费。
在 WordPress 中轻松添加 JavaScript（分两步）
在整个站点范围内包含 JavaScript 的最简单方法之一是通过插件将代码插入页眉或页脚。 让我们来看看它是如何工作的，以插入页眉和页脚为例。
第 1 步：安装并激活插件
第一步是简单地从您网站的插件选项卡中搜索插件，然后安装它。
完成后，您将看到一个激活按钮。 在您通过激活插件完成该过程之前，您的插件无法完全发挥作用。
第 2 步：将 JavaScript 代码插入页眉或页脚
激活插件后，您会在 WordPress 仪表板的“设置”菜单下找到一个新项目，标记为“插入页眉和页脚” 。
您可以在此处添加要在页眉、页脚或两者中运行的所有脚本。 这包括对主题的调整、与第三方 API 的集成以及 CSS 更改。
就这么简单！ 完成后不要忘记保存您的更改，插件会自动在适当的位置加载您的 JavaScript 代码。
使用 WP Engine 了解更多开发人员技巧
使用 JavaScript 对您的 WordPress 网站进行独特和自定义的更改起初看起来令人生畏。 但是，一旦您知道如何成功实施这一关键编程语言，您就可以完全控制您的主题和集成。
作为 WordPress 网站所有者或开发人员，优质资源对您的工作至关重要。 在 WP Engine，我们有针对所有预算的计划和解决方案。 我们在这里为您提供最好的 WordPress 解决方案，并帮助您将您的网站提升到新的极限！