web-dev-qa-db-fra.com

Comment ajouter du code JavaScript Bootstrap Tour au widget Dashboard du panneau d'administration WordPress

Je développe un thème et je veux savoir comment ajouter un script Bootstrap Tour à un widget de tableau de bord personnalisé.

Fondamentalement, je souhaite inclure le script de visite Bootstrap dans le panneau d'administration afin de pouvoir écrire un widget de tableau de bord personnalisé, puis de lier le script de visite à ce widget.

theme-developmentwp-adminwp-enqueue-script
1
William Jerome

Étape 1 → Télécharger:

Téléchargez les fichiers CSS/JS nécessaires pour Bootstrap Tour dans le répertoire de votre thème.

Étape 2 _ → Script de configuration de la tournée:

Suivez les instructions de bootstraptour for le script de configuration de Tour. Par exemple, le script suivant chargera la visite sur le tableau de bord principal du panneau d'administration WordPress (lors du chargement de la page) et affichera la visite par défaut WP Activity & At a Glance Widgets:

Remarque: Consultez les commentaires à l'intérieur du CODE pour plus d'instructions:

// bootstrap-tour.js file
(function($) {

    var tour = new Tour({
        backdrop: true,
        steps: [
        {   
            element: "#dashboard_right_now",
            title: "Summary Widget.",
            content: "This widget shows the summary of your WP installation."
        },  
        {   
            element: "#dashboard_activity",
            title: "Activity Widget.",
            content: "This is WP Dashboard Activity Widget."
        }]  
    }); 

    tour.init();

    // This will load on each page load or refresh.
    // You may want to change this behaviour according to your need.
    // e.g. show the tour on a click even of a custom notice or button
    // within admin panel dashboard.
    $( window ).load( function() {
        tour.start( true );
    }); 
})( jQuery );

Étape 3 → Charger le script dans le panneau d'administration:

Utilisez le admin_enqueue_scripts hook pour ajouter les fichiers CSS et JS Bootstrap Tour dans le tableau de bord du panneau d'administration, comme le code suivant dans le fichier functions.php de votre thème:

function wpse308865_bootstrap_tour_enqueue_scripts( $admin_page ) { 
    if ( 'index.php' != $admin_page ) { 
        // so basically we're allowing the tour only on the main dashboard
        // change this if you want it elsewhere as well.
        return;
    }   
    // this is bootstrap tour css and js file inside theme's directory
    wp_register_style( 'bootstrap_tour_css', get_stylesheet_directory_uri() . '/bootstrap-tour-standalone.min.css', false, '1.0' );
    wp_enqueue_style( 'bootstrap_tour_css' );
    wp_enqueue_script( 'bootstrap_tour_js', get_stylesheet_directory_uri() . '/bootstrap-tour-standalone.min.js', array( 'jquery' ), '1.0' );

    // this is the custom bootstrap tour loading script inside theme's directory
    wp_enqueue_script( 'bootstrap_tour', get_stylesheet_directory_uri() . '/bootstrap-tour.js', array( 'bootstrap_tour_js' ), '1.0' );
}   
add_action( 'admin_enqueue_scripts', 'wpse308865_bootstrap_tour_enqueue_scripts' );

Remarque: Ceci est simplement une démonstration de la procédure à suivre pour ajouter le code CODE CSS et JavaScript de Bootstrap Tour dans le tableau de bord WordPress Admin Panel à partir de votre thème. Évidemment, vous devrez adapter le code ci-dessus à votre besoin en conséquence.

1
Fayaz