如何在WordPress中添加简单的jQuery脚本？

121

我阅读了Codex和一些有关在WordPress中使用jQuery的博客文章，这非常令人沮丧。我已经尽力将jQuery加载到functions.php文件中，但是所有指南都很糟糕，因为它们假定您已经具有大量WordPress经验。例如，他们说现在通过functions.php文件加载jQuery ，现在要做的就是加载jQuery。

我到底该怎么做？我要向哪些文件添加代码？我如何为单个WordPress页面添加它？

jquery  wordpress 
— 公民
source
3
您尝试过什么，使您认为所有指南都很糟糕？
— 未定义的
1
在该指南在哪一步你遇到哪些问题？
— pixelistik 2012年
您能具体点吗？您尝试了什么但没有成功？
— 艾哈迈德·福阿德
4
我同意@Citizen，首先要了解使用wordpress的习惯，这是一个雷区，因为在网上找到的一些指南中的说明对于初学者来说不是很彻底。
— 哈利
— Patel

Answers:

192

我知道您对这些教程的意思。这是我的方法：

首先，您需要编写脚本。在主题文件夹中，创建一个名为“ js”的文件夹。在该文件夹中为您的JavaScript创建一个文件。例如your-script.js。将jQuery脚本添加到该文件（<script>.js文件中不需要标签）。

这是您的jQuery脚本（在wp-content / themes / your-theme / js / your-scrript.js中）外观的示例：

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

请注意，在函数开始时我使用的是jQuery，而不是$。

好的，现在打开主题的functions.php文件。您将需要使用该wp_enqueue_script()函数，以便您可以添加脚本，同时还告诉WordPress它依赖jQuery。这样做的方法如下：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

假设您的主题在正确的位置包含wp_head和wp_footer，则应该可以。让我知道您是否需要更多帮助。

可以在WordPress Answers上询问WordPress问题。

— 开发者
source
15
我必须添加add_action（'wp_enqueue_scripts'，'add_my_script'）; 进行加载，但这仍然是最清晰的答案。
— Ele Munjeli 2013年
您在哪个文件中添加了它？@EleMunjeli
— Francisco Corrales Morales
10
谢谢Ele Munjeli给add_action的提示。另外：如果您正在处理子主题，请改用get_stylesheet_directory_uri。
— Screenack
谢啦。您保存了我的一天，您被
— 窃取
即使在这之后，我仍然收到Uncaught TypeError: Cannot read property 'fn' of undefined和Uncaught TypeError: undefined is not a function错误，即使其他脚本中的函数文件被排队，并且工作正常
— 李
44

经过大量搜索，我终于找到了适用于最新WordPress的东西。以下是要遵循的步骤：

  1. 找到您主题的目录，并在目录中为您的自定义js（在此示例中为custom_js）创建一个文件夹。
  2. 将您的自定义jQuery放在此目录中的.js文件中（在此示例中为jquery_test.js）。

  3. 确保您的自定义jQuery .js如下所示：

    (function($) {
$(document).ready(function() {
$('.your-class').addClass('do-my-bidding');
})
})(jQuery);

  4. 转到主题目录，打开functions.php

  5. 在顶部附近添加一些代码，如下所示：

    //this goes in functions.php near the top
function my_scripts_method() {
// register your script location, dependencies and version
   wp_register_script('custom_script',
   get_template_directory_uri() . '/custom_js/jquery_test.js',
   array('jquery'),
   '1.0' );
 // enqueue the script
  wp_enqueue_script('custom_script');
  }
add_action('wp_enqueue_scripts', 'my_scripts_method');
  6. 检查您的网站以确保其正常工作！
— 斯坦
source
8
谢谢，这对我很有帮助！对于使用儿童主题的任何人，请使用get_stylesheet_directory_uri（）代替get_template_directory_uri（）
— David Taiaroa
感谢您的逐步说明，Stan！（以及有关将其与子主题一起使用的说明，@ DavidTaiaroa）
— marky
这工作得非常好，但是我只需要在特定页面上触发它即可。有没有办法修改它，使其仅在页面上触发？还是该行为需要完全不同的WP功能？
— HPWD
何时执行此操作，我可以使jquery进入我的页面，但是在控制台中也出现错误，似乎没有引起任何严重的问题：GETaustraliana.auspro.com.au/wp-content/themes/twentytwenty/assets/…net :: ERR_ABORTED 404（未找到）如何摆脱它？
— Rez.Net
8

