MENO CSS enqueue_style con add_filter per modificare l'attributo rel

8

Quello che sto cercando di fare è usare meno css con Wordpress.

Dovresti collegarti ai tuoi file .less con l'attributo rel impostato su 'foglio di stile / meno'. Ma non riesco a capire come modificare il codice che output di enqueue_style.

C'è un modo per applicare un filtro e influire sull'output?

EDIT: Se qualcuno è curioso di sapere come ho finito per farlo funzionare, ecco lo snippet di codice:

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

Perché dovresti voler caricare un foglio di stile .less? Sono meglio utilizzati nel processo di sviluppo, quindi esportati nel normale CSS, che non credo sia il tuo caso perché stai chiedendo come farlo funzionare con enqueue_style :)

— onetrickpony

Li converto in CSS nel processo di compilazione. Hai ragione, questo è strettamente a scopo di sviluppo.

— cbaigorri,

Grazie per aver pubblicato lo snippet di codice, poiché ciò ha risolto i miei problemi. Avevo trovato un copione simile altrove, ma non funzionava.

— ScottS,

Ho aggiunto "\ r \ n" alla fine del valore $ tag mentre stava unendo le linee nel mio HTML. $tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n";

— jnthnclrk,

5

Sì, l'output del link di stile finale viene passato attraverso il style_loader_tagfiltro.

— Rarst
fonte

2

Ho creato una funzione che utilizza il metodo query () della classe WP_Dependancies. Inoltre non rigenera l'output, ma riscrive semplicemente le parti necessarie.

La funzione accede all'oggetto $ wp_styles globale ed esegue una query per ottenere l'oggetto foglio di stile. Con regex viene controllato se contiene un file .less e se questo è vero, l'attributo rel viene modificato di conseguenza. Nella mia funzione ho inoltre sostituito il suffisso -css nell'ID con un suffisso -less, rimuovi questa riga se non ti piace.

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

passare rel=stylesheeta rel=stylesheet/lessin $tagdefinizione .. inoltre rel=alternate stylesheet/less, non funziona ..

— user32359
fonte

2

"Questa risposta è stata automaticamente contrassegnata come di bassa qualità a causa della sua lunghezza e contenuto", che sono sicuro che non vorrai. Puoi aggiungere qualche spiegazione della tua soluzione e spiegare perché pensi che risolverà il problema.

— s_ha_dum,

-1

Grazie per la tua risposta. Non ha funzionato per me fino a quando non ho inserito l'eco al posto del ritorno:

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

1

Non sembra giusto, i filtri dovrebbero assolutamente restituire l'output, altrimenti stai rompendo la catena del filtro e rovinando le cose.

— Rarst