wp_dequeue_script 用于子主题替换脚本

Posted 2023-02-24

【中文标题】wp_dequeue_script 用于子主题替换脚本

【英文标题】：wp_dequeue_script for child theme to replace script

【发布时间】：2014-06-23 19:17:01

【问题描述】：

我有一个子主题，我可以添加我想用来替换一些主题功能和一些按钮的脚本。

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

【参考方案1】：

我想补充一点，我们在添加替换脚本时需要使用get_stylesheet_directory_uri()，因为get_template_directory_uri()返回的是父主题目录。

查看 WordPress 文档here

【参考方案2】：

这里有几个问题

您应该将get_stylesheet_directory_uri() 用于子主题，将get_template_directory_uri() 用于父主题，而不是get_bloginfo() 函数。后者速度较慢，使用前两个函数

脚本和样式应该被注销AND并出列以将它们完全从队列中删除

优先级很重要。您需要稍后挂钩您的函数，以确保在取消注册之前已注册样式和脚本，否则将无法正常工作。

解决方案：

将父 js 文件复制到您的子主题并打开它并进行必要的更改。保存文件

现在您需要出列 AND 取消注册父 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

【讨论】：

感谢您提供更多信息。不过，使用 PHP_INT_MAX 似乎很 OTT？

可能是的，但我喜欢在子主题中使用它，以确保我的函数最后被钩住。这纯粹是你自己的喜好

实现此功能的关键是确保匹配父母主题中add_action 之后使用的内容。有时使用wp_enqueue_scripts，有时使用wp_footer，具体取决于文件和主题。

@fidev 使用wp_footer() 添加脚本（这也适用于wp_head()）是糟糕的编码。您应该始终使用wp_enqueue_scripts。 wp_enqueue_script() 确实可以选择在页脚中添加脚本

@PieterGoosen 非常正确，但并非所有主题都符合这一点 - 这就是为什么您必须检查您的父母主题中使用的内容并相应地匹配以出列/正确注销。仅仅因为父主题文件编码不佳而对父主题文件进行不必要的编辑将破坏拥有子主题的目标。

【参考方案3】：

在典型的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';

---

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

【参考方案4】：

使用 父主题进行测试 24 在其 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

【讨论】：

请注意，“较低”优先级意味着该操作需要稍后触发，因此 add_action 的优先级参数需要更大，令人困惑对吧？较低的优先级参数意味着它更早触发，更高的意味着它更晚触发

【参考方案5】：

您需要弄清楚父主题在哪里生成按钮。

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

怎么做。

要使脚本出列，您需要知道它的句柄。 Here's 一个关于如何获取脚本句柄的精彩教程，非常方便。总结一下，万一链接失效：

添加到您的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 的文件，将其复制到子主题中，然后删除违规行。