style_loader_tag
style_loader_tag एक आधिकारिक WordPress API है, दस्तावेज़ीकरण देखें: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
एक संलग्न शैली के HTML लिंक टैग को फ़िल्टर करता है।
पहले अपनी स्टाइलशीट को संलग्न करें, दस्तावेज़ीकरण देखें: 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 );
$handleहै 'font-awesome-5'
मुझे क्या करना nullहै कि वहाँ कोई संस्करण संख्या तो। इस तरह इसे कैश किया जाएगा।
सरल str_replace
एक साधारण str_replace जो आप चाहते हैं उसे प्राप्त करने के लिए पर्याप्त है, नीचे उदाहरण देखें
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 );
(कई) अलग-अलग स्टाइलशीट में अलग-अलग एट्रीब्यूट्स जोड़ने के लिए एक उदाहरण के नीचे अलग-अलग एट्रीब्यूट्स जोड़ें
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 );
सभी शैलियों में विशेषताएँ जोड़ें
एक उदाहरण के नीचे एक से अधिक शैलियों को एक ही एट्रीब्यूट जोड़ने के लिए
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
मैं script_loader_tag भी समझाना चाहूंगा, क्योंकि यह भी आसान है, लेकिन यह API wp_enqueue_script के साथ मिलकर काम करता है ।
Script_loader_tag API लगभग समान है, केवल कुछ छोटे अंतर हैं, दस्तावेज़ीकरण देखें: https://developer.wordpress.org/reference/hooks/script_loader_tag/
apply_filters( 'script_loader_tag', $tag, $handle, $src )
HTML स्क्रिप्ट टैग की गई स्क्रिप्ट को फ़िल्टर करता है।
एक एकल स्क्रिप्ट को स्थगित करने के लिए एक उदाहरण के नीचे
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 );
एक से अधिक स्क्रिप्ट को टालने के लिए एक उदाहरण के नीचे
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 );
इसलिए मैं दोनों एपीआई समझा दिया है style_loader_tagऔर script_loader_tag। और मैंने एपीआई के दोनों के लिए कुछ उदाहरण दिए हैं मुझे आशा है कि यह बहुत से लोगों के लिए उपयोगी है। मुझे दोनों एपीआई के साथ अनुभव है।
अद्यतन
@CKMacLeod आपके अपडेट के लिए धन्यवाद, यह चीजों को स्पष्ट करता है। हम ज्यादातर एक ही पृष्ठ पर हैं। जैसा कि मैंने कहा, मैं एक वर्डप्रेस डेवलपर हूं और अगर आप https://wordpress.org पर एक थीम और / या प्लगइन प्रकाशित करना चाहते हैं, तो आप अनिवार्य रूप से " वर्डप्रेस कोडिंग मानकों " का पालन करने के लिए मजबूर हैं या वे बस आपका अस्वीकार करेंगे विषय और / या प्लगइन।
इसलिए मैं डेवलपर्स को "वर्डप्रेस तरीके" का उपयोग करने के लिए प्रोत्साहित करता हूं। मैं समझता हूं कि कभी-कभी कोई मतभेद नहीं होते हैं, लेकिन यह भी सुविधा है। जैसा कि आपने खुद कहा था कि आप फॉन्ट को डाउनलोड कर सकते हैं और इसे अपने विषय और / या प्लगइन में शामिल कर सकते हैं, इस तरह से आपको केवल style_loader_tag फ़ंक्शन को निकालना होगा और अपने wp_enqueue_style फ़ंक्शन को संशोधित करना होगा।
और एक आखिरी चीज, अतीत में (5 साल पहले) कुछ कैशिंग, संयोजन और माइनिंग प्लगइन्स काम नहीं करते थे और ज्यादातर बार मुझे पता चलता था कि उन डेवलपर्स ने जो विषय बनाया था, उन्होंने थीम में केवल चीजों को सिर में रखा था। / या उन्हें प्रतिध्वनित किया। अधिकांश कैशिंग प्लगइन्स, जो भी (अधिकांश समय) स्क्रिप्ट के संयोजन, लघुकरण और विलंब निष्पादन के विकल्प प्रदान करते हैं, खराब कोड का पता लगाने और उनके आसपास काम करने में अधिक बेहतर और बेहतर बन गए। लेकिन यह पसंद नहीं किया जाता है। इसलिए मैं लोगों को मन में मानकों / सम्मेलनों के साथ कोड करने के लिए प्रोत्साहित करता हूं।
एक डेवलपर के रूप में, आपको हमेशा यह ध्यान रखना होगा कि लोग आपके कोड के साथ क्या कर सकते हैं और संगतता को ध्यान में रखते हुए। तो आसान समाधान नहीं ले रहा है लेकिन सबसे अच्छा इष्टतम समाधान। मुझे आशा है कि मैंने अपना दृष्टिकोण स्पष्ट कर दिया है।
EDIT
@CKMacLeod (तकनीकी) बहस के लिए धन्यवाद, मुझे उम्मीद है कि आपको एहसास होगा कि यह कितना महत्वपूर्ण है (वर्डप्रेस एपीआई का अपने विकास में उपयोग करना)। फिर से, मैं चारों ओर देख रहा हूं और अब भी अगर मैं सबसे लोकप्रिय मिनीइज़ प्लगइन्स के अक्सर पूछे जाने वाले प्रश्नों को देखता हूं, तो मैं आमतौर पर इसे एक या दूसरे तरीके से देखता हूं, उदाहरण के लिए:
प्रश्न: कुछ सीएसएस और जेएस फाइलों का विलय क्यों नहीं किया जा रहा है?
उत्तर: प्लगइन केवल आधिकारिक वर्डप्रेस एपीआई पद्धति का उपयोग करते हुए जेएस और सीएसएस फाइलों को संसाधित करता है -
https://developer.wordpress.org/themes/basics/including-css-javascript/
-as एक ही डोमेन से फ़ाइलें (जब तक निर्दिष्ट न हो) सेटिंग्स पर)।
FAQ देखें: https://wordpress.org/plugins/fast-velocity-minify/