Comment charger les fichiers javascript + css du widget uniquement s'ils sont utilisés?

12

Je souhaite conserver les styles javascript et css utilisés par mon widget dans leurs propres fichiers (et non les ajouter au thème).

Mais je n'arrive pas à obtenir WordPress pour les ajouter lorsque le widget est réellement utilisé dans une barre latérale.

J'ai essayé ceci:

dans la déclaration de classe, j'ai ajouté 2 fonctions

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

}

et à l'intérieur de la fonction widget ():

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

Mais cela ne fait rien ...

    
posée pixeline 03.10.2011 - 15:54

2 réponses

6

wp_print_scripts et wp_print_styles les points d'ancrage sont utilisés avant que votre widget ne fonctionne, ce qui empêche son fonctionnement.

Une solution à ce problème consisterait à inclure les scripts dans le pied de page à l'aide de wp_print_footer_scripts hook. Consultez Réponse de Jan à une question similaire

Ou une solution beaucoup plus intéressante, consultez Réponse de Sorich à une autre question similaire

    
réponse donnée Bainternet 03.10.2011 - 16:27
4

La meilleure solution consiste d'abord à enregistrer vos actifs, puis à mettre en file d'attente les fichiers CSS et JS à l'intérieur de la fonction widget() de votre WP_Widget (mise en file d'attente directe, pas en ajoutant de nouveaux points d'ancrage).

J'ai testé cette solution et elle fonctionne dans la version actuelle de WordPress (4.5.3) - le JS et le CSS sont ajoutés dans le pied de page.

<?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 ) {
    }
}
    
réponse donnée Philipp 04.08.2016 - 13:55

Lire d'autres questions sur les étiquettes