Il y a quelques jours, on m’a demandé de créer un custom WordPress tableau de bord pour remplacer celui d’origine. Il ne s’agissait pas seulement d’afficher ou de masquer des métabox déjà personnalisées, il remplaçait tout le tableau de bord. C’était la première fois qu’on me demandait de faire quelque chose comme ça, donc c’était assez difficile. Comme toujours, dans ce cas, j’ai regardé sur Internet pour voir si quelque chose de similaire avait déjà été fait. et encore une fois, aucun résultat. Je ne sais pas si je suis mal en posant des questions spécifiques à Google, ou si la plupart des tutoriels WordPress traitent des mêmes sujets, mais je ne trouve rien.

Ensuite, je me souviens que depuis WordPress 3.x, il y a une nouvelle page une fois que nous nous connectons pour la première fois après une mise à jour. C’est plus ou moins ce que je voulais faire.

Après une recherche rapide dans les fichiers de base de WordPress, j’ai trouvé de très bonnes choses. Et enfin, j’ai réussi à créer tout un tableau de bord personnalisé dans le style WordPress. Pour ce faire, j’ai à nouveau créé un plugin.

Étape 1: la création du plugin

Si vous lisez mes précédents articles sur WPexplorer, vous devriez maintenant savoir comment créer un plugin, mais voici un rappel.

Ouvrez le dossier plugins sous wp-content, et créez un nouveau référentiel appelé «sweet-custom-dashboard», et à l’intérieur de ce dossier créez un nouveau fichier appelé «sweet-custom-dashboard.php». Ouvrez ensuite le fichier.

Pour déclarer le plugin, ajoutez simplement ce code au fichier:

<?php
/*
Plugin Name: Sweet Custom Dashboard
Plugin URL: http://remicorson.com/sweet-custom-dashboard Description: A nice plugin to create your custom dashboard page
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com Contributors: corsonr
Text Domain: rc_scd
*/

Seulement en ajoutant ce code, vous avez déjà créé un plugin, un plugin vide, mais un plugin fonctionnel!

Maintenant, nous devons définir une constante pour l’URL du plugin, nous en aurons besoin plus tard. Ajoutez ce code:

/*
|--------------------------------------------------------------------------
| CONSTANTS
|--------------------------------------------------------------------------
*/
// plugin folder url
if(!defined('RC_SCD_PLUGIN_URL')) {
define('RC_SCD_PLUGIN_URL', plugin_dir_url( __FILE__ ));
}

Il est maintenant temps de créer la classe principale de notre plugin:

/*
|--------------------------------------------------------------------------
| MAIN CLASS
|--------------------------------------------------------------------------
*/

class rc_sweet_custom_dashboard {

    /*--------------------------------------------*
     * Constructor
     *--------------------------------------------*/

    /**
     * Initializes the plugin
     */
    function __construct() {

    } // end constructor

}

// instantiate plugin's class
$GLOBALS['sweet_custom_dashboard'] = new rc_sweet_custom_dashboard();

Étape 2: Le constructeur

À la deuxième étape, nous devons ajouter une action qui ne se produira que si l’utilisateur est sur la page du tableau de bord. Pour ce faire, remplacez la fonction constructore par ce code:

function __construct() {

    add_action('admin_menu', array( &$this,'rc_scd_register_menu') );
    add_action('load-index.php', array( &$this,'rc_scd_redirect_dashboard') );

} // end constructor

En ajoutant ce code, nous disons à WordPress que nous voulons charger la fonction rc_get_screen () lorsque index.php est chargé (index.php est la page du tableau de bord). Nous demandons également à WordPress d’enregistrer une nouvelle page de tableau de bord. Celui que nous utiliserons dans la redirection. L’étape suivante est la construction de la fonction rc_redirect_dashboard ().

Étape 3: la redirection du tableau de bord

La fonction rc_redirect_dashboard () est assez simple. Son objectif est de rediriger l’utilisateur vers une page personnalisée lorsqu’il souhaite accéder au tableau de bord par défaut. Pour ce faire, nous devons vérifier si nous sommes sur le bon écran (lire «page») en utilisant la fonction get_current_screen (). Lorsque cette fonction est appelée à partir du hook ‘admin_init’, elle retourne NULL, c’est en partie pourquoi j’ai accroché rc_dashboard_redirection () à «load-index.php». Voici le contenu de la fonction:

function rc_scd_redirect_dashboard() {

    if( is_admin() ) {
        $screen = get_current_screen();
        
        if( $screen->base == 'dashboard' ) {

            wp_redirect( admin_url( 'index.php?page=custom-dashboard' ) );
            
        }
    }

}

