Utiliser nos propres styles et scripts dans les pages qu’on ajoute dans le tableau de bord WordPress

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.

▼Publicité

Feuilles de style et scripts pour toutes les pages du 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().

WordPress (PHP)

/**

 * Charge les scripts et les feuilles de style pour le tableau de bord.

 *

 * Utilisation : add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );

 *

 * @author Christiane Lagacé

 *

 */

function monprefixe_charger_css_js_admin() {

    wp_enqueue_style(

        'monprefixe-admin-css',

        get_stylesheet_directory_uri() . '/css/admin.css'

    );

 

    wp_enqueue_script(

        'monprefixe-admin-js',

        get_stylesheet_directory_uri() . '/js/admin.js'

    );

}

 

add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );

Mais 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.

Feuille de style propre à certaines pages du tableau de bord

Si nous avons besoin d'une feuille de style et d'un script qui ne seront utilisées que sur certaines pages du tableau de bord, il faut utiliser une petite astuce.

Lors de l'ajout de l'option de menu dans le tableau de bord, nous allons retenir la chaîne identifiant la nouvelle option. Et avant de charger la feuille de style et le JavaScript, nous allons nous assurer que la page qui est sur le point d'être affichée correspond bien à cette chaîne.

Comment faire ? Et bien la fonction de rappel associée au hook admin_enqueue_scripts reçoit en paramètre une chaîne correspondant à la page qui est sur le point d'être affichée. Il faudra donc comparer ce paramètre à la chaîne retournée par add_options_page().

Ouf, pas facile à comprendre ! Voyons plutôt le fonctionnement du code à l'aide d'un exemple :

WordPress (PHP)

/**

 * Ajoute une option de menu sous Réglages pour gérer les options du thème dans le tableau de bord.

 *

 * Utilisation : add_action( 'admin_menu', 'monprefixe_ajouter_menu_tableau_de_bord' );

 *

 * @author Christiane Lagacé

 *

 */

public function monprefixe_ajouter_menu_tableau_de_bord() {

    global $monprefixe_hook_admin;

 

    // ajout d'une option de menu sous le menu Réglages

    $monprefixe_hook_admin = add_options_page(

        __( "Mon thème - Configuration", "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_configuration",   // slug

        "monprefixe_creer_page_configuration" )   // fonction de rappel pour créer la page

    );

}

 

add_action( 'admin_menu', 'monprefixe_ajouter_menu_tableau_de_bord' );

 

/**

 * Charge les scripts et les feuilles de style pour le tableau de bord.

 *

 * Utilisation : add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );

 *

 * @author Christiane Lagacé

 *

 */

function monprefixe_charger_css_js_admin( $hook ) {

    global $monprefixe_hook_admin;    // variable initialisée lors de l'ajout de l'option de menu

 

    if ( $hook == $monprefixe_hook_admin ) {

        wp_enqueue_style( 'monprefixe-admin-css', plugins_url( 'css/admin.css', __FILE__ ) );

        wp_enqueue_script( 'monprefixe-admin-js', plugins_url( 'js/admin.js', __FILE__ ) );

    }

}

 

add_action( 'admin_enqueue_scripts', 'monprefixe_charger_css_js_admin' );

Pour plus d'information

« Loading Scripts Correctly in the WordPress Admin ». Pippins Plugins. https://pippinsplugins.com/loading-scripts-correctly-in-the-wordpress-admin/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories