Remover estilos inline

  • ResueltoModerador almendron

    (@almendron)


    hace 1 mes

    Al observar el código fuente de la página, me encuentro con que Akismet añade lo siguiente:

    <style id='akismet-widget-style-inline-css' type='text/css'>
    ... varios estilos
    </style>

    Lo primero que he hecho así probar con

    /* Desactivar estilos widget askimet */
    function remove_akismet_widget_style() {
        wp_dequeue_style( 'akismet-widget-style-inline-css' );
    }
    add_action( 'wp_enqueue_scripts', 'remove_akismet_widget_style', 100 );

    Pero no funciona.

    Después he encontrado el siguiente código

    // remove Akismet inline style
    add_action( 'wp_print_styles', function() {
        // Remove previous inline style
        wp_styles()->add_data( 'akismet-widget-style', 'after', '' );    
    } );

    que resulta que sí funciona.

    Mi pregunta: ¿por qué no funciona el primer método?

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Moderador Mariano Pérez Caro

    (@mpcdigital)

    hace 1 mes

    La razón por la que tu primer método con wp_dequeue_style() no funciona para eliminar los estilos inline de Akismet es fundamentalmente por cómo WordPress maneja los estilos «inline» en comparación con los archivos de hoja de estilo encolados (<link rel='stylesheet'>).

    Aquí te explico las diferencias clave:

    1. wp_dequeue_style() funciona para estilos encolados (archivos CSS):
      • La función wp_dequeue_style() se utiliza para «desencolar» o remover un archivo CSS que ha sido previamente registrado y encolado con wp_enqueue_style().
      • Cuando un plugin o tema utiliza wp_enqueue_style('mi-estilo', get_template_directory_uri() . '/css/mi-estilo.css');, WordPress añade una etiqueta <link rel='stylesheet' id='mi-estilo-css' ...> al HTML.
      • wp_dequeue_style('mi-estilo') le dice a WordPress que no incluya ese archivo CSS en la salida final.
    2. Estilos inline (<style id='akismet-widget-style-inline-css'>) son diferentes:
      • Los estilos inline como los que Akismet añade (con <style id='akismet-widget-style-inline-css' type='text/css'>) no son «encolados» de la misma manera que los archivos CSS.
      • A menudo, estos estilos inline se añaden directamente al objeto global WP_Styles usando wp_add_inline_style() o wp_styles()->add_data(), adjuntándolos a un «handle» de estilo existente (en este caso, akismet-widget-style).
      • Aunque el ID de la etiqueta <style> pueda parecer similar a un «handle» de encolado (akismet-widget-style-inline-css), wp_dequeue_style() no está diseñado para eliminar directamente el contenido de una etiqueta <style> generada con wp_add_inline_style() o métodos similares que insertan CSS directamente en la cabecera. wp_dequeue_style() solo afecta la carga de archivos CSS.
    3. ¿Por qué funciona el segundo método? El segundo método que encontraste: PHPadd_action( 'wp_print_styles', function() { // Remove previous inline style wp_styles()->add_data( 'akismet-widget-style', 'after', '' ); } ); Funciona porque ataca el problema en su raíz. Te explico:
      • wp_styles(): Esto accede a la instancia global de la clase WP_Styles, que es donde WordPress guarda toda la información sobre los estilos (tanto encolados como inline).
      • add_data( 'akismet-widget-style', 'after', '' ):
        • 'akismet-widget-style' es el «handle» del estilo al que Akismet probablemente está adjuntando su CSS inline (aunque el ID de la etiqueta sea akismet-widget-style-inline-css, el handle subyacente para añadir datos inline suele ser el nombre del estilo principal al que se asocia).
        • 'after' es el «key» que indica que estamos modificando los datos que se adjuntan «después» del estilo encolado (que es donde wp_add_inline_style() típicamente coloca el CSS inline).
        • '' (cadena vacía): Al establecer los datos a una cadena vacía, estás sobrescribiendo el CSS inline que Akismet había añadido a ese handle, efectivamente borrándolo.
      • wp_print_styles Hook: Este hook se ejecuta cuando WordPress está a punto de imprimir los estilos en la sección <head> de la página. Es el momento perfecto para modificar los datos de los estilos antes de que se impriman.

    En resumen:

    wp_dequeue_style() se encarga de evitar que se carguen archivos CSS completos. Los estilos inline, como los de Akismet, se inyectan directamente en la salida HTML, a menudo asociados a un «handle» de un estilo existente, y no se gestionan como archivos separados que puedan ser desencolados. El segundo método funciona porque manipula directamente los datos de estilo almacenados por WordPress antes de que se impriman en la página.

    Moderador almendron

    (@almendron)

    hace 1 mes

    Muchas gracias por la información, Mariano. Algo así suponía, pero no lo tenía claro.

    Un saludo,
    Miguel.

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Debes estar registrado para responder a este debate.

Etiquetas