您想在 WordPress 页面或帖子中添加 JavaScript 吗?
有时您可能需要将 JavaScript 代码添加到整个网站或特定页面和帖子中。默认情况下,WordPress 不允许您直接在帖子中添加代码。
在本文中,我们将向您展示如何轻松在 WordPress 页面或帖子中添加 JavaScript。
![如何轻松在 WordPress 页面或帖子中添加 JavaScript(3 种方法) 如何轻松在 WordPress 页面或帖子中添加 JavaScript(3 种方法)](https://www.wpbeginner.com/wp-content/uploads/2021/09/add-JavaScript-in-WordPress-pages-posts-og.png)
什么是 JavaScript?
JavaScript 是一种在用户浏览器上运行的编程语言,而不是在您的服务器上运行。这种客户端编程允许开发人员做很多很酷的事情,而不会减慢您的网站速度。
如果您想嵌入视频播放器、添加计算器或其他第三方服务,那么您经常会被要求将 JavaScript 代码片段复制并粘贴到您的WordPress 网站中。
典型的 JavaScript 代码片段可能如下所示:
123456 | <script type= "text/javascript" > // Some JavaScript code </script> <!-- Another Example: --!> <script type= "text/javascript" src= "/path/to/some-script.js" ></script> |
由
但是,如果您将 JavaScript 代码片段添加到 WordPress 帖子或页面,那么当您尝试保存它时,它会被 WordPress 删除。
话虽这么说,让我们看看如何轻松地将 JavaScript 添加到 WordPress 页面或帖子而不破坏您的网站。您可以使用下面的快速链接直接跳至您要使用的方法。
方法 1. 使用 WPCode 在 WordPress 网站上的任何位置添加 JavaScript(推荐)
有时,插件或工具需要您将 JavaScript 代码片段复制并粘贴到您的网站中才能正常工作。
通常,这些脚本将出现在WordPress 博客的页眉或页脚部分,因此代码会加载到每个页面视图上。
例如,当您安装 Google Analytics时,代码需要在您网站的每个页面上运行,以便它可以跟踪您的网站访问者。
您可以手动将代码添加到您的header.php
或footer.php
文件中,但是当您更新或更改主题时,这些更改将被覆盖。
这就是为什么我们建议使用WPCode在整个 WordPress 网站的任何位置添加 JavaScript。
WPCode 是 WordPress 可用的最强大的代码片段插件。它可以让您轻松地将自定义代码添加到网站的任何区域,最重要的是,它是免费的。
首先,您需要安装并激活免费的 WPCode 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后,您需要转到代码片段»页眉和页脚。
在这里,您将看到三个单独的字段,标记为“页眉”、“正文”和“页脚”。
![wpcode-页眉-页脚-2 使用 WPCode 添加页眉和页脚代码片段](https://www.wpbeginner.com/wp-content/uploads/2022/08/wpcode-header-footer-2.jpg)
现在,您可以将 JavaScript 代码添加到这些框中之一,然后只需单击“保存”按钮即可。WPCode 现在将自动加载您添加到网站每个页面的代码。
您还可以将代码片段添加到网站上的任何其他位置,例如内部帖子或页面。
为此,只需转到代码片段 » + 添加片段,然后单击“创建您自己的片段”。
![wpcode 在帖子中插入 使用 WPCode 创建您自己的代码片段](https://www.wpbeginner.com/wp-content/uploads/2018/10/wpcode-insert-in-posts.jpg)
现在,您将看到“创建自定义代码段”页面,您可以在其中添加代码标题并将其粘贴到“代码预览”框中。
之后,从“代码类型”下拉菜单中选择“JavaScript 片段”。
![在 WPCode 中输入 jQuery/JavaScript 片段 在 WPCode 中输入 jQuery/JavaScript 片段](https://www.wpbeginner.com/wp-content/uploads/2018/10/javascript-jquery-snippet-in-wpcode.png)
然后,滚动直到找到“插入”部分。
您现在所要做的就是从下拉菜单中选择代码的“位置”。找到“页面、帖子、自定义帖子类型”,然后选择页面或帖子中您希望代码显示的位置。
![在 WPCode 中的帖子之前插入代码片段 在 WPCode 中的帖子之前插入代码片段](https://www.wpbeginner.com/wp-content/uploads/2018/10/wpcode-insert-before-post.png)
如果您选择让 WPCode 在段落之前或之后插入代码片段,您将能够选择它将出现在帖子中的哪个特定段落之前或之后。
例如,如果您在“插入数字”字段中输入 1,则代码片段将出现在第一段之前或之后。第二段使用 2,依此类推。
之后,您只需单击屏幕顶部附近的切换按钮即可切换到“活动”,然后单击旁边的“保存片段”按钮。
![wpcode 保存插入到帖子中 激活并保存 WPCode 中的代码片段](https://www.wpbeginner.com/wp-content/uploads/2022/08/wpcode-save-insert-into-post.jpg)
这就是使您的代码片段在网站上生效所需的全部!
方法 2. 使用代码手动向 WordPress 添加 JavaScript 代码(高级)
使用此方法,您需要将代码添加到 WordPress 文件中。如果您以前没有这样做过,请查看我们有关如何在 WordPress 中复制和粘贴代码的指南。
首先,我们将向您展示如何将代码添加到 WordPress 网站的标头。您需要复制以下代码并将其添加到您的functions.php中。
12345678 | function wpb_hook_javascript() { ?> <script> // your javscript code goes </script> <?php } add_action( 'wp_head' , 'wpb_hook_javascript' ); |
由
使用代码将 JavaScript 添加到特定 WordPress 帖子
如果您只想将 JavaScript 添加到单个 WordPress 帖子中,则需要向代码中添加条件逻辑。
看一下下面的代码片段:
12345678910 | function wpb_hook_javascript() { if (is_single ( '5' )) { ?> <script type= "text/javascript" > // your javscript code goes here </script> <?php } } add_action( 'wp_head' , 'wpb_hook_javascript' ); |
由
仅当帖子 ID 匹配“5”时,上面的代码才会运行 JavaScript。确保将“5”替换为您自己的帖子 ID。
要查找帖子 ID,请打开您想要运行 JavaScript 的帖子。然后,您将在页面的 URL 中找到帖子 ID。
![查找 WordPress 帖子 ID 查找 WordPress 帖子 ID](https://www.wpbeginner.com/wp-content/uploads/2021/09/wordpress-post-id.png)
使用代码将 JavaScript 添加到特定 WordPress 页面
如果您只想将 JavaScript 添加到单个 WordPress 页面,那么您需要向代码添加条件逻辑,就像上面一样。
看一下下面的例子:
12345678910 | function wpb_hook_javascript() { if (is_page ( '10' )) { ?> <script type= "text/javascript" > // your javscript code goes here </script> <?php } } add_action( 'wp_head' , 'wpb_hook_javascript' ); |
由
如果页面 ID为“10”,上面的代码将仅运行 JavaScript 。确保将“10”替换为您自己的页面 ID。
您可以使用与上面相同的方法找到页面ID。只需打开您希望 JavaScript 运行的页面并记下 URL 中的页面 ID。
使用页脚中的代码将 JavaScript 添加到特定的 WordPress 帖子或页面
如果您希望 JavaScript 在网站页脚而不是页眉中运行,则可以将以下代码片段添加到您的网站。
12345678 | function wpb_hook_javascript_footer() { ?> <script> // your javscript code goes </script> <?php } add_action( 'wp_footer' , 'wpb_hook_javascript_footer' ); |
由
此代码片段挂钩wp_footer
而不是wp_head
. 您还可以添加条件标签,将 JavaScript 添加到特定的帖子和页面,如上面的示例。
注意:这些方法适用于初学者和网站所有者。如果您正在学习 WordPress 主题或插件开发,那么您需要将 JavaScript 和样式表正确排列到您的项目中。
我们希望本文能帮助您了解如何轻松地将 JavaScript 添加到 WordPress 页面或帖子中。您可能还想查看我们关于如何选择最佳博客平台的指南,以及我们专家为您的网站挑选的最佳人工智能聊天机器人软件。