javascript wp_dequeue_script 子主题替换脚本

wp_dequeue_script for child theme to replace script

提问by farmerm3

I have a child theme and I am able to add the script I want to use to replace some theme functions and replace the some of the buttons.

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

But I cannot remove the old button so they are both showing up on top of each other. How can I remove the parent js script?

但是我无法删除旧按钮，因此它们都显示在彼此之上。如何删除父js脚本？

here is my function.phpfor the child theme

这是我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' ); 

回答by Pieter Goosen

A few issues here to begin with

这里有几个问题开始

• You should be using get_stylesheet_directory_uri()for child themes and get_template_directory_uri()for parent themes instead of the get_bloginfo()functions. Latter is slower and uses the first two functions

• Scripts and styles should be deregistered ANDand dequeued to remove them completely from queue

• Priority is important. You need to hook your function later to make sure that the styles and scripts are registered before you deregister them, otherwise it won't work.

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

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

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

Solution:

解决方案：

Copy the parent js file to your child theme and open it up and make the necessary changed. Save the file

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

Now you need to dequeue ANDderegister the parent js file and then enqueue you new child theme js file

现在您需要出列和取消注册父 js 文件，然后将新的子主题 js 文件入队

Example

例子

/*
 * 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
}

回答by brasofilo

Testing with the parent themeTwenty Fourteen that has this in its functions.phpfile:

使用在其文件中包含此内容的父主题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' );

The action wp_enqueue_scriptsdoes not have a declared priority, so it's using the default 10. To make the dequeue work we have to add a lower priority in our child themefunctions.phpfile:

该操作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

回答by Talk nerdy to me

You need to figure out where the parent theme is generating the buttons.

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

If they are being generated by javascript, you can dequeue the script that is creating the buttons. Just be careful, as any other javascript in that file will be removed as well. If this is an issue, the best way to go about it is to copy the js script to your theme folder, remove the part you don't want, dequeue the original, and enqueue your altered script.

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

How to do this.

这个怎么做。

To dequeue a script you need to know it's handle. Here'sa fantastic tutorial on how to get the handles of scripts, very handy. To sum up in case the link goes dead:

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

Added to your functions.php file

添加到您的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' );

This will print a list of all the js and css being loaded to your page at the top. If your'e having trouble working out what's what, you can always use a dom inspector, such as on Chrome or firefox. On chrome- right click - inspect element - Resources- Frames- Your site url - scripts.

这将在顶部打印所有加载到页面的 js 和 css 的列表。如果您无法确定什么是什么，您可以随时使用 dom 检查器，例如在 Chrome 或 firefox 上。在 chrome 上-右键单击-检查元素-资源-框架-您的站点 url-脚本。

This will give you a list of all the scripts and their locations.

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

Once you've figured out which script you need, copy it to your theme and remove the part that's adding the buttons.

一旦你确定了你需要的脚本，将它复制到你的主题并删除添加按钮的部分。

Then dequeue the unwanted script using the handle we found earlier, and enqueue your new one.

然后使用我们之前找到的句柄将不需要的脚本出列，并将您的新脚本入列。

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

If the buttons are being generated by php, you'll need to find the file that's generating the html in your parent theme, copy it to your child theme, and removing the offending lines.

如果按钮是由 php 生成的，您需要在父主题中找到生成 html 的文件，将其复制到子主题，并删除违规行。

回答by Danijel

In a typical wordpress flow, plugins are loaded before the theme, and in case of child theme, child theme is loaded before the parent theme, specifically, functions.phpfile of a child theme is included before the functions.php of a parent. So, wp_enqueue_scriptsactions are stacked, and later execution in the that order, unless the priority of actions is defined diferently that default value ( 10 ). The problem here is that you are trying to dequeue script that has not yet been enqueued.

在典型的wordpress流程中，插件在主题之前加载，如果是子主题，则子主题在父主题之前加载，具体来说，functions.php子主题的文件包含在父主题的functions.php之前。因此，wp_enqueue_scripts操作是堆叠的，然后按该顺序执行，除非操作的优先级以不同的方式定义为默认值 (10)。这里的问题是您正在尝试使尚未入队的脚本出队。

---

---

To remove the script added by parent, raise the priority of wp_enqueue_scriptsaction of child theme to value higher than value defined in parent theme action.

要移除父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' );
}

---

---

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

Use wp_enqueue_scriptwith the same handlename, due the fact that if you try to register or enqueue an already registered handle, the new parameters will be ignored, useful if the script is later localized by parent to keep the localized data.

使用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' );
}

Use global $wp_scriptsobject to modify only required properties, for example, change only srcproperty of already enqueued or registered script.

使用全局$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';
}

---

---

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

回答by david_nash

I want to add that we need to use get_stylesheet_directory_uri()when adding the replacement script because get_template_directory_uri()returns the parent theme directory.

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

See the WordPress docs here

在此处查看 WordPress 文档