如何在WordPress子主题中添加自定义JS文件

时间:2019-02-20 作者:Mahadi Hasan Juber

我只想在WordPress子主题中的父脚本JS下面添加一个自定义JS文件,而不使用wp_dequeue_script()wp_deregister_script().

我只想使用最新的功能get_theme_file_uri().

子主题functions.php 代码为:

<?php
/**
 * Child Theme Functions
 *
 * @package Anyname
 * @subpackage Anyname Child
 * @since 1.0.0 
 */

if( ! function_exists( \'anyname_child_theme_setup\' ) ) :

    // Child Theme Setup 
    function anyname_child_theme_setup() {

        load_child_theme_textdomain( \'anyname-child\', get_theme_file_path( \'/languages\' ) );

    }
endif;
add_action( \'after_setup_theme\', \'anyname_child_theme_setup\' );

if( ! function_exists( \'anyname_child_enqueue_scripts\' ) ) :

    // Child Enqueue Scripts
    function anyname_child_enqueue_scripts() {

        $anyname_parent_theme_style = \'parent-anyname-style\';
        $anyname_parent_theme_script = \'parent-anyname-script\'; 

        wp_enqueue_style( $anyname_parent_theme_script, get_parent_theme_file_uri( \'/style.css\' ) );

        wp_enqueue_style( \'anyname-child-style\',
            get_theme_file_uri( \'/style.css\' ),
            array( $anyname_parent_theme_style ),
            wp_get_theme()->get(\'Version\')
        );

        // wp_enqueue_script( $anyname_parent_theme_script, get_parent_theme_file_uri( \'/anyname.js\' ) );

        // wp_enqueue_script( \'anyname-child-script\',
        //     get_theme_file_uri( \'/js/script.js\' ),
        //     array( $anyname_parent_theme_script ),
        //     wp_get_theme()->get(\'Version\')
        // );

         wp_enqueue_script( \'anyname-child-script\',
            get_theme_file_uri( \'/js/child-script.js\' ),
            array(), filemtime( get_theme_file_path( \'/js/child-script.js\' ) ), true );

    }

endif;
add_action( \'wp_enqueue_scripts\', \'anyname_child_enqueue_scripts\' );

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

如果希望在特定脚本之后加载脚本,则需要将其设置为依赖项。您可以使用的第3个参数设置脚本的依赖关系wp_enqueue_script().

在您的情况下,似乎要排队anyname-child-script 之后parent-anyname-script. 为此,需要将子主题脚本按如下方式排队:

wp_enqueue_script( 
    \'anyname-child-script\',
    get_theme_file_uri( \'/js/child-script.js\' ),
    array( \'parent-anyname-script\' ), // The line that has changed.
    filemtime( get_theme_file_path( \'/js/child-script.js\' ) ),
    true
);
您会注意到,要正确执行此操作,您需要知道父主题脚本使用的句柄。

如果您不知道名称,则可以在挂接到时使用更大的数字作为优先级,使脚本稍后加载wp_enqueue_scripts:

add_action( \'wp_enqueue_scripts\', \'anyname_child_enqueue_scripts\', 50 );
The50 这意味着您的脚本将在任何以低于以下数目的数目排队的脚本之后排队50 (默认值为10).

尽管如此,这并不是一种非常可靠的方法,因为依赖关系之类的事情可能会导致脚本加载的时间晚于其优先级。确保您的脚本在另一个脚本之后加载的唯一可靠方法是使其成为依赖项。

相关推荐

WooThemes-供应商/预订-允许供应商管理资源

我正在尝试从WooThemes为bookings插件带来新功能。在组合预订和供应商插件时,不允许供应商用户管理资源(资源是自定义帖子)。我将新功能添加到资源自定义帖子中,然后将这些功能添加到供应商角色(通过用户角色插件)现在,资源显示在供应商角色的管理菜单中,但当我尝试添加新资源时,会出现“您无权访问此页面”错误。我添加的新功能:https://i.stack.imgur.com/OCDlV.png添加到角色的功能:https://i.stack.imgur.com/5t696.png使用角色登录时显示的