¿Cómo agregar un atributo adicional al enlace de la hoja de estilo?

4

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?

    
pregunta Anna Oleksiuk 06.07.2016 - 13:38

2 respuestas

4

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;
}
    
respondido por el bravokeyl 06.07.2016 - 14:55
0

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 );
    
respondido por el Remzi Cavdar 24.11.2018 - 09:01

Lea otras preguntas en las etiquetas