!
也想出现在这里? 联系我们
广告位

WordPress页面或文章中轻松添加JavaScript代码

您想在 WordPress 页面或帖子中添加 JavaScript 吗?有时您可能需要将 JavaScript 代码添加到整个网站或特定页面。默认情况下,WordPress 不允许| r / (您直接在帖子中添加代码。在本文中,我们将向您展示如何在 WordPress 页面或帖子中轻松添加 JavaScript。

JavaScript 是一种编程语言,不在您的服务器上运行,而} T i是在用户的浏览器上运行。这种客户端I 1 6 ( g \编程允许开发人员在不降低网站速度的情况下做很多很酷/ n N g 9 p z的事情。典型的 JavaScript 代码段可能如下所示:

  1. <script type="text/javascript">
  2. // Some JavaScript cod& = @ S ^ je
  3. </scripA Z Y t \ 3 p F \t>
  4. <!-- Another Example: --!>
  5. <script type="text/javascript&qT n 8 S q s ` @uot; srcj : S # f E e = d="/path/to/some-scrig & # R ? U u Cpt.js"></scA . J 1 P c v R Lript>

现在,如果您将一个 javascript 代码段添加到 WordPress 帖子或页X S E c ? o n . }面,那么当您尝试保存它时,它将被 WordPress 删除。虽然 WordPress 不允许直接添加 jd y 3 ~ D Z g - Gavascri2 : h o B O h hpt 代码段,但s J f ] S r g W ;是我们还是有办法在不破坏网站的情况下轻松地在 WordPress 页面或帖子中添加 JavaSc) p H 3ript。

方法一

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

方法二

首先,我们来看看如何将代码添加到 WordPress 网站的页眉中。您只需要根据j ~ D e v * 5 j =以下情况添加相应代码到主题的 funx * $ ]ctions.php 文件或特定于站点的插件中即可。

  1. //1.添加 JS 代码整个网站顶部
  2. functic ] z O { . 9on wpb_hook_javascript() {
  3. ?>
  4. <sc` Z e e Sript>
  5. // your javscript cO * Q p ;ode goes
  6. </script>
  7. <?php
  8. P f { q \ ;25;
  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">A P % 6
  6. // you+ u R N j , H 1r javscript codeR r O P = goes hereT ! A 3 n B h S
  7. </script>
  8. <?php
  9. }
  10. }
  11. add_action('wp_head', 'wpb_hook_javascrd ! z / 9ipt'. C Q . ~ q E n1;;

如果你仔细看看上面的代码,3 O N 2 2 m J }你会发现我们已经在条件逻辑周T i \围包装了 javascript 代码以匹配特定的帖子 I1 V d Q #D。您可以使用自己的帖子 ID 替换 16 来使用此功能。

  1. //3.添加 JS 代码到指定的页面中
  2. function wpb_hook_javascript(: c l N E) {
  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', 'wpbL w s_hook_javascript'V 1 *41;;
  1. //4.添加 JS 代码到站点的页脚中
  2. function wpb_hoc P W ; ) 2ok_javascript_footer() {
  3. ?>
  4. <script&gt^ \ q 9 r;
  5. // your javscript code goes
  6. </script>
  7. <?php
  8. }
  9. add_action* 1 E h 7 r 4 X D0;'w& ; +p_u ` p Ufooter', 'wpb_hook_javascript_footl ^ X { N ] Zer');

方法三

使用插件在帖子或页面内添加 Javascript 代码,此方法允许您直接在 WordPress 帖子和页面内的任何位置添加代码。您还可以选择要嵌入 javascript 代码的内容的位置。首先,您需要安装\ l _ g V [ ! K并激活 Code Embed 插件。激活后,您需要手工编辑需要添加 javasck O \ w [ W G G tript 的帖子或页面,然后通过添加自定义字段的方式添加 jx ~ % uavascript 代码。您需要使用 CODX p , $ \ ; | O ;E 前缀(例如,CODEmyjscode)为自定义字段提供名称,接着将 javascript 代码粘贴到值字段中,然后点击“添加自定义字段”按钮以保存自定U P 8义字段。具体如下图所示:

现在,您可以使用此自定义字段将 JavaScript 代码嵌入此帖子或页面中的任何位置。只需在2 ? x $ M A V帖子内容的任何位置添加此嵌入代码即可。

  1. {{CODEmyjscode}}

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

这些方法适用于初? F b # t m T { }学者和网站所Z } Y有者。如果您正在学习 WordPress 主题或插件开发,那么您需要将 Jave P q g ` P \ y 6aScript 和样式表正` ^ N q 8 d k W F确地排列到您的项目中。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 判断当前分类是否有子分类

2022-8-11 16:20:29

WordPress教程

WordPress 实现自动中文分词搜索的方法

2022-8-11 16:21:41

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索