La feuille de style style.css présente dans le dossier du thème n'est pas chargée lorsque le tableau de bord est affiché. Si vous avez besoin de styliser les données affichées dans le tableau de bord, vous devrez utiliser une autre feuille de style.
Il est également possible de charger vos propres fichiers JavaScript pour les pages que vous ajoutez dans le tableau de bord.
Le hook admin_enqueue_scripts permettra de charger correctement les feuilles de style et les scripts pour le tableau de bord.
L'exemple suivant ajoutera un fichier .css et un fichier .js dans le tableau de bord. Ce code sera placé dans le fichier functions.php du thème enfant.
Si ce code faisait partie d'une extension, il serait placé dans la classe de l'extension avec les ajustements requis à add_action().
Nous travaillerons ici avec un thème enfant.
/**
* Charge des scripts et des feuilles de style dans le tableau de bord.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );
*/
function monprefixe_charger_css_js_admin() {
// fichiers à charger pour toutes les pages du tableau de bord
wp_enqueue_style( 'monprefixe-admin', get_stylesheet_directory_uri() . '/css/admin.css' );
wp_enqueue_script( 'monprefixe-admin', get_stylesheet_directory_uri() . '/js/admin.js' );
}
add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );
Attention : par défaut, admin_enqueue_scripts chargera les feuilles de style et les scripts sur toutes les pages du tableau de bord.
Si les styles et scripts ne sont utilisés que pour certaines pages, vous aurez un alourdissement inutile des pages de base du tableau de bord : configurations générales, liste des articles, des pages, des usagers, etc.
Vous avez défini des styles que vous souhaitez utiliser sur certaines pages du tableau de bord? Vous pouvez pour cela utiliser le nom du hook que WordPress a généré pour chacune des pages du tableau de bord.
La fonction de rappel associée à admin_enqueue_scripts recevra ce hook en paramètre.
Le nom de ce hook est généré par WordPress à partir des informations utilisées lors de la génération des options de menu.
La technique la plus facile pour retrouver le nom du hook d'une page du tableau de bord consiste à faire appel àmonprefixe_log_debug().
Il faudra, bien entendu, supprimer cette ligne une fois qu'on aura trouvé l'information recherchée.
function monprefixe_charger_css_js_admin( $hook ) {
monprefixe_log_debug( $hook ); // inscrira par exemple toplevel_page_monprefixe_gestion ou mon-theme_page_monprefixe_ajout
...
}
Si cette façon de procéder vous convient, vous pouvez passer directement à la prochaine section.
Si vous voulez mieux comprendre comment le nom de ce hook est monté, je vous explique.
Prenons par exemple des options de menu générées comme suit :
/**
* Ajoute l'option de menu principale et les sous-options pour gérer le thème dans le tableau de bord.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action( "admin_menu", "monprefixe_ajouter_menu_tableau_de_bord" );
*/
function monprefixe_ajouter_menu_tableau_de_bord() {
add_menu_page(
__( "Mon thème - Gestion", "mon-domaine-de-localisation" ), // texte de la balise <title>, initialisera $title
__( "Mon thème", "mon-domaine-de-localisation" ), // titre de l'option de menu
"manage_options", // droits requis pour voir l'option de menu
"monprefixe_gestion", // slug
"monprefixe_creer_page_gestion" // fonction de rappel pour créer la page
);
// première option du sous-menu : redéfinit les mêmes critères que le menu
add_submenu_page(
"monprefixe_gestion", // slug du menu parent
__( "Mon thème - Gestion", "mon-domaine-de-localisation" ), // texte de la balise <title> - même que dans add_menu_page()
__( "Gestion", "mon-domaine-de-localisation" ), // titre de l'option de sous-menu
"manage_options", // droits requis pour voir l'option de menu
"monprefixe_gestion", // réutiliser le slug du menu parent
"monprefixe_creer_page_gestion" // fonction de rappel pour créer la page - même que dans add_menu_page()
);
// seconde option du sous-menu
add_submenu_page(
"monprefixe_gestion", // slug du menu parent
__( "Mon thème - Ajouter un ...", "mon-domaine-de-localisation" ), // texte de la balise <title>, initialisera $title
__( "Ajouter un ...", "mon-domaine-de-localisation" ), // titre de l'option de sous-menu
"manage_options", // droits requis pour voir l'option de menu
"monprefixe_ajout", // slug
"monprefixe_creer_page_ajout" // fonction de rappel pour créer la page
);
}
add_action( "admin_menu", "monprefixe_ajouter_menu_tableau_de_bord" );
Le nom du hook sera toujours au format titre-du-menu-parent_page_slug_de_la_page. Il utilise seulement des lettres minuscules non accentuées. Les espaces sont remplacés par des tirets.
Dans les exemples qui suivent, j'ai ajouté de la couleur pour faire le lien entre le texte et le code de génération des options de menu présenté plus haut.
Ainsi, si vous cliquez sur l'option , le hook sera toplevel_page_monprefixe_gestion. WordPress utilise toplevel lorsque l'option de menu n'a pas de parent.
Si vous cliquez sur l'option , le hook sera mon-theme_page_monprefixe_ajout.
Une fois que vous savez quel est le nom du hook de vos pages personnelles, il vous est possible de charger des fichiers .css et .js pour une option de menu et ses sous-options.
Vous devrez modifier « mon-theme » par le nom de l'option de menu et ajuster le dernier paramètre de la fonction substr() pour qu'il corresponde au nombre de caractères de ce titre.
/**
* Charge des scripts et des feuilles de style dans le tableau de bord.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );
*/
function monprefixe_charger_css_js_admin( $hook ) {
// fichiers à charger pour mon option de menu perso et ses sous-options dans le tableau de bord
if ( 'toplevel_page_monprefixe_gestion' == $hook || 'mon-theme' == substr( $hook, 0, 9 ) ) {
wp_enqueue_style( 'monprefixe-admin', get_stylesheet_directory_uri() . '/css/admin.css' );
wp_enqueue_script( 'monprefixe-admin', get_stylesheet_directory_uri() . '/js/admin.js' );
}
}
add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );
Voici une autre technique pour retrouver le nom du hook d'une page du tableau de bord. Il s'agit de le retenir dans une variable qui aura été générée lors de la création de l'option de menu.
La démonstration est ici faite avec add_options_page() mais sachez que le principe est le même avec les autres fonctions, par exemple add_menu_page(), add_submenu_page() et add_management_page().
/**
* Ajoute une option de menu sous Réglages pour gérer les options du thème dans le tableau de bord.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action( 'admin_menu', 'monprefixe_ajouter_menu_tableau_de_bord' );
*/
public function monprefixe_ajouter_menu_tableau_de_bord() {
global $monprefixe_hook_options;
// ajout d'une option de menu sous le menu Réglages
$monprefixe_hook_options = add_options_page(
__( "Mon thème - Options", "mon-domaine-de-localisation" ), // texte de la balise <title>
__( "Mon thème", "mon-domaine-de-localisation" ), // titre de l'option de menu
"manage_options", // droits requis pour voir l'option de menu
"monprefixe_options", // slug
"monprefixe_creer_page_options" // fonction de rappel pour créer la page
);
}
add_action( 'admin_menu', 'monprefixe_ajouter_menu_tableau_de_bord' );
/**
* Charge des scripts et des feuilles de style dans le tableau de bord.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );
*/
function monprefixe_charger_css_js_admin( $hook ) {
global $monprefixe_hook_options; // variable initialisée lors de l'ajout de l'option de menu
// fichiers à charger seulement pour la page d'options de mon thème
if ( $hook == $monprefixe_hook_options ) {
wp_enqueue_style( 'monprefixe-admin',get_stylesheet_directory_uri() . '/css/admin.css' );
wp_enqueue_script( 'monprefixe-admin',get_stylesheet_directory_uri() . '/js/admin.js' );
}
}
add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );
« Loading Scripts Correctly in the WordPress Admin ». Pippins Plugins. https://pippinsplugins.com/loading-scripts-correctly-in-the-wordpress-admin/
▼Publicité
