functions.php에 자바 스크립트를 올바르게 추가하는 방법

$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.

답변이 이미 받아 들여 졌기 때문에 여러 번 해왔 던 바닥 글에 자바 스크립트 코드를 넣는 또 다른 방법이 있다고 말하고 싶습니다.

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

질문에 답하려면 먼저 자바 스크립트와 JQuery를 구분해야합니다.

간단한 방식으로 설명 :

• Javascript는 ECMAScript를 기반으로합니다.
• JQuery는 자바 스크립트 용 라이브러리입니다.

실제로 두 가지 질문을합니다.

• 제목은 자바 스크립트 구현 솔루션에 대해 설명합니다.
• 귀하의 질문은 JQuery 구현 솔루션에 대해 설명합니다.

Google 검색 결과에 귀하의 제목과 페이지의 모든 콘텐츠가 JQuery에 대해 언급되기 때문에 자바 스크립트 솔루션을 검색하는 사람들에게 매우 실망 스러울 수 있습니다.

그리고 이제 JQuery 솔루션 :

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

자바 스크립트 솔루션 :

 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!