KURANG CSS enqueue_style dengan add_filter untuk mengubah atribut rel

8

Apa yang saya coba lakukan adalah menggunakan lebih sedikit css dengan Wordpress.

Anda seharusnya menautkan ke file .less Anda dengan atribut rel diatur ke 'stylesheet / less'. Tapi saya tidak tahu bagaimana cara mengubah kode yang dihasilkan oleh enqueue_style.

Apakah ada cara untuk menerapkan filter dan memengaruhi output?

EDIT: Jika ada yang ingin tahu bagaimana saya akhirnya mendapatkan ini berfungsi, berikut adalah potongan kode:

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
sumber
Mengapa Anda ingin memuat lembar gaya .less? Mereka paling baik digunakan dalam proses pengembangan kemudian diekspor ke CSS normal, yang menurut saya bukan kasus Anda karena Anda bertanya bagaimana membuatnya bekerja dengan enqueue_style :)
onetrickpony
Saya mengonversikannya ke css dalam proses pembuatan. Anda benar, ini hanya untuk tujuan pengembangan saja.
cbaigorri
Terima kasih telah memposting cuplikan kode, karena itu menyelesaikan masalah saya. Saya telah menemukan skrip serupa di tempat lain, tetapi gagal berfungsi.
ScottS
Saya menambahkan "\ r \ n" di akhir nilai $ tag karena bergabung dengan garis dalam HTML saya. $tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n";
jnthnclrk

Jawaban:

5

Yap, keluaran tautan gaya akhir dilewatkan melalui style_loader_tagfilter.

Jarang
sumber
2

Saya membuat fungsi yang menggunakan metode kueri () dari kelas WP_Dependancies. Selain itu tidak meregenerasi output, tetapi hanya menulis ulang bagian yang diperlukan.

Fungsi ini mengakses objek $ wp_styles global dan melakukan kueri untuk mendapatkan objek stylesheet. Dengan regex src diperiksa jika mengandung file .less, dan jika itu benar, atribut rel dimodifikasi sesuai. Dalam fungsi saya, saya selanjutnya mengganti akhiran -css di ID dengan akhiran -less, cukup hapus baris ini jika Anda tidak menyukainya.

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
sumber
0

ubah rel=stylesheetke rel=stylesheet/lessdalam $tagdefinisi .. juga rel=alternate stylesheet/less, tidak bekerja ..

pengguna32359
sumber
2
"Jawaban ini secara otomatis ditandai sebagai berkualitas rendah karena panjang dan isinya", yang saya yakin tidak Anda inginkan. Bisakah Anda menambahkan beberapa penjelasan tentang solusi Anda dan juga menjelaskan mengapa Anda pikir itu akan menyelesaikan masalah.
s_ha_dum
-1

Terima kasih atas jawaban anda. Itu tidak berhasil bagi saya sampai saya menempatkan gema di tempat kembali:

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
sumber
1
Itu tidak terlihat benar, filter harus benar-benar mengembalikan output, jika tidak, Anda memutuskan rantai filter dan mengacaukan semuanya.
Rarst