仅在使用时如何加载Widget javascript + CSS文件？

我想将我的小部件使用的javascript和CSS样式保留在自己的文件中（而不是将它们添加到主题中）。

但是当侧边栏上实际使用该小部件时，我似乎无法让wordpress添加它们。

我已经试过了：

在类声明中，我添加了2个函数

class EssentielleRubriquesPosts extends WP_Widget {

function addFrontendCss(){
    wp_enqueue_style('erw-frontend-css', ESSENTIELLE_RUBRIQUE_WIDGET_PLUGIN_PATH . 'css/EssentielleRubriqueWidget-frontend.css');
}
function addFrontendJavascript(){
    wp_register_script('jq-hoverintent', PLUGIN_PATH . 'js/jquery.hoverintent.js', array('jquery'), '1.0',true);
    wp_enqueue_script('jq-hoverintent');
    wp_enqueue_script('jq-tools', PLUGIN_PATH . 'js/jquery.tools.js', array('jquery'),'1.0',true);
    wp_enqueue_script('erw-frontend-js', PLUGIN_PATH . 'js/widget-frontend.js', array('jquery', 'jq-hoverintent', 'jq-tools'),'1.0',true);

}

在widget（）函数内部：

function widget($args, $instance) {
        add_action( 'wp_print_scripts', 'addFrontendJavascript' );
        add_action( 'wp_print_styles', 'addFrontendCss' );
}

但这无济于事...

wp_print_scripts并且wp_print_styles在您的小部件函数之前触发了钩子，因此这是行不通的。

一种解决方案是使用wp_print_footer_scripts钩子将脚本包含在页脚中，看看Jan对类似问题的回答

或者更好的解决方案，看看Sorich对另一个类似问题的回答

最好的解决方案是先注册您的资产，然后widget()在WP_Widget函数内将CSS和JS 排队（直接排队，而不是通过添加新的挂钩）。

我已经测试了此解决方案，并且确实可以在当前的WordPress版本（4.5.3）中使用-页脚中同时添加了JS和CSS。

<?php
// Register your assets during `wp_enqueue_scripts` hook.
function custom_register_scripts() {
    wp_register_style('erw-frontend-css', '...frontend.css');
    wp_register_script('jq-hoverintent', '...hoverintent.js', ...);
    wp_register_script('jq-tools', '...tools.js', ...);
}
// Use wp_enqueue_scripts hook
add_action('wp_enqueue_scripts', 'custom_register_scripts');


class YourWidget extends WP_Widget {
    public function __construct() {
    }

    public function widget( $args, $instance ) {
        // Enqueue needed assets inside the `widget` function.
        wp_enqueue_style('erw-frontend-css');
        wp_enqueue_script('jq-hoverintent');
        wp_enqueue_script('jq-tools');

        // Output widget contents.
    }

    public function form( $instance ) {
    }

    public function update( $new_instance, $old_instance ) {
    }
}