如何在WordPress页面或帖子中轻松添加JavaScript

2020-05-25
WordPress行业动态

您是否要在WordPress页面或帖子中添加JavaScript？有时您可能需要向整个网站或特定页面添加JavaScript代码。默认情况下，WordPress不允许您直接在帖子中添加代码。在本文中，我们将向您展示如何在WordPress页面或帖子中轻松添加JavaScript。

什么是JavaScript？

JavaScript是一种不在您的服务器上但在用户的浏览器上运行的编程语言。这种客户端编程使开发人员可以做很多很酷的事情而不会降低您的网站速度。

如果要嵌入视频播放器，添加计算器或其他第三方服务，则经常会要求您将JavaScript代码段复制并粘贴到您的网站中。

典型的JavaScript代码段可能如下所示：

现在，如果将javascript代码段添加到WordPress帖子或页面，那么当您尝试保存它时，它将被WordPress删除。

话虽如此，让我们看看如何轻松地在WordPress页面或帖子中添加JavaScript而不破坏您的网站。

方法1。使用插入页眉和页脚添加JavaScript网站范围

有时，系统会要求您将JavaScript代码段复制并粘贴到您的网站中，以添加第三方工具。这些脚本通常位于您网站的</ body>标记之前的顶部或底部。这样，代码将加载到每个页面视图上。

例如，您需要在网站的每个页面上显示Google Analytics（分析）安装代码，以便它可以跟踪您的网站访问者。

您可以将此类代码添加到WordPress主题的header.php或footer.php文件中。但是，当您更新或更改主题时，这些更改将被覆盖。

因此，我们建议您使用插件在您的网站上加载javascript。

首先，您需要安装并激活“ 插入页眉和页脚”插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问设置»插入页眉和页脚页面。您将看到两个框，一个框用于页眉，另一个框用于页脚部分。

现在，您可以将复制的JavaScript代码粘贴到这些框之一中，然后单击“保存”按钮。

插入页眉和页脚插件现在将自动加载您在网站的每个页面上添加的代码。

方法2。使用代码手动添加JavaScript代码

此方法要求您将代码添加到WordPress文件中。如果您之前没有做过，请参阅我们的指南，了解如何在WordPress中复制和粘贴代码。

首先，让我们看一下如何向WordPress网站标题添加代码。您将需要在主题的functions.php文件或特定于站点的插件中添加以下代码。

functionwpb_hook_javascript() { ?> <script> // your javscript code goes </script> <?php}add_action(‘wp_head’, ‘wpb_hook_javascript’);

使用代码将JavaScript添加到特定的WordPress帖子或页面

假设您只想在特定的WordPress帖子上加载此javascript。为此，您将需要在代码中添加条件逻辑。看下面的例子：

functionwpb_hook_javascript() { if(is_single (’16’)) { ?> <script type=”text/javascript”> // your javscript code goes here </script> <?php }}add_action(‘wp_head’, ‘wpb_hook_javascript’);

如果仔细看一下上面的代码，您会发现我们已经将JavaScript代码包装在条件逻辑周围，以匹配特定的帖子ID。您可以通过用自己的帖子ID替换16来使用它。

现在，此代码适用于除页面之外的任何帖子类型。让我们看另一个示例，除了这个示例将在将javascript代码添加到头部之前检查特定的页面ID。

functionwpb_hook_javascript() { if(is_page (’10’)) { ?> <script type=”text/javascript”> // your javscript code goes here </script> <?php }}add_action(‘wp_head’, ‘wpb_hook_javascript’);

取而代之的is_single，我们现在用is_page检查页ID。

我们可以使用相同的代码并稍作修改，以将javascript代码添加到您网站的页脚中。看下面的例子。

functionwpb_hook_javascript_footer() { ?> <script> // your javscript code goes </script> <?php}add_action(‘wp_footer’, ‘wpb_hook_javascript_footer’);

现在，我们不再将函数挂接到wp_head，而是将其挂接到wp_footer。您还可以将其与条件标签一起使用，以将Javascript添加到特定的帖子或页面。