web-dev-qa-db-fra.com

wp_enqueue_style pour le plugin avec plusieurs feuilles de style

Je fais un plugin de navigation qui ajoute des animations à votre navigation wordpress.

J'ai lu dans Wordpress Codex que je devrais utiliser wp_enqueue_style ().

Premièrement, comment utiliser ce code pour plusieurs fichiers CSS? dans mon fichier de plugin principal.

Maintenant, selon this question, je voudrais ajouter des feuilles de style comme ceci:

function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet');

Étant donné que mon plugin nécessite l'ajout de plusieurs feuilles de style, lequel des deux codes dois-je utiliser?

function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet');

function add_my_stylesheet1() 
{
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet1');

Ou

function add_my_stylesheet1() 
{
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS.css', __FILE__ ) );
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet1');

Maintenant je sais où ajouter ce code. Mais comment appeler la feuille de style que je veux utiliser?

Aussi, juste pour clarifier ce que ferait mon plug: Le fichier de plugin principal ne chargerait que la feuille de style requise. Et la page des options permettrait à l’utilisateur de sélectionner la feuille de style à utiliser.

par exemple, au format php, j'utiliserais ce qui suit:

<link href="nav-<?php echo $name; ?>.css">

Le nom $ devrait être celui sélectionné dans la page des options, mais comment puis-je appeler dans la feuille de style requise?

J'espère que ma question est suffisamment claire.

wp-enqueue-style
5
Uzair Hayat

Pour répondre à votre première question, vous utiliseriez le second style, à savoir.

function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
    wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
}

add_action('admin_print_styles', 'add_my_stylesheet');

Qu'est-ce que la fonction add_action() indique à WordPress: "Lorsque l'action admin_print_styles se produit, exécutez cette fonction add_my_stylesheet()." Confusément, la pratique consistant à utiliser les actions admin_print_styles et admin_enqueue_styles pour mettre en file d'attente les feuilles de style est incorrect - aussi contre-intuitif qu'il soit, vous devez utiliser admin_enqueue_scripts à la place.

Les appels à wp_enqueue_style() ajoutent ensuite les feuilles de style spécifiées à une liste de feuilles de style qui seront chargées (si vous spécifiez l’argument des dépendances, WordPress veillera également à ce que vos feuilles de style se chargent dans le bon ordre). Vous n'avez pas besoin "d'appeler" une feuille de style mise en file d'attente comme vous l'avez suggéré - si elle est mise en file d'attente, il sera sera imprimé dans un élément HTML <link ...> de la section <head></head> de la même manière que WordPress la charge propres feuilles de style.

Afin de sélectionner quelle feuille de style sera chargée, vous ajoutez simplement votre logique à votre fonction add_my_stylesheet(); si vous ne souhaitez pas utiliser une feuille de style, vous ne la mettez pas en file d'attente, c'est-à-dire:

function admincolorplugin_enqueue_styles() 
{
    // Get the user's stylesheet choice from the options, default to "white"
    $stylesheet = get_option( 'admincolorplugin_stylesheet', 'white' );

    // Conditionally load the appropriate stylesheet
    if( $stylesheet == 'black' ) {
        wp_enqueue_style( 'admincolorplugin-black', plugins_url( '/css/black.css', __FILE__ ) );
    }
    else {
        wp_enqueue_style( 'admincolorplugin-white', plugins_url( '/css/white.css', __FILE__ ) );
    }
}

add_action('admin_enqueue_scripts', 'admincolorplugin_enqueue_styles' );
7
bosco
add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );

/** * Add stylesheet to the page*/
function safely_add_stylesheet_to_admin() {
    wp_enqueue_style( 'prefix-style', plugins_url('plugin_styles.css', __FILE__) );
    wp_enqueue_style( 'prefix-basic', plugins_url('/css/basic.css', __FILE__) );

}
0
vishakha

Utilisez un if pour vérifier s'il est conforme à vos critères, par exemple

  1. une page/post spécifique (id)
  2. toutes les pages/post
  3. liée à l'option admin.

De cette façon, il ne tirera que le CSS que vous souhaitez sur la page souhaitée/lorsque l'option d'administration souhaitée est sélectionnée.

    function add_my_stylesheet1() 
    {
        if(is_page(41)){
            wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS.css', __FILE__ ) );
        }else{
            wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
        }
    }

Ou:

    function add_my_stylesheet1() 
    {
        $adminopt = get_option( $option, $default );
        if($adminopt == "Normal CSS"){
            wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
        }else{
            wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
        }
    }
0
ScottMcGready