wordpress添加页面_如何在WordPress页面或帖子中轻松添加JavaScript（3种方法）

wordpress添加页面

Do you want to add a JavaScript in your WordPress pages or posts? Sometimes you may need to add a JavaScript code to the entire website or into specific pages. By default, WordPress does not let you add code directly in your posts. In this article, we will show you how to easily add JavaScript in WordPress pages or posts.

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

什么是JavaScript？ (What is JavaScript?)

JavaScript is a programming language that runs not on your server but on the user’s browser. This client-side programming allows developers to do a lot of cool things without slowing down your website.

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

If you want to embed a video player, add a calculator, or some other third-party service, then you will be often asked to copy and paste a JavaScript code snippet into your website.

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

A typical JavaScript code snippet may look like this:

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

<script type="text/javascript"> 

// Some JavaScript code

</script>

<!-- Another Example: --!>  

<script type="text/javascript" src="/path/to/some-script.js"></script>

Now, if you add a javascript code snippet to a WordPress post or page, then it will be deleted by WordPress when you try to save it.

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

That being said, let’s see how you can easily add JavaScript in WordPress pages or posts without breaking your website.

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

方法1。使用插入页眉和页脚添加JavaScript网站范围 (Method 1. Add JavaScript Site-Wide Using Insert Headers and Footers)

Sometimes you will be asked to copy and paste a JavaScript code snippet into your website to add a third-party tool. These scripts usually go to the head section or at the bottom before the </body> tag of your website. This way the code is loaded on every page view.

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

For example, Google Analytics installation code needs to be present on every page of your website, so it can track your website visitors.

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

You can add such code to your WordPress theme’s header.php or footer.php files. However, these changes will be overwritten when you update or change your theme.

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

That’s why we recommend using a plugin to load javascript on your site.

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

First, you need to install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, you need to visit Settings » Insert Headers and Footers page. You will see two boxes, one for the header and the other for the footer section.

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

You can now paste the JavaScript code you copied to one of these boxes and then click on the save button.

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

Insert Headers and Footers plugin will now automatically load the code you added on every page of your website.

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

方法2。使用代码手动添加JavaScript代码 (Method 2. Adding JavaScript Code Manually Using Code)

This method requires you to add code to your WordPress files. If you haven’t done this before, then please see our guide on how to copy and paste code in WordPress.

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

First, let’s take a look at how to add code to your WordPress site’s header. You will need to add the following code to your theme’s functions.php file or a site-specific plugin.

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

function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Adding JavaScript to a Specific WordPress Post or Page Using Code

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

Let’s suppose you only want to load this javascript on a specific WordPress post. To do that, you will need to add conditional logic to the code. Take a look at the following example:

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

function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

If you take a closer look at the code above, you will see that we have wrapped javascript code around conditional logic to match a specific post ID. You can use this by replacing 16 with your own post ID.

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

Now, this code would work for any post type except for pages. Let’s take a look at another example except this one will check for a specific page ID before adding the javascript code to the head section.

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

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');

Instead of is_single, we are now using is_page to check for page ID.

相反is_single的，我们现在使用is_page检查页ID。

We can use the same code with slight modification to add javascript code to your site’s footer. Take a look at the following example.

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

function wpb_hook_javascript_footer() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Instead of hooking our function to wp_head, we have now hooked it to wp_footer. You can also use it with conditional tags to add Javascript to specific posts or pages.

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

方法3。使用插件在帖子或页面内添加JavaScript代码 (Method 3. Adding Javascript Code Inside Posts or Pages Using Plugin)

This method will allow you to add code anywhere inside your WordPress posts and pages. You will also be able to select where in the content you want to embed the javascript code.

这种方法将允许您在WordPress帖子和页面内的任何位置添加代码。 您还可以选择要在内容中嵌入javascript代码的位置。

First, you need to install and activate the Code Embed plugin. For more details, see our step by step guide on how to install a WordPress plugin.

首先，您需要安装并激活Code Embed插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to edit the post or page where you want to add the javascript. On the post edit page, click on the ‘Screen Options‘ button and check the ‘Custom Fields’ option.

激活后，您需要编辑要在其中添加JavaScript的帖子或页面。 在帖子编辑页面上，单击“ 屏幕选项 ”按钮，然后选中“自定义字段”选项。

Now scroll down and below the post editor, you will see the ‘Custom Fields’ metabox where you need to click on the ‘Enter new’ link.

现在向下滚动到帖子编辑器下方，您将看到“自定义字段”元框，您需要在其中单击“输入新”链接。

The custom field name and value fields will now appear.

现在将显示自定义字段名称和值字段。

You need to provide a name for the custom field with a CODE prefix (for example, CODEmyjscode) and then paste the javascript code in the value field.

您需要为自定义字段提供一个带有CODE前缀的名称(例如CODEmyjscode)，然后将javascript代码粘贴到value字段中。

Don’t forget to click on the ‘Add Custom Field’ button to save your custom field.

不要忘记单击“添加自定义字段”按钮以保存您的自定义字段。

Now you can use this custom field to embed the JavaScript code anywhere in this post or page. Simply add this embed code anywhere in your post content.

现在，您可以使用此自定义字段在该帖子或页面的任何位置嵌入JavaScript代码。 只需在您的帖子内容中的任何位置添加此嵌入代码。

{{CODEmyjscode}}

{{CODEmyjscode}}

You can now save your post or page and view your site. You will be able to see the javascript code by using the Inspect tool or by viewing the page source.

现在，您可以保存您的帖子或页面并查看您的网站。 您可以使用检查工具或查看页面源代码来查看javascript代码。

Tip: These methods are for beginners and website owners. If you are learning WordPress theme or plugin development, then you need to properly enqueue JavaScript and stylesheets to your projects.

提示：这些方法适用于初学者和网站所有者。 如果您正在学习WordPress主题或插件开发，则需要适当地将JavaScript和样式表加入项目。

We hope this article helped you learn how to easily add JavaScript in WordPress pages or posts. You may also want to see our list of extremely useful tricks for the WordPress functions file.

我们希望本文能帮助您学习如何轻松地在WordPress页面或帖子中添加JavaScript。 您可能还想查看有关WordPress函数文件的极其有用的技巧的列表。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/

wordpress添加页面