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

您的 $scr中的wp_register_script() 函数是错误的.假设您的functions.php位于插件内部,而removeArrows.js位于插件的根目录中,则wp_register_script()应该看起来像这样

 plugins_url( '/removeArrows.js' , __FILE__ )
 

另外要注意的一点是,最后加载脚本和样式始终是一个好习惯.这将确保它不会被其他脚本和样式覆盖.为此,只需在$priority)中添加一个非常低的优先级(非常高的数字) rel="noreferrer"> add_action .

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

并且始终通过 wp_enqueue_scripts 操作挂钩,因为这是要使用的合适的挂钩. 请勿直接将脚本和样式加载到wp_head或wp_footer

编辑

对于主题,您已经指出现在将所有内容移至主题,因此wp_register_script()将更改为此主题

  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 ); 
 

Your $scr in your wp_register_script() function is wrong. Given that your functions.php is inside your plugin, and your removeArrows.js is in the root of your plugin, your $scr should look like this

plugins_url( '/removeArrows.js' , __FILE__ )

Another point of note, it is always good practice to load your scripts and styles last. This will ensure that it will not get overriden by other scripts and styles. To do this, just add a very low priority (very high number) to your priority parameter ($priority) of add_action.

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

And always load/enqueue scripts and styles via the wp_enqueue_scripts action hook, as this is the proper hook to use. Do not load scripts and styles directly to wp_head or wp_footer

EDIT

For themes, as you've indicated that you now moved everything to your theme, your $scr would change to this

 get_template_directory_uri() . '/removeArrows.js'

for parent themes and this

get_stylesheet_directory_uri() . '/removeArrows.js'

for child themes. Your complete code should look like this

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代码段中有问题,否则它应该可以工作.

I would not add another external js file, its just an extra and unnecessary resource to fetch and that is something we want to cut down on in terms of page loading times.

I would add this jQuery snippet in your websites head using the wp_head hook. You would paste the following in your theme or plugins functions file. I have also made sure jQuery is in no-conflict mode as you can see below.

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

Once you have done this and refreshed your page, check the page source to make sure this jQuery snippet is in fact being loaded into your page. If it is then it should work unless their is something off in the actual jQuery snippet you are using.

因为答案已经被接受,所以我只想说有另一种方法可以将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' );
 

As the answer is accepted already so, I just want to say there's another way to enqueue javascript code in footer which I have done many times.

in functions.php file:

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' );

you can load this script to particular page template only by using condition

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;

if the page-template.php is in directory ( say templates directory in your theme's root dir ) you can write like:

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

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

以一种简单的方式陈述它:

• Javascript基于ECMAScript
• JQuery是Javascript库

所以实际上您会问两个不同的问题:

• 您的标题是有关实现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

祝您编程愉快！

To answer the question we must first make a distinction between javascript and JQuery.

To state it in a simple fashion:

• Javascript is based on ECMAScript
• JQuery is a library for Javascript

So in reality you ask two different questions:

• Your title speaks about a solution for implementing javascript
• Your question speaks about a solution for implementing JQuery

Because the Google results show your title and all the content of the page talks about JQuery this can become very frustrating to people that search for a javascript solution.

And now for the JQuery solution:

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

And the javascript solution:

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

This code can be added to your functions.php The location of the scripts in both cases is wp-content/themes/theme-name/js/script.js

Happy coding!