WordPress 使用 add_filter 更輕鬆的 CSS enqueue_style 來改變相關屬性

問題描述

我想要做的是使用 less css 與 Wordpress 。

您應該將 rel 屬性設定為’stylesheet/less’ 來連結到您的.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);

最佳解決方案

是的，最終樣式連結輸出透過 style_loader_tag 過濾器。

參考文獻

• LESS CSS enqueue_style with add_filter to change rel attribute

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。