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

Respuestas:

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