सीधे कंटेंट पर जाएं
Themes

WordPress Child Theme की Styles लोड नहीं हो रही

आपके child theme की style.css इसलिए लोड नहीं हो रही क्योंकि WordPress इसे आपके लिए enqueue नहीं करता। Child theme की stylesheet को हाथ से register करना पड़ता है, जो कि होता है

Published

आपके child theme की style.css इसलिए लोड नहीं हो रही क्योंकि WordPress इसे आपके लिए enqueue नहीं करता। Child theme की stylesheet को खुद हाथ से child theme की functions.php में register करना पड़ता है, और उस enqueue में लगभग हमेशा दो में से एक bug होता है: या तो वो वहाँ है ही नहीं, या फिर वो parent stylesheet को dependency बताए बिना लोड होती है, जिससे आपके rules cascade में गलत जगह पड़ जाते हैं और override हो जाते हैं। Enqueue ठीक कर दीजिए और styles वापस आ जाती हैं। वो पुराना @import वाला जुगाड़ जो आपने शायद 2013 के किसी tutorial से copy किया था, वो गलत तरीका है।

ऐसा क्यों होता है

एक क्लासिक child theme में दो ज़रूरी फ़ाइलें होती हैं: एक style.css जिसमें header block parent का नाम बताता है, और एक functions.php। Header की Template: line WordPress को बताती है कि templates किस parent से inherit करने हैं। बस यही एक काम WordPress अपने आप करता है। वो header पढ़ता है, template fallback जोड़ देता है, और रुक जाता है। वो कभी भी आपकी child style.css को front end पर enqueue नहीं करता।

उधर parent theme अपनी stylesheet को अपनी functions.php से enqueue करता है, जो wp_enqueue_scripts से hook होती है। आपकी child functions.php पहले चलती है, फिर parent की, फिर उस hook पर सब कुछ fire होता है। अगर आपकी child अपनी खुद की फ़ाइल के लिए कभी wp_enqueue_style call ही नहीं करती, तो browser उसे कभी request ही नहीं करेगा। Page एकदम plain parent theme जैसा दिखता है, क्योंकि असल में वही है।

दूसरी गड़बड़ थोड़ी बारीक है। आप child stylesheet enqueue करते हैं, वो लोड भी होती है, पर आपके overrides कुछ नहीं करते। ये load-order की समस्या है। जब दो rules की specificity बराबर हो, तो जो बाद में लोड होता है वो जीतता है। अगर आपकी child CSS parent से पहले लोड होती है, तो हर बराबरी में parent जीतता है। wp_enqueue_style का dependency array ही order को force करता है।

एक और चीज़ जो लोग गलत करते हैं: get_template_directory_uri() parent theme के folder की ओर इशारा करता है, और get_stylesheet_directory_uri() active (child) theme के folder की ओर। इन दोनों को आपस में बदल दीजिए तो आप parent की style.css दोबारा enqueue कर देते हैं और child की कभी छूती ही नहीं।

फिक्स, क्रम से

सबसे पहले, पुष्टि कीजिए कि असल में क्या लोड हो रहा है। टूटा हुआ page खोलिए, view source कीजिए, और अपने child theme folder का नाम search कीजिए। WordPress enqueue की गई styles को <link id="handle-css" href="..."> के रूप में render करता है — यहाँ id आपका handle और उसके आगे -css होता है। अगर आपकी child style.css <head> में है ही नहीं, तो enqueue चल ही नहीं रही। अगर वो वहाँ है पर styles लागू नहीं हो रहीं, तो ये dependency/order की समस्या है। बस यही एक जाँच बता देती है कि दोनों में से कौन सा bug है।

दूसरा, parent का असली handle ढूँढिए। ज़्यादातर आधुनिक themes (Astra, GeneratePress, Twenty-* वाली themes) पहले से ही अपनी stylesheet किसी खास handle के तहत enqueue करती हैं — astra-theme-css, generate-style-css, twenty-twenty-four-style, वगैरह। आपको वही exact string चाहिए। Parent theme में grep कीजिए, या view source में <link id="...-css"> से पढ़ लीजिए (आखिर का -css हटा दीजिए)।

तीसरा, enqueue लिखिए। उस आम मामले में जहाँ parent पहले से अपनी stylesheet लोड करता है, आप parent को दोबारा enqueue नहीं करते। आप सिर्फ़ child को enqueue करते हैं, और parent का handle dependency के तौर पर देते हैं ताकि आपकी उसके बाद लोड हो:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );

function child_enqueue_styles() {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'astra-theme-css' ), // <-- the parent's REAL handle
        wp_get_theme()->get( 'Version' )
    );
}

अगर parent theme अपनी खुद की stylesheet enqueue नहीं करता (कुछ पुरानी या minimal themes @import पर निर्भर रहती हैं), तो दोनों को enqueue कीजिए, और child को parent पर निर्भर बनाइए:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );

function child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

wp_get_theme()->get('Version') वाला argument आपका cache-buster है। Child की style.css header में Version: line बढ़ाइए और browsers दोबारा fetch कर लेते हैं। इसे छोड़ दीजिए तो आप CSS edit करते रहेंगे और कसम खाएँगे कि कुछ बदल ही नहीं रहा, जबकि असल में वो सिर्फ़ cached है।

अगर functions.php में कोई syntax error है, तो पूरी फ़ाइल चुपचाप मर जाती है और आपका कोई भी enqueue नहीं चलता — और ये बिल्कुल “styles not loading” जैसा ही दिखता है। WP_DEBUG on कीजिए, या अपनी debug.log को हमारे WordPress error log decoder में paste कीजिए ताकि fatal जल्दी पकड़ में आ जाए।

क्या नहीं करना है

@import इस्तेमाल मत कीजिए। Codex वाले ज़माने की सलाह थी कि child style.css के सबसे ऊपर @import url("../parenttheme/style.css"); लगा दो। ये काम तो करता है, पर धीमा है — browser parent CSS download तब तक शुरू नहीं कर सकता जब तक child CSS parse न हो जाए, इसलिए दोनों requests parallel के बजाय series में चलती हैं। WordPress की अपनी handbook सालों से इसके खिलाफ़ सलाह देती आई है। अगर आपके tutorial ने आपसे ये करवाया, तो यही वजह है कि आपकी styles अटपटी लग रही हैं।

Handle 'parent-style' को hardcode करके parent फ़ाइल को आँख मूँदकर enqueue मत कीजिए। मशहूर Codex snippet ठीक यही करता है, और ये किसी भी ऐसी theme के लिए गलत है जो पहले से अपनी stylesheet किसी अलग handle के तहत register करती है। आप parent CSS दो बार लोड कर बैठते हैं और आपकी dependency ऐसे handle की ओर इशारा करती है जो शायद मौजूद ही न हो।

wp_enqueue_style को functions.php के top level पर call मत कीजिए। इसे wp_enqueue_scripts से hook की गई किसी function के अंदर चलना चाहिए। बहुत जल्दी call करने पर वो कुछ नहीं करता।

Parent की पूरी functions.php को child में copy मत कीजिए। दोनों लोड होती हैं; child की पहले चलती है। इसे copy करने से duplicate function declarations बन जाती हैं और fatal error आ जाता है।

एक बात ध्यान रखिए: ये सब क्लासिक (PHP-template) themes के बारे में है। अगर आपकी parent एक block theme है, तो styling ज़्यादातर theme.json और Site Editor के ज़रिए बहती है, और style.css के overrides अलग तरह से behave करते हैं — मैं उस पर कम भरोसा करूँगा और ये मानने के बजाय कि यही enqueue फिक्स है, उसे सीधे test करके देखूँगा।

अब भी अटके हुए हैं?

पुष्टि कीजिए कि child की style.css header की Template: line बिल्कुल parent के folder के नाम से मेल खाती है, case-sensitive — parent के display name से नहीं। फिर view source दोबारा जाँचिए: handle मौजूद है, parent के बाद लोड हो रहा है, version query string बढ़ी हुई है। अगर <link> वहाँ है, सबसे बाद में लोड हो रहा है, और फिर भी CSS लागू नहीं हो रही, तो अब ये enqueue की समस्या नहीं रही — ये specificity की है, और फिक्स अब खुद rules के अंदर चला जाता है।