Como carregar Widget javascript + css somente se usado?

12

Gostaria de manter os estilos javascript e css usados pelo meu widget dentro de seus próprios arquivos (e não adicioná-los ao tema).

Mas parece que não consigo adicionar o wordpress quando o widget é realmente usado em uma barra lateral.

Eu tentei isso:

dentro da declaração de classe, adicionei 2 funções

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

}

e dentro da função widget ():

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

Mas isso não faz nada ...

    
por pixeline 03.10.2011 / 15:54

2 respostas

6

wp_print_scripts e wp_print_styles ganchos são disparados muito antes da função do widget, então é assim que não está funcionando.

Uma solução para isso seria incluir os scripts no rodapé usando wp_print_footer_scripts hook, dê uma olhada em resposta de Jan para uma pergunta semelhante

Ou uma solução muito mais agradável, dê uma olhada em A resposta de Sorich para outra pergunta semelhante

    
por Bainternet 03.10.2011 / 16:27
4

A melhor solução é registrar seus ativos primeiro e, em seguida, enfileirar o CSS e o JS dentro da função widget() de seu WP_Widget (enfileirar diretamente, não adicionando novos ganchos).

Eu testei essa solução e ela funciona na versão atual do WordPress (4.5.3) - tanto o JS quanto o CSS são adicionados no rodapé da página.

<?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 ) {
    }
}
    
por Philipp 04.08.2016 / 13:55