web-dev-qa-db-fra.com

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

J'aimerais 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:

à l'intérieur de 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 ça ne fait rien ...

widgetswp-enqueue-scriptwp-enqueue-style
12
pixeline

Les hooks wp_print_scripts et wp_print_styles sont déclenchés bien avant que votre widget ne fonctionne, ce qui signifie que cela ne fonctionne pas.

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

Ou une solution beaucoup plus agréable, jetez un oeil à La réponse de Sorich à une autre question similaire

6
Bainternet

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 (mettre en file d'attente directement, sans ajouter de nouveaux points d'ancrage).

J'ai testé cette solution et cela 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 ) {
    }
}
5
Philipp