web-dev-qa-db-fra.com

Comment mettre en file d'attente le script si le widget est affiché sur la page?

J'ai créé un widget qui utilise un plugin jQuery, et j'ai utilisé is_active_widget pour mettre le script en file d'attente. Tout fonctionne bien, mais il inclut également le script, même sur les pages ne affichant pas ce widget. existe-t-il un moyen de mettre le script en file d'attente uniquement si ce widget est affiché?

merci d'avance.

theme-developmentwidgetswp-enqueue-script
8
Pierre

Vous devriez pouvoir appeler wp_enqueue_script() dans le cadre de la sortie de votre widget.

Modifier

Rapide et sale, en utilisant les bare-bones API de widgets exemple de classe:

<?php
class wpse48337_Widget extends WP_Widget {

    public function __construct() {
        // widget actual processes
    }

    public function form( $instance ) {
        // outputs the options form on admin
    }

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }

    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }

}
register_widget( 'wpse48337_Widget' );
?>

Ajoutez votre wp_enqueue_script() call inline _, dans le output - de votre widget, c'est-à-dire dans la public function widget():

<?php    
    public function widget( $args, $instance ) {
        // outputs the content of the widget

    // Enqueue a script needed for
    // the Widget's output
    wp_enqueue_script( 'jquery-pluginname', $path, $deps );

    // Rest of widget output goes here...
    }
?>
10
Chip Bennett

Si le script doit être inséré dans la section <head>:

class Your_Widget extends WP_Widget{

  protected static $did_script = false;

  function __construct(){

    // parent::__construct() ...

    add_action('wp_enqueue_scripts', array($this, 'scripts'));

  }

  function scripts(){

    if(!self::$did_script && is_active_widget(false, false, $this->id_base, true)){
      wp_enqueue_script('your-script');
      self::$did_script = true;
    }           

  }


}

Sinon, la solution de Chip Bennett fonctionnera pour la file d'attente dans le pied de page.

La variable statique $did_script n'est pas obligatoire, je l'ai utilisée pour éviter d'autres appels inutiles à wp_enqueue_script s'il existe plusieurs instances de widget sur la page ...

6
onetrickpony

Pierre

La façon dont je gère ceci est avec wp_enqueue_script et wp_dequeue_script, et utilise une variable d'instance $is_active dans la classe Your_Widget

Il en va de même du wp_enqueue_script basé sur is_active_widget qui met le script en file d'attente sur toutes les pages, mais avec le paramètre footer défini sur true. Notez que la file d'attente est exécutée avec une priorité afin de s'assurer qu'elle est exécutée avant la sortie des scripts.

function enqueue_scripts() {
  if ( is_active_widget( false, $this->id, $this->id_base, true ) ) {
    wp_enqueue_script( 'your-script-handle', 'your-script-url', array(), '1.0', true );
    add_action( 'wp_footer', array($this,'dequeue_redundant_scripts'), 1 );
  }

}

Puis dans la fonction widget, indiquez si le widget est actif sur cette page

function widget( $args, $instance ) {
    // outputs the content of the widget
    $this->is_active = true;  
}

Ensuite, dans le pied de page, retirez le script si le widget n'est pas actif sur cette page

function dequeue_redundant_scripts() {
    if (! $this->is_active) {
        wp_dequeue_script('your-script-handle');
    }
}

Cette approche de mise en file d'attente puis de retrait en file d'attente si elle est inutilisée fonctionne également bien pour les plugins qui définissent des codes abrégés nécessitant des scripts

2
Russell Jamieson

J'ai considéré le "crochet wp_footer", car ce crochet est exécuté en bas de page et constitue probablement le meilleur moyen d'ajouter des scripts uniquement lorsque le widget est utilisé.

class Your_Widget extends WP_Widget{

    function widget( $args, $instance ) {

         add_action('wp_footer',array($this,'front_end_scripts'));

    }

    function front_end_scripts(){
       ?><script type="text/javascript">
          console.log('this works!');
        /*
          Or if you need external scripts then you may use 
          $.getScript([your-script-url] );
        */
        </script> <?php
    }



}
0
Dipesh KC