Il m’est arrivé qu’un client me demande de créer une page d’accueil personnalisée dans le backoffice de WordPress. Etonné, je lui demandai la raison pour laquelle il me faisait une telle requête…
Une page d'accueil personnalisée uniquement pour certains rôles
L’idée était que seuls certains rôles allaient voir cette page d’accueil personnalisée lorsqu’ils se connectent au backoffice. Pourquoi ? Pour ce client, j’avais crée le rôle “Technicien” et donné l’accès à certains membres de son entreprise pour gérer des dossiers de poses de menuiseries sur les chantiers. Il souhaitait donc que les techniciens ne voient pas la page d’accueil par défaut de WordPress avec toutes les infos habituelles, mais plutôt une page d’accueil personnalisée plus sympa. J’ai donc créé un petit plugin “custom-accueil-bo” pour ce faire. Si vous souhaitez faire une page d’accueil personnalisée pour certains rôles, suivez les instructions ci-dessous :
Créez une page normale
Créez une page normale avec le titre de votre choix, par exemple “Accueil des Techniciens” et un texte d’intro facultatif et/ou votre logo et enregistrez la. Notez bien son ID. Pour l’exemple et le code ci-dessous, nous imaginons que l’ID de la page est
Le fichier du plugin
Dans votre dossier plugin créer le dossier custom-accueil-bo dans lequel vous ajoutez le fichier custom-accueil-bo.php et créez les entêtes du plugin :
<?php
/**
* Plugin Name: Page d'accueil personnalisée back office
* Description: Ajoute une page d'accueil personnalisée pour le back-office.
* Version: 1.0
* Author: WP-CODES
*/
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly
}
Si besoin, chargez un fichier de style css. Ici un fond blanc, une police Google et un peu de padding.
function load_custom_dashboard_styles() {
if (isset($_GET['page']) && $_GET['page'] === 'custom-dashboard') {
wp_enqueue_style('custom-dashboard-styles', plugin_dir_url(__FILE__) . 'custom-dashboard.css');
}
}
add_action('admin_enqueue_scripts', 'load_custom_dashboard_styles');
Dans le fichier custom-dashboard.css (au même niveau que le fichier PHP principal)
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital,wght@0,400;0,700;1,400&display=swap');
/* CSS Document */
/* Fichier: custom-dashboard.css */
/* Applique un fond blanc et supprime le fond gris */
.custom-dashboard-content {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
font-family: 'ABeeZee', sans-serif;
font-size:17px;
}
Créez le rôle concerné par la page d’accueil personnalisée et lui donner la capacité nécessaire :
function ajouter_role_technicien() {
// Vérifie si le rôle "technicien" n'existe pas déjà
if (!get_role('technicien')) {
// Ajoute le rôle "technicien" avec uniquement la capacité de gérer le tableau de bord personnalisé
add_role(
'technicien',
'Technicien',
array(
'manage_custom_dashboard' => true, // Capacité spécifique pour le tableau de bord personnalisé
)
);
}
}
add_action('init', 'ajouter_role_technicien');
function add_custom_capabilities() {
// Récupérer le rôle 'technicien'
$technicien = get_role('technicien');
// Ajouter la capacité si le rôle existe
if ($technicien) {
$technicien->add_cap('manage_custom_dashboard');
//ici ajouter d'autres capacités si nécessaires
}
}
add_action('admin_init', 'add_custom_capabilities');
Créer le menu backoffice spécifique pour vos techniciens
function custom_dashboard_menu() {
add_menu_page(
'Accueil des Techniciens', // Titre de la page (pourra être modifié plus bas)
'Accueil Technicien', // Titre du menu
'manage_custom_dashboard', // Capacité requise
'custom-dashboard', // Slug de la page
'custom_dashboard_page', // Fonction de rappel pour afficher le contenu
'dashicons-admin-home', // Icône du menu
1 // Position dans le menu
);
}
add_action('admin_menu', 'custom_dashboard_menu');
Puis la fonction de redirection vers notre page d’accueil backoffice personnalisée pour les utilisateurs connectés ayant le rôle “technicien”.
function redirect_to_custom_dashboard() {
// Vérifiez que l'utilisateur est connecté
if (is_user_logged_in()) {
// Récupérer l'utilisateur actuel
$user = wp_get_current_user();
// Rediriger le rôle 'technicien' vers la page d'accueil personnalisée
if (in_array('technicien', $user->roles)) {
// Vérifier que l'utilisateur est sur la page d'accueil du tableau de bord
if (current_user_can('manage_custom_dashboard') && is_admin() && !isset($_GET['page']) && $_SERVER['PHP_SELF'] == '/wp-admin/index.php') {
wp_redirect(admin_url('admin.php?page=custom-dashboard'));
exit;
}
}
}
}
add_action('admin_init', 'redirect_to_custom_dashboard');
Facultatif : masquer le lien de WordPress par défaut (Tableau de bord) pour que le lien personnalisé “Accueil technicien” (défini plus haut dans la fonction custom_dashboard_menu() s’affiche à la place.
function hide_dashboard_menu_item() {
// Récupérer l'utilisateur actuel
$user = wp_get_current_user();
// Masquer le tableau de bord pour le rôle 'technicien'
if (in_array('technicien', $user->roles)) {
remove_menu_page('index.php'); // Masquer le lien 'Tableau de bord'
}
}
add_action('admin_menu', 'hide_dashboard_menu_item', 999);//priorité max
Personnaliser la page avec un petit message d’accueil personnalisé pour le technicien qui se connecte et arrive sur la page. On commence par créer un shortcode que l’on utilisera ensuite pour afficher le message.
function custom_dashboard_page() {
$page_id = 37674;//l'ID de la page créée spécialement
$page = get_post($page_id);// objet page
if($page){
echo '<div class="wrap custom-dashboard-content">';//pour le style css
echo '<h1>Accueil des Techniciens</h1>';//le titre de votre choix
// récup contenu déjà présent sur la page (intro, logo....)
echo wp_kses_post($page->post_content);
echo do_shortcode('[bienvenue-technicien]'); //génération du shortcode
echo '</div>';
}
}
Puis l’affichage du message via le shortcode précédemment créé.
function bienvenue_technicien(){
$current_user = wp_get_current_user();
// Récupérer le prénom et le nom
$first_name = $current_user->user_firstname;
$last_name = $current_user->user_lastname;
$message_bienvenue = 'Bienvenue dans ton Espace Technicien dédié, <b>'.$first_name . ' ' .$last_name.'</b> !';
return $message_bienvenue;
}
add_shortcode('bienvenue-technicien','bienvenue_technicien');
Si besoin, ajustement de la police du lien “Accueil technicien” dans le backoffice si vous avez choisi de remplacer le lien “Tableau de bord” par défaut.
function custom_admin_menu_styles() {
echo '
<style>
#adminmenu a {
font-size: 13px !important; /* Ajuste la taille de la police à 13px */
line-height: 1.4 !important; /* Assure une bonne hauteur de ligne */
}
</style>
';
}
add_action('admin_head', 'custom_admin_menu_styles');
Résultat de votre page d'accueil personnalisée dans le backoffice
Lorsque l’utilisateur François Dupond ayant le rôle Technicien (via sa fiche de compte) se connectera au site, il sera redirigé vers la page d’accueil personnalisée du backoffice et verra le titre Accueil des Techniciens”, suivi d’un logo et/ou un texte, suivi du message “Bienvenue dans ton Espace Technicien dédié, François Dupond !”.