Il y a quelques jours, on m’a demandé de créer un WordPress tableau de bord pour remplacer celui d’origine. Il ne s’agissait pas seulement d’afficher ou de masquer des métaboîtes déjà personnalisées, il remplaçait l’ensemble du 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 mauvais en demandant des trucs spécifiques à Google, ou si la plupart des tutoriels WordPress traitent des mêmes sujets, mais je n’ai rien trouvé.
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 principaux 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 encore une fois créé un plugin.
Étape 1 : la création du plugin
Si vous avez lu mes précédents articles sur WPexplorer, vous devriez maintenant savoir créer un plugin, mais voici un rappel.
Ouvrez le dossier des 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 ». Ensuite, ouvrez 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 se trouve sur la page du tableau de bord. Pour cela, remplacez la fonction constructeur 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 constructorEn ajoutant ce code, nous indiquons à 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 cela, il faut vérifier si on est sur le bon écran (lire « page ») à l’aide de la fonction get_current_screen(). Lorsque cette fonction est appelée à partir du hook ‘admin_init’, elle renvoie 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 nommé « 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 cela, il faut ajouter deux fonctions : une pour inscrire 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 nommé « 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 pouvez désormais utiliser n’importe quelle variable ou fonction WordPress.
Les deux autres charges require_once() devaient être déposé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 l’adapter à vos besoins. Dans mon exemple, je veux juste un menu avec 3 liens qui seront affichés sous forme d’onglets et deux paragraphes, incluant 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 bien 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 cela, 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 d’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 référentiel officiel des plugins WordPress Cliquez ici pour le télécharger.
