LESS CSS enqueue_style с add_filter для изменения атрибута rel


8

То, что я пытаюсь сделать, это использовать меньше CSS с Wordpress.

Вы должны ссылаться на ваши файлы .less с атрибутом rel, установленным на 'stylesheet / less'. Но я не могу понять, как изменить код, который выводит enqueue_style.

Есть ли способ применить фильтр и повлиять на вывод?

РЕДАКТИРОВАТЬ: Если кому-то интересно, как я в конечном итоге заставить это работать, вот фрагмент кода:

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

Почему вы хотите загрузить таблицу стилей .less? Их лучше всего использовать в процессе разработки, а затем экспортировать в обычный CSS, что, как мне кажется, не в вашем случае, потому что вы спрашиваете, как заставить его работать с enqueue_style :)
onetrickpony

Я конвертирую их в css в процессе сборки. Вы правы, это только для целей развития.
cbaigorri

Спасибо за публикацию фрагмента кода, так как это решило мои проблемы. Я нашел похожий сценарий в другом месте, но он не работал.
Скоттс

Я добавил "\ r \ n" в конец значения тега $, так как он соединял строки в моем HTML. $tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n";
jnthnclrk

Ответы:


5

Да, окончательный вывод ссылки стиля проходит через style_loader_tagфильтр.


2

Я сделал функцию, которая использует метод query () класса WP_Dependancies. Кроме того, он не восстанавливает вывод, а просто переписывает необходимые части.

Функция обращается к глобальному объекту $ wp_styles и выполняет запрос для получения объекта таблицы стилей. С помощью регулярного выражения src проверяется, содержит ли он файл .less, и если это так, атрибут rel соответствующим образом изменяется. Кроме того, в своей функции я заменил суффикс -css в идентификаторе на -less, просто удалите эту строку, если она вам не нравится.

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

0

изменить , rel=stylesheetчтобы rel=stylesheet/lessв $tagопределении .. тоже rel=alternate stylesheet/less, не работает ..


2
«Этот ответ был автоматически помечен как некачественный из-за его длины и содержания», что, я уверен, вам не нужно. Можете ли вы добавить некоторые объяснения вашего решения, а также объяснить, почему вы думаете, что это решит проблему.
s_ha_dum

-1

Спасибо за Ваш ответ. Это не сработало для меня, пока я не положил эхо вместо возвращения:

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

1
Это не выглядит правильно, фильтры должны абсолютно возвращать вывод, в противном случае вы нарушаете цепочку фильтров и все портите.
Рарит
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.