MENOS CSS enqueue_style con add_filter para cambiar el atributo rel

8

Lo que intento hacer es usar menos CSS con Wordpress.

Se supone que debe vincular sus archivos .less con el atributo rel establecido en 'stylesheet / less'. Pero no puedo entender cómo alterar el código que produce enqueue_style.

¿Hay alguna manera de aplicar un filtro y afectar la salida?

EDITAR: si alguien tiene curiosidad sobre cómo terminé haciendo que esto funcione, aquí está el fragmento de código:

function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/\.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
        $handle = $wp_styles->registered[$handle]->handle;
        $media = $wp_styles->registered[$handle]->args;
        $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
        $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
        $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';

        $tag = "<link rel='stylesheet' id='$handle' $title href='$href' type='text/less' media='$media' />";
    }
    return $tag;
}
add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);

filters wp-enqueue-style

— cbaigorri
fuente

¿Por qué querrías cargar una hoja de estilo .less? Ellos son los más utilizados en el proceso de desarrollo luego exportados a CSS normal, lo que no creo es su caso porque usted está preguntando cómo hacer que funcione con enqueue_style :)

— onetrickpony

Los convierto a CSS en el proceso de compilación. Tienes razón, esto es estrictamente solo para fines de desarrollo.

— cbaigorri

Gracias por publicar el fragmento de código, ya que eso resolvió mis problemas. Había encontrado un script similar en otro lugar, pero no funcionó.

— ScottS

Agregué "\ r \ n" al final del valor de la etiqueta $, ya que unía líneas en mi HTML. $tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n";

— jnthnclrk

5

Sí, la salida del enlace de estilo final se pasa a través del style_loader_tagfiltro.

— Rarst
fuente

2

Hice una función que usa el método query () de la clase WP_Dependancies. Además, no regenera la salida, sino que solo reescribe las partes necesarias.

La función accede al objeto global $ wp_styles y realiza una consulta para obtener el objeto de hoja de estilo. Con la expresión regular, se comprueba el src si contiene un archivo .less, y si eso es cierto, el atributo rel se modifica en consecuencia. En mi función, además, reemplacé el sufijo -css en la ID con un sufijo -less, simplemente elimine esta línea si no le gusta.

function allow_less_stylesheets( $style_tag, $handle )
{
    global $wp_styles;

    $obj = $wp_styles->query( $handle );
    if( $obj === false )
    {
        return $style_tag;
    }
    if( !preg_match( '/\.less$/U', $obj->src ) )
    {
        return $style_tag;
    }

    // the current stylesheet is a LESS stylesheet, so make according changes
    $rel = isset( $obj->extra['alt'] ) && $obj->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
    $style_tag = str_replace( "rel='" . $rel . "'", "rel='stylesheet/less'", $style_tag );
    $style_tag = str_replace( "id='" . $handle . "-css'", "id='" . $handle . "-less'", $style_tag );
    return $style_tag;
}

— flixos90
fuente

0

cambiar rel=stylesheeta rel=stylesheet/lessen la $tagdefinición .. También rel=alternate stylesheet/less, no funciona ..

— user32359
fuente

2

"Esta respuesta se marcó automáticamente como de baja calidad debido a su longitud y contenido", lo que estoy seguro de que no desea. ¿Puede agregar alguna explicación de su solución y explicar por qué cree que resolverá el problema?

— s_ha_dum

-1

Gracias por tu respuesta. Sin embargo, no funcionó para mí hasta que puse eco en lugar de retorno:

function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/\.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
        $handle = $wp_styles->registered[$handle]->handle;
        $media = $wp_styles->registered[$handle]->args;
        $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
        $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
        $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';

        $tag = "<link rel='stylesheet' id='$handle' $title href='$href' type='text/less' media='$media' />";
    }
    echo $tag;
}
add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);

— drskullster
fuente

1

Eso no se ve bien, los filtros deberían devolver absolutamente la salida, de lo contrario, está rompiendo la cadena de filtros y arruinando las cosas.

— Rarst