Estou tentando desenvolver um tema do Wordpress e descobrir como fornecer um fallback local para o Font Awesome se a CDN falhar ou se eu desenvolver o meu tema em um servidor local sem conexão à Internet.
A solução que tenho em mente é algo como isto (pseudo-código):
if ( $CDN_IS_AVAILABLE ) {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', false );
} else {
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css', false, '4.0.3' );
}
Obrigado!
wp_enqueue_style()
e como trabalhar com isso está no tópico.Respostas:
O problema é que tenho certeza de que é impossível verificar se o CSS é efetivamente adicionado a uma página via PHP: o CSS é analisado pelo navegador, portanto, do lado do cliente, e não tem nenhum efeito no servidor.
Obviamente, no PHP é possível verificar se o CDN é responsivo ou não ...
Opção 1
Envie uma solicitação e, se ela responder com o status HTTP 200, use-a. Algo como:
isso resulta em 2 solicitações HTTP, uma para a verificação e a segunda para CSS incorporado: muito ruim .
opção 2
Isso é ainda pior :
wp_enqueue_style
fluxo de trabalho: se um plug-in adicionar Font Awesome, ele será adicionado 2 vezes.Então, realmente, não faça isso em casa.
O que realmente importa é que, usando PHP, você pode verificar a solicitação da CDN, mas não a CSS, para que todos os seus esforços acabem com desempenho pior, em vez de melhor.
Atenciosamente, se o seu for um tema público, sugiro que você use apenas a cópia local, fornecendo aos usuários uma maneira de escolher uma CDN:
Assim, os usuários podem substituir completamente a função usando um tema filho e também podem usar o
'font_awesome css_url'
filtro para alterar o URL.Considere também que alguns provedores de hospedagem de ponta convertem automaticamente ativos locais em CDN e existem plugins que permitem à CDN tudo; esse é o motivo pelo qual um tema público não deve usar a CDN.
Se o tema é para você, faça uma escolha. Considere que as CDNs mais famosas têm um% muito baixo de tempo de inatividade (e o bootstrapcdn é um dos mais confiáveis, de acordo com o cdnperf.com ). Tenho certeza de que sua hospedagem tem um% de tempo de inatividade maior que o bootstrapcdn, para que as pessoas tenham mais probabilidade de não ver seu site, do que de ícones quebrados.
O caminho sujo
Como dito, o PHP não pode verificar o CSS, porque a renderização do CSS ocorre no lado do cliente, mas você pode usar a verificação no lado do cliente: JavaScript.
Primeiro incorpore CSS usando CDN:
Depois disso, adicione um pouco de JavaScript ao rodapé:
Esse código é executado quando a página é carregada e verifica se a extensão invisível adicionada ao rodapé com a classe 'fa' tem a propriedade da família de fontes definida como 'FontAwesome'. Isso é definido pelo Font Awesome, portanto, se não for verdade, significa que o CSS não está carregado. Se isso acontecer, o código usa JavaScript para anexar o CSS local à cabeça.
(Para testar esse código, você pode incorporar através de
wp_enqueue_style
um URL CDN errado e ver o que acontece)Portanto, no caso raro de uma CDN não estar disponível, todos os estilos serão mostrados conforme o esperado (por alguns milissegundos, os usuários verão ícones CSS "quebrados", porque o CSS é adicionado após o carregamento da página).
Agora, considerando que as CDNs são muito confiáveis, vale a pena fazer esse truque para <1% das pessoas que verão ícones quebrados? A resposta a esta pergunta é deixada para você.
fonte
Uma verificação do lado do servidor também não é à prova de balas. Se o seu servidor estiver localizado na Califórnia, seu cheque usará o Data Center da CDN da Califórnia. Se seu usuário estiver localizado na China, provavelmente usará um Data Center completamente diferente. Pelo menos, é assim que acho que funciona.
De qualquer forma, aqui está uma solução jquery aprimorada:
http://jsfiddle.net/skibulk/fp1gqnyc/
fonte
fontFamily
.