Sorun şu ki , CSS'nin PHP aracılığıyla bir sayfaya etkili bir şekilde eklenip eklenmediğini kontrol etmenin imkansız olduğundan eminim : CSS tarayıcı tarafından ayrıştırıldı, bu yüzden istemci tarafında ve sunucu tarafında tamamen bir etkisi yok.
Tabii ki, PHP'de CDN'nin duyarlı olup olmadığını kontrol etmek mümkündür ...
seçenek 1
Bir istek gönderin ve HTTP durumu 200 ile yanıt veriyorsa, kullanın. Gibi bir şey:
function font_awesome_css() {
$url = 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
$cdn = wp_remote_get( $url );
if ( (int) wp_remote_retrieve_response_code( $cdn) !== 200 ) {
$url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
}
wp_enqueue_style( 'font-awesome', $url, false );
}
biri HTTP kontrolü, diğeri gömülü CSS için 2 HTTP isteği ile sonuçlanır: gerçekten kötü .
seçenek 2
function font_awesome_css() {
$url = 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
$cdn = wp_remote_get( $url );
if ( (int) wp_remote_retrieve_response_code( $cdn ) === 200 ) {
$css = wp_remote_retrieve_body( $cdn );
add_action( 'wp_head', function() use( $css ) {
$absolute = "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/";
$css = str_replace( "../fonts/", $absolute, $css );
echo '<style type="text/css">' . $css . '</style>';
} );
} else {
$url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
wp_enqueue_style( 'font-awesome', $url, false );
}
}
Bu daha da kötü :
- İş
wp_enqueue_styleakışını mahveder : Bir eklenti Font Awesome eklerse, 2 kez eklenir.
- HTTP isteklerinin sayısı aynıdır, ancak normalde 2 istek paralel olarak çalışır , bu nedenle ilk istek yanıtını beklemesi gerektiğinden sayfanın PHP nesli yavaşlar.
- Bu, tarayıcının CSS'yi önbelleğe almasını da engeller, bu nedenle farklı stillerde aynı stili kullanırsanız, ziyaret edilen her sayfada CDN isteğini zorlarsınız. Normal iş akışını kullanırken, ilk CSS'den sonraki sayfalar önbellekten alınır.
Gerçekten, yok evde bunu.
Asıl önemli olan PHP'yi kullanarak CDN isteğini kontrol edebilmeniz, ancak CSS'yi doğrulayamamanızdır, bu nedenle tüm çabalarınız daha iyi yerine daha kötü performansla sonuçlanır.
Saygılarımızla, sizinki herkese açık bir temaysa, kullanıcılara bir CDN seçmeleri için bir yol sağlayan yalnızca yerel kopyayı kullanmanızı öneririz:
if ( ! function_exists( 'font_awesome_css' ) ) {
function font_awesome_css() {
$_url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
$url = apply_filters( 'font_awesome_css_url', $_url );
wp_enqueue_style( 'font-awesome', $url, false );
}
}
Böylece kullanıcılar alt temayı kullanarak işlevi tamamen geçersiz kılabilir 'font_awesome css_url've URL'yi değiştirmek için filtreyi de kullanabilir .
Ayrıca bazı üst düzey barındırma sağlayıcılarının yerel varlıkları otomatik olarak CDN'ye dönüştürdüğünü ve CDN'ye her şeye izin veren eklentiler olduğunu düşünün ; halka açık bir temanın CDN'yi hiç kullanmamasının nedeni budur.
Tema kendinizse, bir seçim yapın. En ünlü CDN'lerin çalışmama süresinin çok düşük olduğunu düşünün (ve cdstperf.com'a göre bootstrapcdn en güvenilir olanlardan biridir ). Barındırma hizmetinizin bootstrapcdn'den% daha büyük bir kesintiye sahip olduğundan eminim, bu yüzden insanların sitenizi hiç görmemesi, kırık simgelerle görmekten daha fazla.
Kirli yol
Söylendiği gibi, PHP CSS'yi kontrol edemez, çünkü CSS oluşturma istemci tarafında olur, ancak istemci tarafı kontrolünü kullanabilirsiniz: JavaScript.
İlk CDN kullanarak CSS gömme:
function font_awesome_css() {
$url = '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
wp_enqueue_style( 'font-awesome', $url, false );
}
Bundan sonra, altbilginize biraz JavaScript ekleyin:
/*
Normally the JS should be properly enqueued and the URL
passed via wp_enqueue_script, but this is a proof of concept,
more than real code.
*/
add_action( 'wp_footer', function() {
$cssurl = get_template_directory_uri() . '/css/';
?>
<span id="facheck" data-cssuri="<?php echo $cssurl; ?>" class="fa" style="display:none">
</span>
<script>
jQuery(document).ready(function($) {
var $check = $('#facheck');
if ( $check.css('fontFamily') !== 'FontAwesome' ) {
// Font Awesome not loaded!
// Remove current CSS link
$('#font-awesome-css').remove;
// Add the local version
var local = '<link rel="stylesheet" type="text/css" href="' +
$check.data('cssuri') + // This is the theme CSS folder URL
'font-awesome/css/font-awesome.min.css" />';
$('head').append( local );
}
});
</script>
<?php
});
Bu kod, sayfa yüklendiğinde çalışır ve 'fa' sınıfına sahip altbilgiye eklenen görünmez yayılma alanının font-family özelliğinin 'FontAwesome' olarak ayarlanıp ayarlanmadığını denetler. Bu, Font Awesome tarafından ayarlanır, bu yüzden doğru değilse, CSS'nin yüklü olmadığı anlamına gelir. Böyle bir durumda kod, yerel CSS'yi başlığa eklemek için JavaScript kullanır.
(Bu kodu test etmek wp_enqueue_styleiçin yanlış bir CDN URL'si yerleştirebilir ve ne olacağını görebilirsiniz)
Bu nedenle, nadiren bir CDN mevcut değilse, tüm stiller beklendiği gibi gösterilir (bazı milisaniyeler için kullanıcılar 'kırık' CSS simgeleri görür, çünkü sayfa yüklendikten sonra CSS eklenir).
Şimdi, CDN'lerin çok güvenilir olduğunu düşünürsek, kırık simgeleri görecek insanların% 1'inden azı için bu hack yapmaya değer mi? Bu soruyu cevaplamak size kalmış.
is_readable($cdnPath)?