Ce code est assez compréhensible, si on est dans l’admin, et si l’écran courant est «dashboard» alors on force une redirection vers un fichier appelé «custom_dashboard.php».

Enregistrement de la page du tableau de bord

Il est maintenant temps d’enregistrer la nouvelle page du tableau de bord. Pour ce faire, nous devons ajouter deux fonctions: une pour enregistrer la page dans le menu WordPress et une pour remplir la page de contenu:

function rc_scd_register_menu() {
    add_dashboard_page( 'Custom Dashboard', 'Custom Dashboard', 'read', 'custom-dashboard', array( &$this,'rc_scd_create_dashboard') );
}

function rc_scd_create_dashboard() {
    include_once( 'custom_dashboard.php'  );
}

Si vous avez enregistré le fichier, activez le plugin et essayez d’accéder au tableau de bord, vous devriez voir une page vierge ou un message 404. Nous pouvons créer notre tableau de bord personnalisé.

Étape 4: La création du tableau de bord personnalisé

Lorsque j’ai créé ce plugin, je voulais que le nouveau tableau de bord soit dans le style WordPress, c’est pourquoi mon point de départ était, la page que vous voyez lorsque vous vous connectez pour la première fois après une mise à jour principale. J’ai parcouru le code de cette page pour trouver l’inspiration.

Pour commencer, créez un nouveau fichier appelé «custom_dashboard.php» dans votre dossier sweet-custom-dashboard. Ouvrez-le et ajoutez ce code:

<?php
/**
 * Our custom dashboard page
 */

/** WordPress Administration Bootstrap */
require_once( ABSPATH . 'wp-load.php' );
require_once( ABSPATH . 'wp-admin/admin.php' );
require_once( ABSPATH . 'wp-admin/admin-header.php' );
?>

La première fonction require_once (), charge WordPress, en ajoutant cette simple ligne, vous êtes maintenant en mesure d’utiliser n’importe quelle variable WordPress ou n’importe quelle fonction.

Les deux autres charges require_once () nécessaires ont été classées pour afficher correctement l’administration.

Il ne nous reste plus qu’à créer le contenu de notre tableau de bord personnalisé. Le code ci-dessous est inspiré du fichier mentionné précédemment, c’est pourquoi vous devrez peut-être l’ajuster un peu pour répondre à vos besoins. Dans mon exemple, je veux juste un menu avec 3 liens qui seront affichés sous forme d’onglets, et deux paragraphes, comprenant une fois une image. Voici le code:

<div class="wrap about-wrap">
<h1><?php _e( 'Welcome to My Custom Dashboard Page' ); ?></h1>

 <div class="about-text">
 <?php _e('Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.' ); ?>
 </div>

 <h2 class="nav-tab-wrapper">
 <a href="#" class="nav-tab nav-tab-active">
 <?php _e( 'Step 1' ); ?>
 </a><a href="#" class="nav-tab">
 <?php _e( 'Step 2' ); ?>
 </a><a href="#" class="nav-tab">
 <?php _e( 'Step 3' ); ?>
 </a>
 </h2>

 <div class="changelog">
 <h3><?php _e( 'Morbi leo risus, porta ac consectetur' ); ?></h3>

 <div class="feature-section images-stagger-right">
 <img src="<?php echo esc_url( admin_url( 'images/screenshots/theme-customizer.png' ) ); ?>" class="image-50" />
 <h4><?php _e( 'Risus Consectetur Elit Sollicitudin' ); ?></h4>
 <p><?php _e( 'Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.' ); ?></p>

 <h4><?php _e( 'Mattis Justo Purus' ); ?></h4>
 <p><?php _e( 'Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.' ); ?></p>
 </div>
 </div>
</div>

Rien de vraiment intéressant dans ce code, c’est juste du code HTML.

Et enfin, nous devons charger le pied de page d’administration de WordPress. Pour ce faire, il suffit de cette ligne en bas du fichier:

<?php include( ABSPATH . 'wp-admin/admin-footer.php' );

Et c’est tout ! Le plugin fonctionne maintenant très bien, il existe bien sûr de nombreuses façons de l’améliorer, par exemple, vous pouvez ajouter des feuilles de style personnalisées et des fichiers javascript personnalisés, ou vous pouvez ajouter une vérification supplémentaire pour afficher le tableau de bord personnalisé à certains rôles utilisateur uniquement …

Eh bien, j’espère que vous avez apprécié ce tutoriel, et j’ai hâte de lire vos commentaires dans la section commentaires!

Encore une chose, il existe une version déjà compilée du plugin sur le dépôt officiel des plugins WordPress cliquez ici pour le télécharger.

Share: