wp_enqueue_style para Plugin con múltiples hojas de estilo

4

Estoy creando un complemento de navegación que agrega animaciones a tu navegación con wordpress.

Leí en Wordpress Codex que necesitaría usar wp_enqueue_style ().

Primero, ¿Cómo uso este código para varios archivos css? en mi archivo de plugin principal.

Ahora según esta pregunta, agregaría Hojas de estilo como esta:

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

add_action('admin_print_styles', 'add_my_stylesheet');

Como mi complemento requiere que se agreguen varias hojas de estilo, ¿cuál de los dos códigos debo usar?

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');

O

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');

Ahora sé dónde agregar este código. Pero, ¿cómo llamo a la hoja de estilo que quiero usar?

También, solo para aclarar lo que haría mi enchufe: El archivo de complemento principal solo cargaría la hoja de estilo requerida. Y la página de opciones permitiría al usuario seleccionar cuál de las hojas de estilo requerirá.

por ejemplo, en formato php usaría lo siguiente:

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

El nombre $ debería ser el seleccionado en la página de opciones, pero ¿cómo llamo la hoja de estilo requerida?

Espero que mi pregunta sea lo suficientemente clara.

    
pregunta Uzair Hayat 03.03.2014 - 19:26

3 respuestas

5

Para responder a su primera pregunta, usaría el segundo estilo, es decir,

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');

Lo que hace función add_action() es decirle a WordPress, "When se produce la acción admin_print_styles , ejecute esta función add_my_stylesheet() ." Confusamente, la práctica de usar las acciones admin_print_styles y admin_enqueue_styles para poner en cola hojas de estilo es incorrecta . Por contraintuitivo que sea, debe usar admin_enqueue_scripts en su lugar.

Las llamadas a wp_enqueue_style() luego agregan las hojas de estilo especificadas a una lista de hojas de estilo que se cargarán (si Especifique el argumento de dependencias, luego WordPress también se encargará de asegurarse de que sus hojas de estilo se carguen en el orden correcto. No necesita "llamar" una hoja de estilos en cola como sugirió: si está en cola, entonces se se imprimirá en un elemento HTML <link ...> en la sección <head></head> en la misma de la forma en que WordPress carga sus propias hojas de estilo.

Para seleccionar qué hoja de estilo se cargará, simplemente agregue su lógica a su función add_my_stylesheet() ; Si no desea que se use una hoja de estilo, entonces no la pone en cola, es decir:

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' );
    
respondido por el bosco 03.03.2014 - 21:39
0

Use una if para verificar si cumple con sus criterios, por ejemplo

  1. una página / publicación específica (id)
  2. todas las páginas / publicación
  3. relacionado con la opción de administrador.

De esa forma solo obtendrá el CSS que desee en la página deseada / cuando se seleccione la opción de administración deseada.

    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__ ) );
        }
    }

O:

    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__ ) );
        }
    }
    
respondido por el ScottMcGready 03.03.2014 - 19:54
0
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__) );

}
    
respondido por el vishakha 22.01.2017 - 19:43

Lea otras preguntas en las etiquetas