WordPress轻松添加JavaScript代码

您想在 wordpress 页面或帖子中添加 JavaScript 吗?有时您可能需要将 JavaScript 代码添加到整个网站或特定页面。默认情况下,WordPress 不允许您直接在帖子中添加代码。在本文中,我们将向您展示如何在 WordPress 页面或帖子中轻松添加 JavaScript。
WordPress轻松添加JavaScript代码-云模板JavaScript 是一种编程语言,不在您的服务器上运行,而是在用户的浏览器上运行。这种客户端编程允许开发人员在不降低网站速度的情况下做很多很酷的事情。典型的 JavaScript 代码段可能如下所示:

  1.     <script type="text/javascript">
  2.     // Some JavaScript code
  3.     </script>
  4.     <!-- Another Example: --!>
  5.     <script type="text/javascript" src="/path/to/some-script.js"></script>

现在,如果您将一个 javascript 代码段添加到 WordPress 帖子或页面,那么当您尝试保存它时,它将被 WordPress 删除。虽然 WordPress 不允许直接添加 javascript 代码段,但是我们还是有办法在不破坏网站的情况下轻松地在 WordPress 页面或帖子中添加 JavaScript。

方法一

直接添加到 WordPress 站点的页眉页脚中,有时,系统会要求您将 JavaScript 代码段复制并粘贴到您的网站中,以添加第三方工具。这些脚本通常位于网站的标记之前的 head 部分或底部。这样,代码就会加载到每个页面视图上。例如,Google Analytics 安装代码需要出现在您网站的每个页面上,只有这样它才可以跟踪您的网站访问者。您可以将此类代码直接添加到 WordPress 主题的 header.php 或 footer.php 文件中。但是,在更新或更改主题时,这些更改将被覆盖。

方法二

首先,我们来看看如何将代码添加到 WordPress 网站的页眉中。您只需要根据以下情况添加相应代码到主题的 functions.php 文件或特定于站点的插件中即可。

  1.     //1.添加 JS 代码整个网站顶部
  2.     function wpb_hook_javascript() {
  3.     ?>
  4.     <script>
  5.     // your javscript code goes
  6.     </script>
  7.     <?php
  8.     }
  9.     add_action('wp_head', 'wpb_hook_javascript');
  1.     //2.添加 JS 代码到指定的文章中
  2.     function wpb_hook_javascript() {
  3.     if (is_single ('16')) {
  4.     ?>
  5.     <script type="text/javascript">
  6.     // your javscript code goes here
  7.     </script>
  8.     <?php
  9.     }
  10.     }
  11.     add_action('wp_head', 'wpb_hook_javascript');

如果你仔细看看上面的代码,你会发现我们已经在条件逻辑周围包装了 javascript 代码以匹配特定的帖子 ID。您可以使用自己的帖子 ID 替换 16 来使用此功能。

  1.     //3.添加 JS 代码到指定的页面中
  2.     function wpb_hook_javascript() {
  3.     if (is_page ('10')) {
  4.     ?>
  5.     <script type="text/javascript">
  6.     // your javscript code goes here
  7.     </script>
  8.     <?php
  9.     }
  10.     }
  11.     add_action('wp_head', 'wpb_hook_javascript');
  1.     //4.添加 JS 代码到站点的页脚中
  2.     function wpb_hook_javascript_footer() {
  3.     ?>
  4.     <script>
  5.     // your javscript code goes
  6.     </script>
  7.     <?php
  8.     }
  9.     add_action('wp_footer', 'wpb_hook_javascript_footer');

方法三

使用插件在帖子或页面内添加 Javascript 代码,此方法允许您直接在 WordPress 帖子和页面内的任何位置添加代码。您还可以选择要嵌入 javascript 代码的内容的位置。首先,您需要安装并激活 Code Embed 插件。激活后,您需要手工编辑需要添加 javascript 的帖子或页面,然后通过添加自定义字段的方式添加 javascript 代码。您需要使用 CODE 前缀(例如,CODEmyjscode)为自定义字段提供名称,接着将 javascript 代码粘贴到值字段中,然后点击“添加自定义字段”按钮以保存自定义字段。具体如下图所示:
WordPress轻松添加JavaScript代码-云模板现在,您可以使用此自定义字段将 JavaScript 代码嵌入此帖子或页面中的任何位置。只需在帖子内容的任何位置添加此嵌入代码即可。

  1. {{CODEmyjscode}}

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

这些方法适用于初学者和网站所有者。如果您正在学习 WordPress 主题或插件开发,那么您需要将 JavaScript 和样式表正确地排列到您的项目中。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/98314

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买