WENIGER CSS enqueue_style mit add_filter, um das rel-Attribut zu ändern

8

Ich versuche, mit CSpress weniger CSS zu verwenden.

Sie sollten eine Verknüpfung zu Ihren .less-Dateien herstellen, wobei das rel-Attribut auf "Stylesheet / Less" gesetzt ist. Aber ich kann nicht herausfinden, wie ich den Code ändern kann, den enqueue_style ausgibt.

Gibt es eine Möglichkeit, einen Filter anzuwenden und die Ausgabe zu beeinflussen?

EDIT: Wenn jemand neugierig ist, wie ich das zum Laufen gebracht habe, hier ist der Code-Ausschnitt:

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
quelle

Warum sollten Sie ein .less-Stylesheet laden wollen? Sie werden am besten im Entwicklungsprozess verwendet und dann in normales CSS exportiert, was meiner Meinung nach nicht der Fall ist, da Sie sich fragen, wie es mit enqueue_style funktioniert :)

— onetrickpony

Ich konvertiere sie im Build-Prozess in CSS. Sie haben Recht, dies dient ausschließlich Entwicklungszwecken.

— Cbaigorri

Vielen Dank, dass Sie das Code-Snippet veröffentlicht haben, da dies meine Probleme behoben hat. Ich hatte anderswo ein ähnliches Skript gefunden, aber es funktionierte nicht.

— ScottS

Ich habe "\ r \ n" am Ende des $ tag-Werts hinzugefügt, als es Zeilen in meinem HTML verband. $tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n";

— jnthnclrk

5

Ja, die endgültige Linkausgabe wird durch den style_loader_tagFilter geleitet.

— Selten
quelle

2

Ich habe eine Funktion erstellt, die die query () -Methode der WP_Dependancies-Klasse verwendet. Außerdem wird die Ausgabe nicht neu generiert, sondern nur die erforderlichen Teile neu geschrieben.

Die Funktion greift auf das globale Objekt $ wp_styles zu und führt eine Abfrage durch, um das Stylesheet-Objekt abzurufen. Mit dem regulären Ausdruck wird der src überprüft, ob er eine .less-Datei enthält, und wenn dies wahr ist, wird das rel-Attribut entsprechend geändert. In meiner Funktion habe ich außerdem das Suffix -css in der ID durch ein Suffix -less ersetzt. Entfernen Sie einfach diese Zeile, wenn es Ihnen nicht gefällt.

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
quelle

0

ändern , rel=stylesheetum rel=stylesheet/lessin $tagDefinition .. auch rel=alternate stylesheet/lessnicht funktioniert ..

— user32359
quelle

2

"Diese Antwort wurde aufgrund ihrer Länge und ihres Inhalts automatisch als minderwertig gekennzeichnet", was Sie sicher nicht wollen. Können Sie eine Erklärung für Ihre Lösung hinzufügen und erklären, warum Sie glauben, dass dies das Problem lösen wird?

— s_ha_dum

-1

Danke für deine Antwort. Es hat bei mir nicht funktioniert, bis ich das Echo anstelle der Rückkehr gesetzt habe:

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
quelle

1

Das sieht nicht richtig aus, Filter sollten unbedingt die Ausgabe zurückgeben, sonst brechen Sie die Filterkette und bringen die Dinge durcheinander.

— Erst