用于替换脚本的子主题的wp_dequeue_script

Question

我有一个子主题,我能够添加我想用来替换一些主题功能的脚本,并替换一些按钮.

但我无法移除旧按钮,因此它们都显示在彼此之上.如何删除父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' ); 

Answer 1

这里有一些问题可以开始

• 您应该使用get_stylesheet_directory_uri()子主题和get_template_directory_uri()父主题而不是get_bloginfo()函数.后者较慢并使用前两个函数

• 脚本和样式应注销与和已出列从队列中完全删除它们

• 优先权很重要.您需要稍后挂钩您的函数以确保在注销它们之前注册了样式和脚本,否则它将无法工作.

解:

将父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
}

Answer 2

使用父主题测试Twenty Fourteen在其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

Answer 3

您需要找出父主题在何处生成按钮。

如果它们是由javascript生成的，则可以使正在创建按钮的脚本出队。请小心，因为该文件中的所有其他JavaScript也将被删除。如果这是一个问题，最好的解决方法是将js脚本复制到您的主题文件夹中，删除不需要的部分，使原始队列出队，然后将更改后的脚本入队。

这该怎么做。

要使脚本出队，您需要知道其句柄。 这是有关如何获取脚本句柄的出色教程，非常方便。总结一下，以防链接失效：

添加到您的functions.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的列表。如果您在找出问题所在时遇到困难，则可以始终使用dom检查器，例如在Chrome或firefox上。在Chrome浏览器上-右键单击-检查元素-资源-框架-您的网站网址-脚本。

这将为您提供所有脚本及其位置的列表。

确定了所需脚本后，将其复制到主题中，然后删除添加按钮的部分。

然后使用前面找到的句柄使不需要的脚本出队，并让新的脚本入队。

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的文件，然后将其复制到子主题中，并删除有问题的行。

Answer 4

在典型的 WordPress 流程中，插件在主题之前加载，对于子主题，子主题在父主题之前加载，具体来说，functions.php子主题的文件包含在父主题的functions.php之前。因此，wp_enqueue_scripts操作会被堆叠起来，然后按该顺序执行，除非操作的优先级定义与默认值 ( 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' );
}

例如，要替换脚本，您想要进行一些更改并保留现有的依赖项和本地化，有两种方法。

使用wp_enqueue_script相同的handle名称，因为如果您尝试注册或排队已经注册的句柄，新参数将被忽略，如果脚本稍后由父级本地化以保留本地化数据，则这很有用。

// 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';
}

首先加载子主题这一事实非常实用，因为子主题的使用不是为了替代，而是作为主主题的补充。