如何在functions.php中正确添加Javascript

我想删除一些在WooCommerce中购物车按钮上标准的难看的箭头。为此，我发现了添加以下代码的技巧，该代码应在文档加载后删除箭头。

我以为我要把它放在我的functions.php中？我到底要怎么做？

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

编辑

好的。我已经尝试过这种方法：

制作一个名为“ removeArrows.js”的文件，并将其放在我的插件文件夹中。它具有与原始代码相同的内容，但jQuery代替$。然后我将以下内容添加到functions.php中：

function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('removeArrows.js', FILE), array('jquery'),'1.1', true);
     wp_enqueue_script('my_amazing_script');
 } 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

我不知道如何使代码正确显示。这没有用。有什么建议可以使这项工作吗？

jQuery代码段源

您$scr的wp_register_script()职能不对。假设您的functions.php位于插件内部，而removeArrows.js位于插件的根目录中，$scr则应如下所示

plugins_url( '/removeArrows.js' , __FILE__ )

另外要注意的一点是，最后加载脚本和样式始终是一个好习惯。这将确保它不会被其他脚本和样式覆盖。为此，只需在优先级参数（$priority）中添加一个非常低的优先级（非常高的数字）add_action。

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

并始终通过wp_enqueue_scripts动作钩子加载/排队脚本和样式，因为这是要使用的正确钩子。不要将脚本和样式直接加载到wp_head或wp_footer

编辑

对于主题，正如您已经指出的那样，现在将所有内容移至主题，您$scr将更改为

 get_template_directory_uri() . '/removeArrows.js'

家长主题和这个

get_stylesheet_directory_uri() . '/removeArrows.js'

用于儿童主题。您的完整代码应如下所示

function wpb_adding_scripts() {
    wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
    wp_enqueue_script('my_amazing_script');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

我不会添加另一个外部js文件，它只是要获取的额外和不必要的资源，因此我们希望减少页面加载时间。

我会使用wp_head挂钩在您的网站标题中添加此jQuery代码段。您将以下内容粘贴到主题或插件功能文件中。我还确保了jQuery处于无冲突模式，如下所示。

add_action('wp_head','woocommerce_js');

function woocommerce_js()
{ // break out of php ?>

jQuery(document).ready(function($) {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
<?php } // break back into php

完成并刷新页面后，请检查页面源代码，以确保实际上已将此jQuery代码段加载到页面中。如果是，那么它应该可以工作，除非它们在您正在使用的实际jQuery代码段中有问题。

因为答案已经被接受，所以我只想说有另一种方法可以将javascript代码放入页脚中，这已经做了很多次了。

在functions.php文件中：

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );

您可以仅通过使用条件将此脚本加载到特定页面模板

if( is_page_template( 'page-template.php' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

如果page-template.php位于目录中（例如主题根目录中的templates目录），则可以这样写：

is_page_template( 'templates/page-template.php' );

要回答这个问题，我们必须首先区分javascript和JQuery。

以简单的方式陈述它：

• Javascript基于ECMAScript
• jQuery是Java库

因此，实际上您会问两个不同的问题：

• 您的标题是有关实现javascript的解决方案
• 您的问题涉及实现JQuery的解决方案

由于Google搜索结果显示了您的标题，并且页面上所有有关JQuery的内容都在讨论，因此这对于搜索javascript解决方案的人们可能会非常沮丧。

现在，对于JQuery解决方案：

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

和javascript解决方案：

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

可以将此代码添加到您的functions.php中，两种情况下脚本的位置均为 wp-content/themes/theme-name/js/script.js

编码愉快！