समस्या यह है कि मुझे पूरा यकीन है कि यह जांचना असंभव है कि क्या सीएसएस को PHP के माध्यम से एक पृष्ठ पर प्रभावी ढंग से जोड़ा जाता है: CSS ब्राउज़र द्वारा पार्स किया जाता है, इसलिए क्लाइंट साइड, और सर्वर साइड पर पूरी तरह से कोई प्रभाव नहीं पड़ता है।
बेशक, PHP में यह जांचना संभव है कि सीडीएन उत्तरदायी है या नहीं ...
विकल्प 1
एक अनुरोध भेजें और अगर यह HTTP स्थिति 200 के साथ प्रतिक्रिया करता है, तो इसका उपयोग करें। कुछ इस तरह:
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 );
}
2 HTTP अनुरोधों में परिणाम, चेक के लिए एक, एम्बेडेड सीएसएस के लिए दूसरा: वास्तव में खराब ।
विकल्प 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 );
}
}
यह और भी बुरा है :
- यह
wp_enqueue_styleवर्कफ़्लो को बर्बाद कर देता है: यदि कोई प्लगइन फ़ॉन्ट विस्मयकारी जोड़ता है, तो इसे 2 बार जोड़ा जाएगा।
- HTTP अनुरोधों की संख्या समान है, हालांकि आम तौर पर 2 अनुरोध समानांतर में चलते हैं , इसलिए इस तरह से पृष्ठ की PHP पीढ़ी धीमी हो जाती है क्योंकि इसे पहले अनुरोध की प्रतिक्रिया की प्रतीक्षा करने की आवश्यकता होती है।
- यह ब्राउज़र को सीएसएस को कैशिंग करने से भी रोकता है, इसलिए यदि आप एक ही शैली का उपयोग विभिन्न पृष्ठों में करते हैं, तो आप विज़िट किए गए प्रत्येक पृष्ठ पर सीडीएन अनुरोध को मजबूर करते हैं। सामान्य वर्कफ़्लो का उपयोग करते समय, पहले सीएसएस के बाद वाले पेज कैश से लिए जाते हैं।
तो, वास्तव में, घर पर ऐसा मत करो।
वास्तव में क्या मायने रखता है कि PHP का उपयोग करके आप सीडीएन अनुरोध की जांच कर सकते हैं, लेकिन सीएसएस को सत्यापित नहीं कर सकते, इसलिए आपके सभी प्रयास बेहतर प्रदर्शन के बजाय बदतर प्रदर्शन में समाप्त हो जाते हैं।
निष्ठा से, यदि आपका सार्वजनिक विषय है, तो मेरा सुझाव है कि आप केवल स्थानीय प्रतिलिपि का उपयोग करें, उपयोगकर्ताओं को सीडीएन चुनने का एक तरीका प्रदान करें:
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 );
}
}
इसलिए उपयोगकर्ता चाइल्ड थीम का उपयोग करके फ़ंक्शन को पूरी तरह से ओवरराइड कर सकते हैं, और 'font_awesome css_url'URL को बदलने के लिए फ़िल्टर का भी उपयोग कर सकते हैं ।
यह भी विचार करें कि कुछ उच्च-अंत होस्टिंग प्रदाता स्वचालित रूप से सीडीएन वालों को स्थानीय संपत्ति में परिवर्तित करते हैं, और ऐसे प्लगइन्स हैं जो सीडीएन को सभी चीजों की अनुमति देते हैं; यही कारण है कि एक सार्वजनिक विषय को सीडीएन का उपयोग नहीं करना चाहिए।
अगर थीम अपने लिए है, तो चुनाव करें। विचार करें कि सबसे प्रसिद्ध सीडीएन में डाउन टाइम का बहुत कम% है (और cdnperf.com के अनुसार, बूटस्ट्रैप एलसीडी सबसे विश्वसनीय में से एक है )। मुझे पूरा यकीन है कि आपकी होस्टिंग में बूटस्ट्रैप एलसीडी की तुलना में डाउनटाइम% अधिक है, इसलिए लोगों को आपकी साइट को न देखने की अधिक संभावना है, टूटे हुए आइकन के साथ देखने की तुलना में।
गंदा तरीका
जैसा कि कहा गया है, PHP CSS की जाँच नहीं कर सकता है, क्योंकि CSS रेंडरिंग क्लाइंट साइड होती है, लेकिन आप क्लाइंट साइड चेक: जावास्क्रिप्ट का उपयोग कर सकते हैं।
सीडीएन का उपयोग करके पहले सीएसएस एम्बेड करें:
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 );
}
उसके बाद, अपने पाद लेख में कुछ जावास्क्रिप्ट जोड़ें:
/*
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
});
यह कोड तब चलता है जब पृष्ठ लोड होता है और जाँचता है कि अदृश्य स्पैन को 'एफए' के साथ पाद लेख में जोड़ा गया है, फ़ॉन्ट-परिवार की संपत्ति 'फॉन्टएवियस' पर सेट है। यह Font Awesome द्वारा सेट किया गया है, इसलिए यदि यह सच नहीं है, तो इसका मतलब है कि CSS लोड नहीं हुआ है। यदि ऐसा होता है, तो कोड स्थानीय सीएसएस को सिर पर लगाने के लिए जावास्क्रिप्ट का उपयोग करता है।
(इस कोड का परीक्षण करने के लिए आप wp_enqueue_styleएक गलत CDN URL के माध्यम से एम्बेड कर सकते हैं, और देखें कि क्या होता है)
तो, दुर्लभ स्थिति में एक CDN उपलब्ध नहीं है, सभी शैलियों को अपेक्षित रूप से दिखाया जाएगा (कुछ मिलीसेकंड उपयोगकर्ताओं के लिए 'टूटे हुए' CSS आइकन दिखाई देंगे, क्योंकि पृष्ठ लोड होने के बाद CSS जोड़ा गया है)।
अब, यह देखते हुए कि सीडीएन बहुत विश्वसनीय हैं, क्या यह हैक करने के लायक है <1% लोग जो टूटे हुए आइकन देखेंगे? इस प्रश्न का उत्तर देना आपके लिए शेष है।
is_readable($cdnPath)?