Como adicionar um atributo extra ao link da folha de estilo?

4

Seguindo conselho de Keith Clarks , gostaria de carregar minhas fontes de forma assíncrona . Eu tento conseguir isso adicionando:

wp_enqueue_style( 'font-awesome', URI . '/fonts/font-awesome/css/font-awesome.min.css' );
wp_style_add_data( 'font-awesome', 'onload', 'if(media!=\'all\')media=\'all\'');

ao meu arquivo scripts.php , mas aparentemente esse argumento não é bem aceito por essa função, porque não há um atributo onload. Como posso fazer isso corretamente no WordPress?

    
por Anna Oleksiuk 06.07.2016 / 13:38

2 respostas

4

Podemos usar o filtro style_loader_tag para filtrar o link que está sendo enviado.

Aqui está o filtro:

$tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle, $href, $media);

Aqui, o link $ handle para o qual você deseja adicionar o atributo é font-awesome , portanto, se o manipulador permitir que você substitua font-awesome-css por informações adicionais.

add_filter('style_loader_tag', 'wpse_231597_style_loader_tag');

function wpse_231597_style_loader_tag($tag){

    $tag = preg_replace("/id='font-awesome-css'/", "id='font-awesome-css' online=\"if(media!='all')media='all'\"", $tag);

    return $tag;
}
    
por bravokeyl 06.07.2016 / 14:55
0

Eu realmente entendo vocês dois, mas eu gostaria de salientar que depois de Keith Clark conselho está apenas seguindo outra prática ruim. Eu também entendo que isso é perguntado e respondido em 2016 e que a maioria das coisas muda para melhor ou para pior.

Se você precisar atrasar uma folha de estilo, recomendo-lhe o seguinte:

// I use get_footer to put my stylesheets in the footer
function add_footer_styles() {
    // Example loading external stylesheet, could be used in both a theme and/or plugin
    wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );

    // Example theme
    wp_enqueue_style( 'font-awesome-5', get_theme_file_uri( '/assets/css/fontawesome.min.css' ), array(), null );

    // Example plugin
    wp_enqueue_style( 'font-awesome-5', plugins_url( '/assets/css/fontawesome.min.css', __FILE__ ), array(), null );
};
add_action( 'get_footer', 'add_footer_styles' );



Integridade e crossorigin
Se você adicionar o Font Awesome 5 externamente, eu também recomendo usar a integridade e crossorigin , veja minha outra resposta para uma descrição mais detalhada sobre como adicionar atributos: Como adicionar crossorigin e integridade ao wp_register_style? (Font Awesome 5)

function add_font_awesome_5_cdn_attributes( $html, $handle ) {
    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }
    return $html;
}
add_filter( 'style_loader_tag', 'add_font_awesome_5_cdn_attributes', 10, 2 );
    
por Remzi Cavdar 24.11.2018 / 09:01