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

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_headwp_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 스 니펫에서 무언가가 아닌 한 작동하지 않아야합니다.

대답이 이미 받아 들였으므로 여러 번 수행 한 바닥 글에 자바 스크립트 코드를 대기열에 넣는 다른 방법이 있다고 말하고 싶습니다.

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가 디렉토리에 있다면 (테마의 루트 디렉토리에있는 템플릿 디렉토리) 다음과 같이 쓸 수 있습니다 :

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

질문에 대답하기 위해서는 먼저 자바 스크립트와 JQuery를 구분해야합니다.

간단한 방식으로 설명하려면 :

• 자바 스크립트는 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

행복한 코딩!