如果您使用wordpress 子主题将脚本添加到主题，则应将get_template_directory_uri函数更改为get_stylesheet_directory_uri，例如：

父主题：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

儿童主题：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri：/您的站点/ wp-content / themes / 父主题

get_stylesheet_directory_uri：/您的站点/ wp-content / themes / child-theme

— DibaCode
source
6

您可以在主题的function.php文件中添加jQuery或javascript。代码如下：

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

有关更多详细信息，请访问本教程：http : //www.codecanal.com/add-simple-jquery-script-wordpress/

— Jitendra Damor
source
4

除了通过函数放置脚本之外，您还可以“仅”在任何模板的页眉，页脚中包括链接（即链接rel标签）。您只需要确保路径正确即可。我建议使用类似的东西（假设您位于主题目录中）。

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

良好的做法是在关闭正文标签之前或至少在页脚之前添加此内容。您还可以使用php include或其他几种方法来提取此文件。

<script type="javascript"><?php include('your-file.js');?></script>
— 乔什·沙万
source
这就是2019
— Phill Healey
同意，但这是五年前写的。入队当然不是最佳做法。
— josh.chavanne，
1
值得指出的是，由于这篇文章在Google上的显眼位置。我讨厌有人来这里并开始使用不良做法，因为他们偶然发现了一个古老的问答环节。
— Phill Healey
3

**＃方法1：**尝试将您的jquery代码放在单独的js文件中。

现在，将该脚本注册在functions.php文件中。

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

现在您完成了。

在函数中注册脚本有其好处，因为它在<head>页面加载时会出现在本节中，因此它始终是header.php的一部分。因此，您不必在每次编写新的html内容时都重复代码。

＃方法2：将脚本代码放在<script>标签内的页面主体内。然后，您不必在功能中注册它。

— 拉詹471
source
方法2玩火。
— John Hascall
3

这里有许多教程和答案，介绍如何添加要包含在页面中的脚本。但是我找不到的是如何构造该代码，以便它可以正常工作。这是因为在这种形式的JQuery中未使用$。

这是我的代码，您可以将其用作模板。

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});
— 抢
source
3

从这里回答：https : //premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

尽管WordPress已经存在了一段时间，并且将脚本添加到主题和插件的方法已经存在多年了，但是对于应该如何添加脚本仍然存在一些困惑。因此，让我们清除它。

由于jQuery仍然是最常用的Javascript框架，因此让我们看一下如何向主题或插件添加简单的脚本。

jQuery的兼容模式

在开始将脚本附加到WordPress之前，让我们看一下jQuery的兼容模式。WordPress预包装了jQuery副本，您应该在代码中使用它。加载WordPress的jQuery时，它使用兼容模式，这是一种避免与其他语言库冲突的机制。

归结为，您不能像在其他项目中那样直接使用美元符号。在为WordPress编写jQuery时，您需要改用jQuery。查看下面的代码，了解我的意思：

— 艾哈迈德·埃尔切克（Ahmed Elcheikh）
source
2

我看到的解决方案是从向主题添加javascript功能的角度出发的。但是，OP特别询问“如何为单个 WordPress页面添加它？” 听起来好像是我在Wordpress博客中使用javascript的方式，其中各个帖子可能具有不同的javascript驱动的“小部件”。例如，帖子可以让用户更改变量（滑块，复选框，文本输入字段），并绘制或列出结果。

从JavaScript角度出发：

  1. 在单独的“ .js”文件中编写JavaScript函数

甚至不要考虑在帖子的html中包含重要的JavaScript，请在​​代码中创建一个或多个JavaScript文件。

  1. 将JavaScript与帖子的html接口

如果您的JavaScript小部件与html控件和字段进行交互，则需要了解如何从JavaScript查询和设置这些元素，以及如何让UI元素调用您的JavaScript函数。这里有几个例子。首先，从JavaScript：

