如何仅在使用时加载Widget javascrip+css文件?

时间:2011-10-03 作者:pixeline

我希望将我的小部件使用的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\' );
}
但那没什么用。。。

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

wp_print_scriptswp_print_styles 钩子是在小部件功能之前激发的,所以这就是它不工作的方式。

解决方案是使用wp_print_footer_scripts 胡克,看看Jan\'s answer to a similar question

或者一个更好的解决方案看看Sorich\'s answer to another similar question

SO网友:Philipp

最好的解决方案是先注册资产,然后将CSS和JS放入widget() WP\\u小部件的功能(直接排队,而不是通过添加新挂钩)。

我已经测试过这个解决方案,它在当前的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 ) {
    }
}

结束

相关推荐

Why use widgets?

我对使用WordPress很陌生,我想知道使用小部件的好处是什么?看here 这听起来像是为那些不是程序员的人准备的,他们想在他们的网站上添加插件。对吗?或者小部件是否在某种程度上使站点更加健壮?