style_loader_tag
style_loader_tag es una API oficial de WordPress, consulte la documentación: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Filtra la etiqueta de enlace HTML de un estilo en cola.
Primero ponga en cola su hoja de estilo, consulte la documentación: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );
El $handle
es lo 'font-awesome-5'
que hago null
para que no haya número de versión. De esta manera se almacenará en caché.
Str_replace
simple Un str_replace simple es suficiente para lograr lo que desea, vea el ejemplo a continuación
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 );
Agregar diferentes atributos
A continuación, un ejemplo para agregar diferentes atributos a (múltiples) hojas de estilo diferentes
function add_style_attributes( $html, $handle ) {
if ( 'font-awesome-5' === $handle ) {
return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
}
if ( 'another-style' === $handle ) {
return str_replace( "media='all'", "media='all' integrity='blajbsf' example", $html );
}
if ( 'bootstrap-css' === $handle ) {
return str_replace( "media='all'", "media='all' integrity='something-different' crossorigin='anonymous'", $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'add_style_attributes', 10, 2 );
Agregue atributos a todos los estilos
Debajo de un ejemplo para agregar los mismos atributos a más de una hoja de estilos
function add_attributes_to_all_styles( $html, $handle ) {
// add style handles to the array below
$styles = array(
'font-awesome-5',
'another-style',
'bootstrap-css'
);
foreach ( $styles as $style ) {
if ( $style === $handle ) {
return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
}
}
return $html;
}
add_filter( 'style_loader_tag', 'add_attributes_to_all_styles', 10, 2 );
script_loader_tag
También me gustaría explicar el script_loader_tag, porque esto también es útil, pero esta API funciona en combinación con wp_enqueue_script .
La API script_loader_tag es casi la misma, solo algunas pequeñas diferencias, consulte la documentación: https://developer.wordpress.org/reference/hooks/script_loader_tag/
apply_filters( 'script_loader_tag', $tag, $handle, $src )
Filtra la etiqueta de script HTML de un script en cola.
Debajo de un ejemplo para diferir un solo script
function add_defer_jquery( $tag, $handle ) {
if ( 'jquery' === $handle ) {
return str_replace( "src", "defer src", $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_jquery', 10, 2 );
Debajo de un ejemplo para diferir más de un script
function add_defer_attribute( $tag, $handle ) {
// add script handles to the array below
$scripts_to_defer = array(
'jquery',
'jquery-migrate',
'bootstrap-bundle-js'
);
foreach ( $scripts_to_defer as $defer_script ) {
if ( $defer_script === $handle ) {
return str_replace( "src", "defer src", $tag );
}
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
Así que he explicado las API style_loader_tag
y script_loader_tag
. Y di algunos ejemplos para ambas API. Espero que esto sea útil para mucha gente. Tengo experiencia con ambas API.
ACTUALIZACIÓN
@CKMacLeod Gracias por su actualización, esto aclara las cosas. Principalmente estamos en la misma página. Como dije, soy un desarrollador de WordPress y si desea publicar un tema y / o complemento en https://wordpress.org , está esencialmente obligado a cumplir con los " Estándares de codificación de WordPress " o simplemente rechazarán su tema y / o complemento.
Es por eso que animo a los desarrolladores a usar "la forma de WordPress". Entiendo que a veces no hay diferencias, pero también es conveniente. Como usted mismo dijo, podría descargar Font Awesome e incluirlo en su tema y / o complemento, de esta manera solo necesitaría eliminar la función style_loader_tag y modificar su función wp_enqueue_style.
Y una última cosa, en el pasado (hace 5 años), algunos complementos de almacenamiento en caché, combinación y minificación no funcionaron y la mayoría de las veces descubrí por qué los desarrolladores que crearon el tema simplemente pusieron las cosas en la cabeza en el tema y / o los repitió. La mayoría de los complementos de almacenamiento en caché, que también (la mayoría de las veces) ofrecen opciones para combinar, minimizar y retrasar la ejecución de los scripts, se volvieron más inteligentes y mejores para detectar códigos incorrectos y solucionarlos. Pero esto no es preferido. Es por eso que animo a las personas a codificar con estándares / convenciones en mente.
Como desarrollador, siempre debe tener en cuenta lo que la gente podría hacer con su código y tener en cuenta la compatibilidad. Entonces, no tomar la solución fácil sino la mejor solución óptima. Espero haber aclarado mi punto de vista.
EDITAR
@CKMacLeod Gracias por el debate (técnico), espero que se den cuenta de lo importante que es esto (usando las API de WordPress en su propio desarrollo). Nuevamente, he estado buscando e incluso si miro las preguntas frecuentes de los complementos de minify más populares, generalmente veo esto de una forma u otra, por ejemplo:
Pregunta: ¿Por qué algunos de los archivos CSS y JS no se fusionan?
Respuesta: El complemento solo procesa archivos JS y CSS en cola usando el método oficial de API de WordPress:
https://developer.wordpress.org/themes/basics/incincluyendo-css-javascript/
-así como archivos del mismo dominio (a menos que se especifique en la configuración).
Ver preguntas frecuentes: https://wordpress.org/plugins/fast-velocity-minify/