WordPress轻松添加JavaScript代码

2021-05-22 0 1,341 百度已收录

您想在 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 和样式表准确地排列到您的项目中。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress轻松添加JavaScript代码 https://zhutizhen.com/14500.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章