var val = document.getElementById(“AM_Freq_A_3”).value;

并从html：

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
  1. 使用jQuery调用JavaScript小部件的初始化函数

使用在页面准备就绪时可以配置和绘制JavaScript小部件的函数名称，将其添加到.js文件中：

jQuery(document).ready(function( $ ) {
    your_init_function();
});
  1. 在您的帖子的html代码中，加载您的帖子所需的脚本

在Wordpress代码编辑器中，我通常在文章末尾指定脚本。例如，我的主目录中有一个scripts文件夹。在内部，我有一个公用目录，其中包含我的一些帖子可以共享的通用JavaScript —在这种情况下，我自己的一些数学实用函数和flotr2绘图库。我发现将特定于岗位的JavaScript分组在另一个目录中更为方便，例如，使用基于日期的子目录而不是使用媒体管理器。

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
  1. 排队jQuery

Wordpress注册了jQuery，但是除非您通过排队告诉Wordpress您需要它，否则它不可用。如果您不这样做，则jQuery命令将失败。许多资料告诉您如何将此命令添加到您的functions.php中，但是假设您知道其他一些重要细节。

首先，编辑主题不是一个好主意-主题的任何将来更新都会抹去您的更改。制作儿童主题。这是如何做：

https://developer.wordpress.org/themes/advanced-topics/child-themes/

子级的functions.php文件不会覆盖具有相同名称的父主题的文件，而是添加到其中。子主题教程建议了如何使父子样式style.css文件入队。我们可以简单地向该函数添加另一行来加入jQuery。这是我关于子主题的整个functions.php文件：

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}
— 奈杰尔·雷德蒙（Nigel Redmon）
source
另一种选择是使用javascript管理器插件。对于某些人来说，这可能是一个好方法，但是我更愿意不依赖于许多插件和更新。
— 奈杰尔·雷德蒙
1

您可以使用WordPress预定义功能将脚本文件添加到WordPress插件。

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

看一下有助于您了解可以在WordPress插件中轻松实现jQuery和CSS 的帖子。

— 用户名
source
1

除了通过函数放置脚本之外，您还可以“仅”在任何模板的页眉，页脚中包括链接（即链接rel标签）。

不能。您永远不应仅在WordPress中添加到此类外部脚本的链接。通过functions.php文件对它们进行排队可确保以正确的顺序加载脚本。

无法正确入队可能会导致脚本无法正常运行，尽管脚本编写正确。

— 肯尼斯·奥德尔
source
1

您可以将脚本编写到另一个文件中image-ticker.js。假设您的脚本名称为，就可以像这样使文件排队。

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true );

在/js/image-ticker.js您应该放置js文件路径的位置。

— Upendra tiwari
source
1

在WordPress中，将脚本包含在网站中的正确方法是使用以下功能。

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

这些函数在hook内被调用wp_enqueue_script。

有关更多详细信息和示例，您可以选中使用wp_register_script和wp_enqueue_script在Wordpress中添加JS文件。

例：

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );
— 阿曼达达
source
1

“我们有Google”。为了在wordpress中正确使用脚本，只需添加托管库。像谷歌

在选定库之后，需要在自定义脚本之前将其链接：exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

在你自己的脚本之后

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>
— 弗拉德
source
0

您只需要加载jquery吗？

1）像其他指南所说的那样，将脚本注册到您的functions.php文件中，如下所示：

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2）注意，我们不需要注册jQuery，因为它已经在核心中。确保在footer.php中调用了wp_footer（），并在header.php中调用了wp_head（）（这是输出脚本标记的位置），并且jQuery将在每个页面上加载。当您将jQuery与WordPress排入队列时，它将处于“无冲突”模式，因此您必须使用jQuery而不是$。您可以根据需要注销jQuery，然后通过wp_deregister_script（'jquery'）重新注册自己的jQuery。

— 埃利·科尔
source
不，我知道了这一部分。加载jQuery很容易。我需要知道的是将我的jquery代码添加到哪个文件，以及如何添加。
— 公民2012年
把wp_enqueue_script（'脚本名称'）; 您希望该脚本进入模板的get_header（）之前。
— 伊莱·科尔
0 
function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
— 迪帕克·萨
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.