web-dev-qa-db-fra.com

Script de mise en file d'attente uniquement lorsque le shortcode est utilisé, avec WP Plugin Boilerplate

Je construis un plugin en utilisant le WordPress Plugin Boilerplate de DevinVinson .

Tout fonctionne bien, sauf une chose:

J'essaie de mettre en file d'attente les scripts et les CSS uniquement lorsqu'un shortcode est présent dans la page.

Dans la fonction define_public_hooks, j'ai ajouté un appel au chargeur pour enregistrer les scripts au lieu de les mettre en file d'attente:

private function define_public_hooks() {
    // ...
    $this->loader->add_action( 'wp_register_script', $plugin_public, 'register_styles' );
    $this->loader->add_action( 'wp_register_script', $plugin_public, 'register_scripts' );
    // ...
}

Ensuite, dans le fichier class-my-plugin-public.php, j'ai créé deux fonctions publiques register_styles() et register_scripts(). À l'intérieur de ces fonctions, je ne fais qu'inscrire des scripts et des styles, au lieu de les mettre en file d'attente. C'est quelque chose de basique, comme ça:

public function register_scripts() {    
    wp_register_script( $this->plugin_name . '_google_maps_api', '//maps.googleapis.com/maps/api/js?key='. $gmap_key .'&v=3&libraries=places', array( 'jquery' ), '3', true );
}

Ensuite, je voudrais les mettre en file d'attente dans la fonction de retour shortcode, mais ils ne sont pas enregistrés du tout.

J'ai vérifié avec wp_script_is( $this->plugin_name . '_google_maps_api', 'registered' ), et il retourne false.

Si je fabrique exactement les mêmes choses, mais avec enqueue au lieu de register, tout se passe bien.

Une idée pourquoi?

plugin-developmentshortcodewp-enqueue-scriptwp-register-script
4
bluantinoo

Pourquoi ça ne marche pas:

Vous devez utiliser le hook wp_enqueue_scripts action. Vous avez utilisé wp_register_script comme crochet d’action. Cependant, il n’existe pas de crochet d’action nommé wp_register_script dans le noyau de WordPress.

Si c'était juste une erreur stupide, alors vous avez déjà la réponse. Continuez à lire si vous avez besoin de plus d’informations sur le sujet:

Associer une fonction de rappel à wp_enqueue_scriptsaction hook ne signifie pas que vos scripts et styles seront mis en file d'attente, cela signifie simplement que vous souhaitez exécuter cette fonction de rappel .

L'enregistrement et la mise en file d'attente d'origine sont effectués à l'aide de fonctions telles que: wp_register_script(), wp_register_style, wp_enqueue_script(), wp_enqueue_style() etc., et non par aucun hook .

Notez la différence entre le rôle des fonctions et des hooks:

  • A function exécute un code pour accomplir des tâches prédéfinies lorsqu'il est appelé.

    Exemple: ce sont toutes des fonctions de base de WordPress: wp_register_script(), wp_register_style, wp_enqueue_script(), wp_enqueue_style().

  • Un hook attache uniquement une fonction callable (à exécuter ultérieurement) en un point prédéfini de l'exécution du CODE.

    Exemple: il s'agit d'un point d'ancrage (action) principal de WordPress: wp_enqueue_scripts - notez la s (pluriel) à la fin.

    Double vérification:} _ wp_enqueue_script() est une fonction et wp_enqueue_scripts est un crochet d’action.

Le bon CODE:

Donc, votre CODE corrigé devrait être comme:

private function define_public_hooks() {
    // ...
    $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'register_styles' );
    $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'register_scripts' );
    // ...
}

Ensuite,

public function register_scripts() {
    wp_register_script( $this->plugin_name . '_google_maps_api', '//maps.googleapis.com/maps/api/js?key='. $gmap_key.'&v=3&libraries=places', array( 'jquery' ), '3', true );
}

Après cela, vous mettez en file d'attente le script (& style) à partir de votre fonction de gestionnaire de shortcode:

public function your_shortcode_handler( $atts ) {
    // shortcode related CODE
    wp_enqueue_script( $this->plugin_name . '_google_maps_api' );
    // more shortcode related CODE
}

Avec ce CODE, vos scripts/styles mis en file d'attente à partir de la fonction your_shortcode_handler ne seront ajoutés à votre site que s'il existe un shortcode dans cette URL particulière.

Lectures complémentaires:

Cette réponse a une discussion intéressante sur la mise en file d'attente des scripts et des styles uniquement lorsque le shortcode est présent.

6
Fayaz

Le problème est donc que le premier argument de l'appel add_action doit être un WordPress nom de l'action ... Ainsi, "wp_register_script", n'étant pas une action WP, n'est jamais appelé.

En fait, tout ce que vous devez faire, c’est d’ajouter vos appels d’enregistrement à la fonction enqueue_scripts de votre plugin; vous n'avez pas besoin de vous embêter avec define_public_hooks, ni de créer une nouvelle fonction register_scripts. Allez simplement avec la fonction existante enqueue_scripts, mais ajoutez-y vos inscriptions:

public function enqueue_scripts() {
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/plugin-name-public.js', array( 'jquery' ), $this->version, false );

    // NOTICE this is a *registration* only:
    wp_register_script( $this->plugin_name.'_google_maps_api', '//maps.googleapis.com/maps/api/js?key='. $gmap_key.'&v=3&libraries=places', array( 'jquery' ), '3', true ); 
}

Ensuite, lorsque votre code court, votre script devrait être enregistré, prêt à être mis en file d'attente.

J'espère que cela t'aides!

0
MacPrawn