style_loader_tag
style_loader_tag é uma API oficial do WordPress, consulte a documentação: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Filtra a tag de link HTML de um estilo na fila.
Primeiro enfileire sua folha de estilo, consulte a documentação: 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 );
O $handleé 'font-awesome-5'
eu faço nullpara que não haja número de versão. Dessa forma, ele será armazenado em cache.
Str_replace
simples Um str_replace simples é suficiente para alcançar o que você deseja, veja o exemplo abaixo
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 );
Adicionar atributos diferentes
Abaixo de um exemplo para adicionar atributos diferentes a (várias) folhas 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 );
Adicionar atributos a todos os estilos
Abaixo de um exemplo para adicionar os mesmos atributos a mais de uma folha de estilo
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
Também gostaria de explicar o script_loader_tag, porque isso também é útil, mas essa API funciona em combinação com wp_enqueue_script .
A API script_loader_tag é quase a mesma, apenas algumas pequenas diferenças, consulte a documentação: https://developer.wordpress.org/reference/hooks/script_loader_tag/
apply_filters( 'script_loader_tag', $tag, $handle, $src )
Filtra a tag de script HTML de um script na fila.
Abaixo um exemplo para adiar um único 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 );
Abaixo um exemplo para adiar mais de um 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 );
Então, eu expliquei as APIs style_loader_tage script_loader_tag. E dei alguns exemplos para as duas APIs. Espero que isso seja útil para muitas pessoas por aí. Tenho experiência com as duas APIs.
ATUALIZAÇÃO
@CKMacLeod Obrigado por sua atualização, isso esclarece as coisas. Estamos principalmente na mesma página. Como eu disse, sou desenvolvedor do WordPress e se você deseja publicar um tema e / ou plugin em https://wordpress.org, é essencialmente obrigado a respeitar os " Padrões de codificação do WordPress " ou eles simplesmente rejeitarão seu tema e / ou plugin.
É por isso que incentivo os desenvolvedores a usar "o caminho do WordPress". Entendo que, às vezes, não há diferenças, mas também é conveniente. Como você mesmo disse, pode fazer o download do Font Awesome e incluí-lo no seu tema e / ou plugin, dessa forma, você só precisará remover a função style_loader_tag e modificar a função wp_enqueue_style.
E uma última coisa, no passado (5 anos atrás), alguns plugins de cache, combinação e minificação não funcionavam e, na maioria das vezes, eu descobria por que os desenvolvedores que criaram o tema simplesmente colocaram as coisas na cabeça no tema e / ou ecoou-os. A maioria dos plug-ins de cache, que também (na maioria das vezes) fornece opções para combinar, minimizar e atrasar a execução de scripts, tornou-se mais inteligente e melhor na detecção de códigos ruins e na solução deles. Mas isso não é preferido. É por isso que encorajo as pessoas a codificar com padrões / convenções em mente.
Como desenvolvedor, você sempre precisa levar em consideração o que as pessoas poderiam fazer com seu código e ter em mente a compatibilidade. Portanto, não tomando a solução fácil, mas a melhor solução ideal. Espero ter esclarecido meu ponto de vista.
EDIT
@CKMacLeod Obrigado pelo debate (técnico), espero que você perceba o quanto isso é importante (usando as APIs do WordPress em seu próprio desenvolvimento). Novamente, eu tenho procurado e, mesmo agora, se eu olhar as perguntas frequentes dos plugins de minify mais populares, geralmente vejo isso de uma maneira ou de outra, por exemplo:
Pergunta: Por que alguns dos arquivos CSS e JS não estão sendo mesclados?
Resposta: O plug-in processa apenas arquivos JS e CSS enfileirados usando o método oficial da API do WordPress -
https://developer.wordpress.org/themes/basics/including-css-javascript/,
bem como arquivos do mesmo domínio (a menos que especificado nas configurações).
Consulte as Perguntas frequentes: https://wordpress.org/plugins/fast-velocity-minify/