web-dev-qa-db-fra.com

Incluant CSS et JS sur l'écran d'administration des options de thème personnalisées

Je crée un thème personnalisé avec une page d'options de thème.

J'aimerais styler la page des options et ne pas inclure de styles en ligne. Est-il possible d'inclure une feuille de style externe de say

TEMPLATEPATH . '/css/admin.css'

J'ai également trouvé ce morceau de code et il semble fonctionner - link

function admin_register_head() {
 $siteurl = get_option('siteurl');
 $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/yourstyle.css';
 echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
}
add_action('admin_head', 'admin_register_head');

Quel est le meilleur moyen?

theme-developmentadmin
4
abrudtkuhl

Si vous créez un plug-in de thème administrateur à partir des étapes du Codex, vous remarquerez qu'il est interdit d'insérer des feuilles de style comme indiqué ci-dessus - bien que cela fonctionne.

Si vous placez ce qui suit dans votre fichier de thème d’administrateur, cela servira le même but, mais vous utiliserez l’approche wp_enqueue_styles :

function add_admin_theme_styles() {
    wp_register_style($handle = 'mytheme-theme-admin-styles', $src = plugins_url('wp-admin.css', __FILE__), $deps = array(), $ver = '1.0.0', $media = 'all');
    wp_enqueue_style('mytheme-theme-admin-styles');}
    add_action('admin_print_styles', 'add_admin_theme_styles');
3
davemac

Lors de l'enregistrement d'une page pour la zone d'administration, en utilisant add_submenu_page ou l'une des autres fonctions add_{TYPE}_page, le quatrième paramètre accepte un identifiant unique. Cet identifiant désigne le point d'accrochage utilisé par votre page enregistrée.

Si je devais enregistrer une option par exemple:

add_options_page( 'Example Plugin Options', 'Example Plugin', 'manage_options', 'example-plugin-identifier', 'example_plugin_options' );

Divers crochets sont alors disponibles pour cette page en particulier. Voici quelques actions possibles pour la page maintenant enregistrée.

// load-{HANDLE}
add_action( 'load-example-plugin-identifier', 'example_plugin_callback' );
// admin_head-{HANDLE}
add_action( 'admin_head-example-plugin-identifier', 'example_plugin_callback' );
// admin_print_scripts-{HANDLE}
add_action( 'admin_print_scripts-example-plugin-identifier', 'example_plugin_callback' );
// admin_print_styles-{HANDLE}
add_action( 'admin_print_styles-example-plugin-identifier', 'example_plugin_callback' );

function example_plugin_callback() {

    // Run your code here

}

Il existe également le crochet admin_enqueue_scripts, qui fournit le nom du descripteur actuel dans la chaîne/variable transmise aux fonctions de rappel.

add_action( 'admin_enqueue_scripts', 'example_plugin_callback' );

function example_plugin_callback( $handle ) {

    // If the handle is not the page registered earlier, return
    if( 'example-plugin-identifier' =! $handle )
        return;

    // Run your code here

}

Vous ne devriez normalement pas avoir besoin d'utiliser admin_head, admin_print_scripts ou admin_print_styles à moins que vous ne souhaitiez cibler une pageeveryadministration ou exécuter une logique conditionnelle dans le rappel pour cibler des pages enregistrées spécifiques.

J'espère que cela pourra aider..

4
t31os

WP fournit des files d'attente pour les scripts et les styles. Il permet de modifier les URL, de charger automatiquement les dépendances, etc.

Voir wp enqueue style() dans Codex pour savoir comment enregistrer correctement votre style et ne charger que là où vous en avez besoin (sur votre page personnalisée et non dans la totalité de la zone d'administration).

3
Rarst

Oui, je réponds à ma propre question ... mais j'ai réussi à la faire fonctionner.

Ajouter cette action au fichier functions.php de votre thème

function admin_register_head() {
    $url = get_bloginfo('template_directory') . '/css/admin.css';
    echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
}
add_action('admin_head', 'admin_register_head');
1
abrudtkuhl