programing

스크립트를 대체하는 하위 테마용 wp_dequeue_script

codeshow 2023. 3. 13. 20:40
반응형

스크립트를 대체하는 하위 테마용 wp_dequeue_script

하위 테마가 있으며 일부 테마 기능을 교체하고 일부 버튼을 교체하는 데 사용할 스크립트를 추가할 수 있습니다.

하지만 오래된 버튼은 제거할 수 없기 때문에 둘 다 겹쳐져 있습니다.부모 js 스크립트를 삭제하려면 어떻게 해야 합니까?

여기 내 것이 있다function.php어린이 테마용

function replace_scroll(){
    // Remove the Default JavaScript    
    wp_dequeue_script( 'dp-js' );

    // Add your own script  
    $js_url = get_bloginfo('stylesheet_directory') . '/js';
    wp_enqueue_script('dp',"$js_url/dp1.scripts.js"); 
} 
add_action( 'wp_enqueue_scripts', 'replace_scroll' ); 

우선 여기서 몇 가지 문제가 있습니다.

  • 사용하셔야 합니다.get_stylesheet_directory_uri()아이 테마 및get_template_directory_uri()부모 테마에 대해get_bloginfo()기능들.후자는 속도가 느리고 처음 두 가지 기능을 사용합니다.

  • 스크립트와 스타일은 AND 등록을 해제하고 큐에서 완전히 삭제해야 합니다.

  • 우선순위는 중요합니다.나중에 기능을 후크하여 스타일과 스크립트가 등록되어 있는지 확인해야 합니다.그렇지 않으면 기능하지 않습니다.

솔루션:

부모 js 파일을 자녀 테마에 복사하여 열고 필요에 따라 변경합니다.파일 저장

이제 부모 js 파일의 큐잉을 해제하고 등록을 해제한 다음 새 자식 테마 js 파일을 큐잉해야 합니다.

/*
 * Use any number above 10 for priority as the default is 10 
 * any number after 10 will load after
 */
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
    wp_dequeue_script( 'parent-script-handle' );
    wp_deregister_script( 'parent-script-handle' );
    // Now the parent script is completely removed

    /*
     * Now enqueue you child js file, no need to register if you are not 
     * doing conditional loading
     */
    wp_enqueue_script( 'child-script-handle', get_stylesheet_directory_uri() . '/child-script.js' );
    //Now we have done it correctly
}

이것을 포함한 부모 테마인 '스물네 살'을 사용한 테스트functions.php파일:

function twentyfourteen_scripts() {
    // other enqueues
    wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131209', true );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );

액션wp_enqueue_scripts선언된 우선순위가 없기 때문에 기본값이 사용됩니다.10디큐를 작동시키려면 아이 테마에 낮은 우선순위를 추가해야 합니다. functions.php파일:

function remove_twentyfourteen_scripts()
{
    wp_dequeue_script( 'twentyfourteen-script' );
}
add_action( 'wp_enqueue_scripts', 'remove_twentyfourteen_scripts', 11 ); // <-- HERE

부모 테마가 버튼을 생성하는 위치를 파악해야 합니다.

javascript에 의해 생성된 경우 버튼을 만들고 있는 스크립트를 큐에서 해제할 수 있습니다.그 파일 내의 다른 자바스크립트도 모두 삭제되므로 주의하시기 바랍니다.이것이 문제라면, 가장 좋은 방법은 js 스크립트를 테마 폴더에 복사하고, 원하지 않는 부분을 제거하고, 원본의 큐를 제거하고, 변경된 스크립트를 큐잉하는 것입니다.

이거 어떻게 하는 거야.

스크립트를 큐에서 해제하려면 스크립트의 처리 방법을 알아야 합니다.여기 스크립트 처리 방법에 대한 훌륭한 튜토리얼이 있습니다.링크가 데드 상태가 되었을 경우의 개요를 다음에 나타냅니다.

기능에 추가되었습니다.php 파일

function wpcustom_inspect_scripts_and_styles() {
    global $wp_scripts;
    global $wp_styles;

    // Runs through the queue scripts
    foreach( $wp_scripts->queue as $handle ) :
        $scripts_list .= $handle . ' | ';
    endforeach;

    // Runs through the queue styles
    foreach( $wp_styles->queue as $handle ) :
        $styles_list .= $handle . ' | ';
    endforeach;

    printf('Scripts: %1$s  Styles: %2$s', 
    $scripts_list, 
    $styles_list);
}

add_action( 'wp_print_scripts', 'wpcustom_inspect_scripts_and_styles' );

그러면 상단에 있는 페이지에 로드되는 모든 js 및 css 목록이 인쇄됩니다.무엇이 문제인지 알아내는 데 어려움이 있다면 Chrome이나 Firefox와 같은 돔 인스펙터를 언제든지 사용할 수 있습니다.크롬 오른쪽 버튼으로 - 검사 요소 - 리소스 - 프레임 - 사이트 URL - 스크립트를 클릭합니다.

그러면 모든 스크립트와 스크립트의 위치 목록이 나타납니다.

필요한 스크립트를 파악한 후 테마에 복사하여 버튼을 추가하고 있는 부분을 제거합니다.

그런 다음 앞에서 찾은 핸들을 사용하여 불필요한 스크립트를 큐잉 해제하고 새로운 스크립트를 큐잉합니다.

function wpcustom_deregister_scripts_and_styles(){

    wp_deregister_script('my-script-handle');
    wp_enqueue_script( 'my-new-script', get_template_directory_uri() . '/js/my-new-script.js', array(), '1.0', true );
}

add_action( 'wp_print_styles', 'wpcustom_deregister_scripts_and_styles', 100 );

버튼이 php에 의해 생성되는 경우 부모 테마에서 html을 생성하고 있는 파일을 찾아 자녀 테마에 복사하고 문제 행을 제거해야 합니다.

되며, 테마의 테마보다 테마가 으로는 자녀 테마가 로드됩니다.functions.phpphp so so so so 、렇게 wp_enqueue_scripts액션의 priority가 기본값(10)에 따라 다르게 정의되지 않는 한 액션은 스택되고 나중에 그 순서로 실행됩니다.여기서 문제는 큐잉되지 않은 스크립트를 큐잉 해제하려고 한다는 것입니다.


하려면 , .wp_enqueue_scripts상위 테마 작업에 정의된 값보다 높은 값으로 하위 테마 작업을 수행합니다.

// get_template_directory_uri(), if used in child theme, the parent theme directory URI will be returned, 
// use get_stylesheet_directory_uri() to get the child's theme directory uri

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts', 11 );
function child_theme_enqueue_scripts() 
{
    wp_dequeue_script( 'parent-theme-script' );
    wp_enqueue_script( 'child-theme-script', get_stylesheet_directory_uri() . '/js/script.js' );
}


To replace the script, for example, you want to make some changes and leave the existing dependencies and localization there are two ways.

wp_enqueue_scripthandle 또는 .name을 할 경우 합니다. 이미 등록된 핸들을 등록하거나 큐잉하려고 하면 새로운 파라미터가 무시되기 때문에 스크립트가 나중에 부모에 의해 현지화된 데이터를 유지할 때 유용합니다.

// default priority 10

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts' );
function child_theme_enqueue_scripts() 
{
    wp_enqueue_script( 'parent-theme-script', get_stylesheet_directory_uri() . '/js/script.js' );
}

사용$wp_scripts를 들어, 변경은 과 같습니다.src이미 큐에 넣었거나 등록된 스크립트의 속성.

// priority 11

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts', 11 );
function child_theme_enqueue_scripts() 
{
    global $wp_scripts; 
    $wp_scripts->registered[ 'parent-theme-script' ]->src = get_stylesheet_directory_uri() . '/js/script.js';
}


The fact that child theme is loaded first is quite practical since the use of child theme is not to replace, but more as addition to the main theme.

것은, 이 은 꼭 한다는 입니다.get_stylesheet_directory_uri()때, 치환 스크립트를 추가할 때get_template_directory_uri()부모 테마 디렉토리를 반환합니다.

WordPress 문서를 보려면 여기를 클릭하십시오.

언급URL : https://stackoverflow.com/questions/23507179/wp-dequeue-script-for-child-theme-to-replace-script

반응형