MENOS CSS enqueue_style com add_filter para alterar o atributo rel

8

O que estou tentando fazer é usar menos css com o Wordpress.

Você deveria vincular seus arquivos .less com o atributo rel definido como 'stylesheet / less'. Mas não consigo descobrir como alterar o código que o enfileiramento_style gera.

Existe uma maneira de aplicar um filtro e afetar a saída?

Edição: Se alguém está curioso sobre como eu acabei fazendo isso funcionar, aqui está o trecho 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
fonte

Por que você deseja carregar uma folha de estilo .less? Eles são mais utilizados no processo de desenvolvimento, em seguida, exportados para CSS normal, o que eu não acho que é o seu caso, porque você está perguntando como fazê-lo funcionar com enqueue_style :)

— onetrickpony

Eu os converto para css no processo de compilação. Você está certo, isso é estritamente apenas para fins de desenvolvimento.

— cbaigorri

Obrigado por postar o snippet de código, pois isso resolveu meus problemas. Eu havia encontrado um script semelhante em outro lugar, mas ele não funcionou.

— Scotts

Eu adicionei "\ r \ n" ao final do valor da tag $, pois ele estava juntando linhas no meu HTML. $tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n";

— Jnthnclrk

5

Sim, a saída final do link de estilo é passada pelo style_loader_tagfiltro.

— Rarst
fonte

2

Eu criei uma função que usa o método query () da classe WP_Dependancies. Além disso, ele não regenera a saída, mas apenas reescreve as partes necessárias.

A função acessa o objeto global $ wp_styles e executa uma consulta para obter o objeto da folha de estilo. Com o regex, o src é verificado se contém um arquivo .less e, se isso for verdade, o atributo rel é modificado de acordo. Além disso, na minha função, substituí o sufixo -css no ID por um sufixo -less, basta remover esta linha se você não gostar.

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
fonte

0

mudar rel=stylesheetpara rel=stylesheet/lessna $tagdefinição .. também rel=alternate stylesheet/less, não funciona ..

— user32359
fonte

2

"Esta resposta foi automaticamente sinalizada como de baixa qualidade por causa de seu tamanho e conteúdo", o que tenho certeza que você não deseja. Você pode adicionar uma explicação da sua solução e explicar por que você acha que ela resolverá o problema.

— S_ha_dum

-1

Obrigado pela sua resposta. Não funcionou para mim até que eu coloquei o eco no lugar do 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
fonte

11

Isso não parece certo, os filtros devem retornar absolutamente a saída; caso contrário, você está quebrando a cadeia de filtros e estragando tudo.

— Rarst