web-dev-qa-db-fra.com

Impossible de charger les feuilles de style et les scripts sur la page des paramètres du plug-in

J'ai le code suivant dans mon fichier de plugin principal:

<?php
/*
Plugin Name: Awesome Slide Show
*/

    add_action('admin_head', 'wp_ss_plugin_include');
    add_action('admin_menu', 'wp_ss_plugin_add_menu');

    function wp_ss_plugin_include() {
        echo "<style>";
        require 'settings/style.css';
        echo "</style>";

        echo "<script>";
        require 'settings/script.js';
        echo "</script>";
    }

    function wp_ss_plugin_add_menu() {
        add_menu_page("Slide Show", "Slide Slow", "manage_options", "wp-ss-plugin", 
            function () {
                require "settings/index.php";
            }
        );
    }

?>

Il y a trois fichiers dans le répertoire settings/, à savoir index.php , style.css et script.js . Le contenu de ces fichiers provient de ici .

Tout d'abord, je suis censé obtenir un diaporama d'images dans la page des paramètres de mon plugin. Cependant, je ne parviens pas à parcourir les diapositives (précédentes et suivantes). J'ai essayé de déboguer et j'ai constaté que les événements de clic ne fonctionnaient pas. (S'il vous plaît jeter un oeil sur le code dans le lien donné ci-dessus). Je pense que la feuille de style se charge mais pas le script.

Deuxièmement, j'aimerais savoir si la technique que j'ai utilisée pour charger les scripts et les styles est correcte ou non. J'ai eu l'idée de Bonjour Dolly plug-in qui répète directement son style. Est-ce la bonne façon? Ou quelle est la meilleure pratique pour créer ma propre page de paramètres pour mon plug-in avec tous les styles, scripts et tout? Je n'ai pas trouvé comment faire pour Plugins settings page. J'ai seulement trouvé des trucs pour Themes settings page.

pluginsplugin-developmentscriptsstyles
2
Vijay Chavda

La meilleure solution consistait à utiliser les fonctions wp_enqueue_style() et wp_enqueue_script lorsque admin_enqueue_scripts s'accrochait.

Enregistrer des styles et des scripts avec wp_register_style et wp_register_script, respectivement, est facultatif, mais présente certains avantages intéressants, comme bien expliqué ici .

Voici le script de travail:

<?php
/*
Plugin Name: Awesome Slide Show
*/



// admin_init
// ************************************************************************************************
    function wp_ss_plugin_admin_init_cb() {
        // Register CSS
        wp_register_style(
            'wp_ss_plugin_style', plugin_dir_url( __FILE__ ) . '/settings/style.css'
        );

        // Register JS
        wp_register_script(
            'wp_ss_plugin_script', plugin_dir_url( __FILE__ ) . '/settings/script.js',
            'jquery' //jQuery dependency
        );
    }
    add_action('admin_init', 'wp_ss_plugin_admin_init_cb');



// admin_enqueue_scripts
// ************************************************************************************************
    function wp_ss_plugin_admin_enqueue_scripts_cb() {
        //Enqueue CSS
        wp_enqueue_style('wp_ss_plugin_style');

        //Enqueue JS
        wp_enqueue_script('wp_ss_plugin_script');
    }
    add_action('admin_enqueue_scripts', 'wp_ss_plugin_admin_enqueue_scripts_cb');



// admin_menu
// ************************************************************************************************
    function wp_ss_plugin_admin_menu_cb() {
        add_menu_page("Slide Show", "Slide Slow", "manage_options", "wp-ss-plugin", 
            function () {
                require "settings/index.php";
            }
        );
    }
    add_action('admin_menu', 'wp_ss_plugin_admin_menu_cb');



?>

Un autre problème auquel j’ai été confronté était que jQuery ne fonctionnait pas, même après l’utilisation des scripts et des styles. Et cela a été résolu après l’ajout de jQuery en tant que dépendance de mon script en utilisant le troisième paramètre de wp_register_script.

2
Vijay Chavda