Siguiendo el consejo de Keith Clarks , me gustaría cargar mis fuentes de forma asíncrona. . Intento lograr eso agregando:
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\'');
a mi archivo scripts.php , pero aparentemente este argumento no está bien tomado por esa función, porque no hay un atributo onload. ¿Qué tan bien puedo hacer eso en WordPress?
Podemos usar el filtro style_loader_tag para filtrar el enlace que se está imprimiendo.
Aquí está el 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);
Aquí, el identificador $ del enlace para el que desea agregar el atributo es font-awesome , por lo tanto, si lo maneja, puede reemplazar font-awesome-css con información adicional.
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;
}
Realmente entiendo a los dos, pero me gustaría señalar que siguiendo Keith Clark's El consejo es simplemente seguir otra mala práctica. También entiendo que esto se solicita y responde en 2016 y que la mayoría de las cosas cambian para bien o para mal.
Si necesita retrasar una hoja de estilo, le recomendaría lo siguiente:
// 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' );
Integrity and crossorigin
Si agrega Font Awesome 5 externamente, también recomendaría el uso de integridad y crossorigin , vea mi otra respuesta para una descripción más detallada sobre la adición de atributos: ¿Cómo agregar crossorigin e integridad a wp_register_style? (Fuente impresionante 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 );
Lea otras preguntas en las etiquetas wp-enqueue-style stylesheet attribute