有条件地将脚本的依赖项出队

时间：2018-03-06 作者：Mayeenul Islam

请注意，我不是说有条件地排队/出列脚本，我是指从前端现有的排队脚本中有条件地出列某些依赖项。请注意，这个问题不是特定于插件的。我想了解一下一般规则。

我使用Elementor（页面生成器）作为前端。但并不是我所有的页面都使用它。因此Elementor中启用的默认灯箱功能在这些页面中不起作用。这就是我添加的原因my own lightbox 在整个站点中，使用正则表达式$pattern ="/<a(.*?)href=(\'|\\")(.*?).(bmp|gif|jpeg|jpg|png)(\'|\\")(.*?)>/i"; 连接到the_content 滤器事情进展顺利，但是-

当Elementor gallery或lightbox被触发时，两个脚本都会出错。正在调用两个灯箱，有时库灯箱冲突且不工作等。

解决方案1：

我知道我可以有条件地过滤the_content 使用类似regex的：

if( ! is_singular(\'cpt\') ) {
    return $content = preg_replace($pattern, $replacement, $content);
}
但我实际上想在任何地方都保留此功能。只是想把elementor灯箱移到我想让他们去的地方。因此，我正在尝试解决方案#2。

解决方案2：

Elementor所做的是类似于：

wp_enqueue_script(\'elementor-frontend\', \'link/to/frontend.js\', array(\'elementor-dialog\', \'elementor-waypoints\', \'jquery-swiper\'), \'1.9.7\', true);
现在我不想从Elementor加载lightbox功能，所以我尝试将\'elementor-dialog\':

if( is_singular(\'cpt\') ) {
    wp_dequeue_script( \'elementor-dialog\' );
}
但它不起作用，因为依赖项是在\'elementor-frontend\'. 所以我尝试注销对话框：

if( is_singular(\'cpt\') ) {
    wp_dequeue_script( \'elementor-dialog\' );
    wp_deregister_script( \'elementor-dialog\' );
}
这是毁灭性的，因为它让frontend.js.

如何更改的依赖关系frontend.js （手柄：\'elementor-frontend\') 这样我就可以将依赖项更改为array(\'elementor-waypoints\', \'jquery-swiper\')?

2 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

解决方案1：

这里我们将退出队列并取消注册elementor-dialog 和elementor-frontend, 然后我们将重新注册elementor-frontend 没有elementor-dialog 依赖关系：

// This needs to fire after priority 5 which is where Elementor
// handles enqueueing scripts. We\'re ok since the default is 10.
add_action( \'wp_enqueue_scripts\', \'wpse_elementor_frontend_scripts\' );
function wpse_elementor_frontend_scripts() {
    // Optionally add guard clauses such as checking if( ! is_singular(\'cpt\') )...

    // Bail if Elementor is not available.
    if ( ! defined( \'ELEMENTOR_VERSION\' ) ) {
        return;
    }

    // Dequeue and deregister elementor-dialog
    wp_dequeue_script( \'elementor-dialog\' );
    wp_deregister_script( \'elementor-dialog\' );

    // Dequeue and deregister elementor-frontend
    wp_dequeue_script( \'elementor-frontend\' );
    wp_deregister_script( \'elementor-frontend\' );

    // Re-register elementor-frontend without the elementor-dialog dependency.
    $suffix = ( defined( \'SCRIPT_DEBUG\' ) && SCRIPT_DEBUG ) ? \'\' : \'.min\';
    wp_register_script(
            \'elementor-frontend\',
            ELEMENTOR_ASSETS_URL . \'js/frontend\' . $suffix . \'.js\',
            [
                //\'elementor-dialog\', // <-- We removed this
                \'elementor-waypoints\',
                \'jquery-swiper\',
            ],
            ELEMENTOR_VERSION,
            true
        );

    // debugging... 
    //$scripts = wp_scripts();
    //exit ( print_r( $scripts ) );
}
溶液2：在此溶液中，我们将使用wp_scripts() 要修改$wp_scripts 全局，然后安全注销elementor-dialog.

我们将删除elementor-dialog 来自的依赖关系elementor-frontend 句柄，然后将elementor-dialog 脚本，该脚本由Elementor\\Frontend 班

/**
 * The Elementor\\Frontend class runs its register_scripts() method on
 * wp_enqueue_scripts at priority 5, so we want to hook in after this has taken place.
 */
add_action( \'wp_enqueue_scripts\', \'wpse_elementor_frontend_scripts_modifier\', 6 );
function wpse_elementor_frontend_scripts_modifier() {

    // Customize guard clauses to bail if we don\'t want to run this code.
    /*if ( ! is_singular( \'cpt\' ) ) {
        return;
    }*/

    // Get all scripts.
    $scripts = wp_scripts();

    // Bail if something went wrong.
    if ( ! ( $scripts instanceof WP_Scripts ) ) {
        return;
    }

    // Array of handles to remove.
    $handles_to_remove = [
        \'elementor-dialog\',
    ];

    // Flag indicating if we have removed the handles.
    $handles_updated = false;

    // Remove desired handles from the elementor-frontend script. 
    foreach ( $scripts->registered as $dependency_object_id => $dependency_object ) {

        if ( \'elementor-frontend\' === $dependency_object_id ) {

            // Bail if something went wrong.
            if ( ! ( $dependency_object instanceof _WP_Dependency ) ) {
                return;
            }

            // Bail if there are no dependencies for some reason.
            if ( empty( $dependency_object->deps ) ) {
                return;
            }

            // Do the handle removal.
            foreach ( $dependency_object->deps as $dep_key => $handle ) {
                if ( in_array( $handle, $handles_to_remove ) ) {
                    unset( $dependency_object->deps[ $dep_key ] );
                    $dependency_object->deps = array_values( $dependency_object->deps );  // "reindex" array
                    $handles_updated = true;
                }
            }
        }
    }

    // If we have updated the handles, dequeue the relevant dependencies which
    // were enqueued separately Elementor\\Frontend.
    if ( $handles_updated ) {
        wp_dequeue_script( \'elementor-dialog\' );
        wp_deregister_script( \'elementor-dialog\' );
    }
}
通过修改elementor-frontend 出列前elementor-dialog, 我们不会无意中退出队列elementor-frontend 当我们下队时elementor-dialog.

在测试此代码时，我检查了$wp_scripts 全球（通过wp_scripts()) 确保预期结果生效。E、 g。

$scripts = wp_scripts();
print_r( $scripts );

Relevant part of $scripts before modification:

...

[elementor-dialog] => _WP_Dependency Object
(
    [handle] => elementor-dialog
    [src] => http://example.com/wp-content/plugins/elementor/assets/lib/dialog/dialog.js
    [deps] => Array
            (
                    [0] => jquery-ui-position
            )

    [ver] => 4.1.0
    [args] => 
    [extra] => Array
            (
                    [group] => 1
            )

)

[elementor-frontend] => _WP_Dependency Object
(
    [handle] => elementor-frontend
    [src] => http://example.com/wp-content/plugins/elementor/assets/js/frontend.js
    [deps] => Array
            (
                    [0] => elementor-dialog
                    [1] => elementor-waypoints
                    [2] => jquery-swiper
            )

    [ver] => 1.9.7
    [args] => 
    [extra] => Array
            (
                    [group] => 1
            )

)

...

Relevant part of $scripts after modification:

（请注意elementor-dialog 节点现已删除。）

...
[elementor-frontend] => _WP_Dependency Object
(
    [handle] => elementor-frontend
    [src] => http://example.com/wp-content/plugins/elementor/assets/js/frontend.js
    [deps] => Array
            (
                    [0] => elementor-waypoints
                    [1] => jquery-swiper
            )

    [ver] => 1.9.7
    [args] => 
    [extra] => Array
            (
                    [group] => 1
            )

)
...

SO网友:Nic Bug

为什么不简单地使用elementor挂钩来取消设置资产？像这样：

function remove_elementor_swiper() {
    wp_dequeue_script( \'swiper\' );
    wp_deregister_script( \'swiper\' );
    
}
add_action( \'elementor/frontend/after_register_scripts\', \'remove_elementor_swiper\' );

结束
标签： wp-enqueue-script   wp-dependencies   小码农  

相关推荐