WordPress के से अधिक की बाजार हिस्सेदारी के साथ दुनिया में सबसे लोकप्रिय सामग्री प्रबंधन प्रणाली (सीएमएस) है 60%.
एक बड़ा समर्थन समुदाय और कई उपलब्ध मुफ्त प्लगइन्स वर्डप्रेस (डब्ल्यूपी) के साथ एक वेबसाइट बनाने को सस्ता बनाते हैं, और इसकी बाजार हिस्सेदारी इतनी बड़ी क्यों है, इसमें महत्वपूर्ण भूमिका निभाती है।
हालाँकि, जैसा कि आप जानते हैं, प्लगइन्स इंस्टॉल करना एक लागत पर आता है।
वे अक्सर आपका नीचा दिखा सकते हैं कोर वेब विटल्स अंक; उदाहरण के लिए, वे अनावश्यक CSS या JS फ़ाइलों को हर उस पृष्ठ पर लोड कर सकते हैं जहाँ उनकी आवश्यकता नहीं है।
इसे ठीक करने के लिए, आपको इसे अपने लिए करने के लिए एक प्रोग्रामर को किराए पर लेने की जरूरत है, एक प्रीमियम प्लगइन खरीदें, या शायद एक छोटे से सीखने के रास्ते पर जाएं और इसे स्वयं करें।
आप हाइब्रिड भी जा सकते हैं और अपने मुद्दों के कुछ हिस्सों को कस्टम कोडिंग और अन्य हिस्सों को प्लगइन्स का उपयोग करके हल कर सकते हैं।
इस लेख का उद्देश्य आपके सीखने के मार्ग में आपकी मदद करना है, और हम आपकी वेबसाइट के तकनीकी SEO को बेहतर बनाने में मदद करने के लिए सबसे आवश्यक वर्डप्रेस हुक को कवर करेंगे।
एक वर्डप्रेस हुक क्या है?
WP में वर्डप्रेस हुक प्रमुख विशेषताएं हैं जो डेवलपर्स को कोर WP फ़ाइलों को संशोधित करने की आवश्यकता के बिना CMS की कार्यक्षमता का विस्तार करने की अनुमति देती हैं – कस्टम संशोधनों को तोड़े बिना थीम या प्लगइन्स को अपडेट करना आसान बनाता है।
वे डेवलपर्स को वर्डप्रेस की कार्यक्षमता बढ़ाने और अपनी साइटों में कस्टम परिवर्तन करने का एक शक्तिशाली तरीका प्रदान करते हैं।
फ़िल्टर हुक क्या है?
हुक फ़िल्टर फ़ंक्शन का उपयोग फ़ंक्शन के आउटपुट को वापस करने से पहले संशोधित करने के लिए किया जाता है। उदाहरण के लिए, आप wp_शीर्षक फिल्टर हुक।
एक्शन हुक क्या है?
एक्शन हुक प्रोग्रामर को WP कोर, प्लगइन्स, या थीम के निष्पादन में एक विशिष्ट बिंदु पर कुछ क्रियाएं करने की अनुमति देते हैं, जैसे कि जब कोई पोस्ट प्रकाशित होती है, या JS और CSS फाइलें लोड होती हैं।
कुछ बुनियादी एक्शन हुक या फिल्टर सीखकर, आप डेवलपर्स को किराए पर लेने की आवश्यकता के बिना कई प्रकार के कार्य कर सकते हैं।
हम निम्नलिखित हुक से गुजरेंगे:
- wp_enqueue_scripts
- wp_head
- script_loader_tag
- Template_redirect
- wp_headers
wp_enqueue_scripts
यह वास्तव में एक्शन हुक है जिसका उपयोग आप निरर्थक CSS या JS फ़ाइलों को उन पृष्ठों पर लोड होने से रोकने के लिए करेंगे जहाँ उनकी आवश्यकता नहीं है।
उदाहरण के लिए, लोकप्रिय मुक्त संपर्क प्रपत्र 7 प्लगइन, जिसकी 5M से अधिक स्थापनाएँ हैं, सभी पृष्ठों पर CSS और JS फ़ाइलों को लोड करता है – जबकि किसी को केवल संपर्क फ़ॉर्म मौजूद होने पर इसे लोड करने की आवश्यकता होती है।
संपर्क पृष्ठ के अलावा अन्य पृष्ठों पर CF7 CSS और JS फ़ाइलों को बाहर करने के लिए, आप नीचे दिए गए कोड स्निपेट का उपयोग कर सकते हैं।
function my_dequeue_script(){
//check if page slug isn't our contact page, alternatively, you can use is_page(25) with page ID, or if it is a post page is_single('my-post')
if ( !is_page('contact') ) {
wp_dequeue_script('google-recaptcha');
wp_dequeue_script('wpcf7-recaptcha');
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'my_dequeue_script', 99 );
कुछ प्रमुख बिंदु हैं; एक्शन हुक प्राथमिकता 99 पर सेट है ताकि यह सुनिश्चित किया जा सके कि हमारा संशोधन क्यू में अंतिम रूप से चलता है।
यदि आप इसे 10 पर सेट करते हैं, तो यह काम नहीं करेगा क्योंकि CF7 एन्क्यू फ़ंक्शन प्राथमिकता 20 का उपयोग करता है।
साथ ही, कोड में, हमने फ़ंक्शन तर्क पहचानकर्ता “संपर्क-फ़ॉर्म -7” के रूप में उपयोग किया; आपको आश्चर्य हो सकता है कि मैंने यह कैसे पाया।
यह काफी सरल और सहजज्ञ है। बस अपने ब्राउज़र के इंस्पेक्ट एलिमेंट टूल का उपयोग करें और लिंक या स्क्रिप्ट टैग की आईडी विशेषता की जांच करें।
-
लेखक का स्क्रीनशॉट, फरवरी 2023
आप तत्व का निरीक्षण करके अपने वेबसाइट स्रोत कोड की जांच कर सकते हैं और किसी भी जेएस या सीएसएस फ़ाइल को हटाना शुरू कर सकते हैं जहां उनकी आवश्यकता नहीं है।
wp_head
इस क्रिया हुक का उपयोग वेबपेज के
अनुभाग में किसी संसाधन JS, CSS फ़ाइलें, या मेटा टैग को जोड़ने के लिए किया जाता है।इस हुक का उपयोग करके, आप हेड सेक्शन में ऊपर-से-तह संसाधनों को लोड कर सकते हैं, जो आपके एलसीपी स्कोर।
उदाहरण के लिए, फ़ॉन्ट प्रीलोडिंगजो कि Google की अनुशंसाओं में से एक है, या लेख के पृष्ठों पर लोगो और चित्रित छवियां हमेशा तह के ऊपर लोड होती हैं – और LCP को बेहतर बनाने के लिए आपको उन्हें पहले से लोड करने की आवश्यकता होती है।
उसके लिए, नीचे दिए गए कोड स्निपेट का उपयोग करें।
function my_preload() {
?>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200..900;1,200..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap"/>
<link rel="preload" as="image" href="https://www.yoursite.com/path-to-logo/image.jpg"/>
<?php if( has_post_thumbnail() ): // check if article has featured image?>
<!-- Featured Image -->
<?php // $featured_image = str_ireplace(array( '.png', '.jpg', '.jpeg'), '.webp', $featured_image ); // enable this if you have webp images. ?>
<?php $featured_image = get_the_post_thumbnail_url( get_the_ID(), 'full' ); ?>
<link rel="preload" as="image" href="<?php echo $featured_image;?>"/>
<?php endif;
}
add_action('wp_head', 'my_preload', 3 );
पहली दो पंक्तियाँ Google फोंट को प्रीलोड करने के लिए हैं, फिर हम लोगो को प्रीलोड करते हैं और जाँचते हैं कि क्या लेख में फीचर्ड इमेज है, फिर फीचर्ड इमेज को प्रीलोड करें।
एक अतिरिक्त नोट के रूप में, आपकी थीम या साइट में वेबप छवियां सक्षम हो सकती हैं; उस स्थिति में, आपको उनका वेबप संस्करण प्रीलोड करना चाहिए।
script_loader_tag
आपने रेंडर-ब्लॉकिंग संसाधनों के बारे में बहुत कुछ सुना है जिसे डेफर या एसिंक्स लोडिंग जावास्क्रिप्ट टैग द्वारा ठीक किया जा सकता है। सुधार के लिए यह महत्वपूर्ण है एफ.सी.पी और एलसीपी.
इस फ़िल्टर क्रिया का उपयोग स्क्रिप्ट टैग के HTML आउटपुट को फ़िल्टर करने के लिए किया जाता है, और आपको अपनी थीम या प्लगइन की JS/CSS फ़ाइलों को async या defer लोड करने के लिए ठीक इसी फ़िल्टर की आवश्यकता होती है।
function my_defer_async_load( $tag, $handle ) {
// async loading scripts handles go here as an array
$async_handles = array('wpcf7-recaptcha', 'another-plugin-script');
// defer loading scripts handles go here as an array
$defer_handles = array('contact-form-7', 'any-theme-script');
if( in_array( $handle, $async_handles) ){
return str_replace( ' src', ' async src', $tag );
}
if( in_array( $handle, $defer_handles ) ){
return str_replace( ' src', ' defer="defer" src', $tag );
}
return $tag;
}
add_filter('script_loader_tag', 'my_defer_async_load', 10, 2);
यह फ़िल्टर दो तर्कों को स्वीकार करता है: HTML टैग, और स्क्रिप्ट हैंडल, जिसका मैंने निरीक्षण तत्व के माध्यम से जांच करते समय ऊपर उल्लेख किया था।
आप यह तय करने के लिए हैंडल का उपयोग कर सकते हैं कि किस स्क्रिप्ट को async या defer लोड करना है।
डिफर या एसिंक्स लोड करने के बाद, यदि आपके पास कोई जेएस त्रुटियां हैं तो हमेशा ब्राउज़र कंसोल के माध्यम से जांचें। यदि आप जेएस त्रुटियां देखते हैं, तो आपको मदद के लिए एक डेवलपर की आवश्यकता हो सकती है, क्योंकि उन्हें ठीक करना सीधा नहीं हो सकता है।
Template_redirect
किस टेम्पलेट को लोड करना है यह निर्धारित करने से पहले इस क्रिया हुक को कॉल किया जाता है। आप प्रतिक्रिया के HTTP स्थिति कोड को बदलने के लिए इसका इस्तेमाल कर सकते हैं।
उदाहरण के लिए, आपके पास अपने आंतरिक खोज क्वेरी पृष्ठों के लिए अजीब वर्ण और/या सामान्य पैटर्न वाले स्पैमी बैकलिंक्स हो सकते हैं।
सर्च इंजन जर्नल में, हम अपने आंतरिक खोज पृष्ठों की ओर इशारा करते हुए स्पैमी बैकलिंक्स के आदी हैं जो कोरियाई में हैं – और हमने अपने सर्वर लॉग्स से सीखा है कि Googlebot उन्हें गहन रूप से क्रॉल कर रहा था।
लेखक का स्क्रीनशॉट, फरवरी 2023वर्डप्रेस डिफॉल्ट रिस्पांस कोड 404 नहीं मिला है, लेकिन इसे फेंकना बेहतर है 410 Google को यह बताने के लिए कि वे हमेशा के लिए चले गए हैं, इसलिए यह उन्हें क्रॉल करना बंद कर देता है।
function my_410_function(){
if( is_search() ) {
$kw = $_GET['s'];
// check if the string contains Korean characters
if (preg_match('/[\x{AC00}-\x{D7AF}]+/u', $kw)) {
status_header(410, 'Not Found');
}
}// end of is_search
}
add_action( 'template_redirect', 'my_410_function', 10 );
हमारे मामले में, हम जानते हैं कि हमारे पास कोरियाई सामग्री नहीं है, यही वजह है कि हमने अपनी स्थिति को इस तरह बनाया है।
लेकिन आपके पास कोरियाई में अंतर्राष्ट्रीय सामग्री हो सकती है, और शर्तें भिन्न हो सकती हैं।
आम तौर पर, गैर-प्रोग्रामर के लिए, चैटजीपीटी रेगुलर एक्सप्रेशन का उपयोग करके स्थितियां उत्पन्न करने के लिए एक बढ़िया टूल है, जिसका उपयोग आप अपने स्पैम पैटर्न के आधार पर एक if/else स्थिति बनाने के लिए कर सकते हैं जीएससी.
wp_headers
इस क्रिया हुक का उपयोग वर्डप्रेस के HTTP शीर्षलेखों को संशोधित करने के लिए किया जाता है।
जोड़ने के लिए आप इस हुक का उपयोग कर सकते हैं सुरक्षा शीर्षलेख आपकी वेबसाइट प्रतिक्रिया HTTP शीर्षलेखों के लिए।
function my_headers(){
$headers['content-security-policy'] = 'upgrade-insecure-requests';
$headers['strict-transport-security'] = 'max-age=31536000; preload';
$headers['X-Content-Type-Options'] = 'nosniff';
$headers['X-XSS-Protection'] = '1; mode=block';
$headers['x-frame-options'] = 'SAMEORIGIN';
$headers['Referrer-Policy'] = 'strict-origin-when-cross-origin';
$headers['Link'] = '<https://www.yoursite.com/wp-content/uploads/themes/yourtheme/images/logo.jpg>; rel=preload; as=image';
$headers['Link'] = '<https://fonts.gstatic.com>; rel=preconnect; crossorigin';
$headers['Link'] = '</wp-content/uploads/themes/yourtheme/images/logo.webp>; rel=preload; as=image';
return $headers;
}
add_filter( 'wp_headers', 'my_headers', 100 );
सुरक्षा शीर्षलेखों के अलावा, आप किसी भी संसाधन को प्री-कनेक्ट करने या प्रीलोड करने के लिए “लिंक” टैग (जितने चाहें उतने) जोड़ सकते हैं।
मूल रूप से, यह प्रीलोडिंग का एक वैकल्पिक तरीका है, जिसे ऊपर कवर किया गया था।
आप भी जोड़ सकते हैं “एक्स-रोबोट्स-टैग” (जितने आप चाहते हैं) आपकी आवश्यकताओं के आधार पर आपके HTTP शीर्षलेखों में।
निष्कर्ष
प्लगइन्स अक्सर विभिन्न प्रकार के कार्यों को हल करने के उद्देश्य से होते हैं और अक्सर आपकी विशिष्ट आवश्यकताओं को पूरा करने के लिए विशेष रूप से डिज़ाइन नहीं किए जाते हैं।
जिस आसानी से आप वर्डप्रेस कोर को संशोधित कर सकते हैं, वह इसके सबसे खूबसूरत पहलुओं में से एक है – और आप इसे कोड की कुछ पंक्तियों के साथ बदल सकते हैं।
हमने तकनीकी एसईओ को बेहतर बनाने के लिए आपके द्वारा उपयोग किए जा सकने वाले एक्शन हुक पर चर्चा की, लेकिन वर्डप्रेस में एक बड़ी संख्या में एक्शन हुक आप प्लगइन्स के न्यूनतम उपयोग के साथ मूल रूप से वह सब कुछ करने के लिए एक्सप्लोर और उपयोग कर सकते हैं जो आप चाहते हैं।
और अधिक संसाधनों:
विशेष रुप से प्रदर्शित चित्र: ग्राफिक मोज़े / शटरस्टॉक