wp_enqueue_style para Plugin con múltiples hojas de estilo

Question

wp_enqueue_style para Plugin con múltiples hojas de estilo

3 mar 2014, 20:26:22

Vistas: 37.2K

Votos: 6

Estoy creando un plugin de navegación que agrega animaciones a tu navegación de WordPress.

Leí en el Codex de WordPress que necesitaría usar wp_enqueue_style().

Primero, ¿Cómo uso este código para múltiples archivos CSS? en mi archivo principal del plugin.

Según esta pregunta, agregaría las hojas de estilo así:

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

add_action('admin_print_styles', 'add_my_stylesheet');

Ya que mi plugin requiere que se agreguen múltiples hojas de estilo, ¿cuál de los dos códigos debería 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?

Además, solo para aclarar lo que haría mi plugin: El archivo principal del plugin 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 $name debería ser el seleccionado desde la página de opciones, pero ¿cómo llamo a la hoja de estilo requerida?

Espero que mi pregunta sea lo suficientemente clara.

Uzair Hayat

163

wp enqueue style

Todas las respuestas a la pregunta

Usa un condicional if para verificar si cumple con tus criterios, por ejemplo:

una página/entrada específica (ID)
todas las páginas/entradas
relacionado con una opción del administrador.

De esta manera solo cargará el CSS que deseas en la página específica o cuando se seleccione la opción de administrador 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 == "CSS Normal"){
            wp_enqueue_style( 'myCSS', plugins_url( '/css/myCSS.css', __FILE__ ) );
        }else{
            wp_enqueue_style( 'myCSS1', plugins_url( '/css/myCSS1.css', __FILE__ ) );
        }
    }

ScottMcGready

101

3 mar 2014 20:54:01

add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );

/** * Agregar hoja de estilos a la página*/
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__) );

}

vishakha

1

22 ene 2017 20:43:28

Comentarios

Por favor, siempre explica qué hace el código. Solo realiza una [edición] y explica por qué tu código resuelve el problema del OP.

kaiser

22 ene 2017 21:14:52

bosco 6.98K · Accepted Answer · 2014-03-03T22:39:10Z

Para responder a tu primera pregunta, usarías 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 la función add_action() es decirle a WordPress: "Cuando ocurra la acción admin_print_styles, ejecuta esta función add_my_stylesheet()". De manera confusa, la práctica de usar las acciones admin_print_styles y admin_enqueue_styles para encolar hojas de estilo es incorrecta - por contradictorio que parezca, deberías 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 especificas el argumento de dependencias, entonces WordPress también se encargará de asegurarse de que tus hojas de estilo se carguen en el orden correcto). No necesitas "llamar" a una hoja de estilo encolada como sugeriste - si está encolada, entonces será impresa en un elemento HTML <link ...> en la sección <head></head> de la misma manera en que WordPress carga sus propias hojas de estilo.

Para seleccionar qué hoja de estilo se cargará, simplemente añade tu lógica a tu función add_my_stylesheet(); si no deseas que se use una hoja de estilo, entonces no la encolas, por ejemplo:

function admincolorplugin_enqueue_styles() 
{
    // Obtener la elección de hoja de estilo del usuario desde las opciones, por defecto "white"
    $stylesheet = get_option( 'admincolorplugin_stylesheet', 'white' );

    // Cargar condicionalmente la hoja de estilo apropiada
    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' );