مواد پر جائیں
themes

WordPress چائلڈ تھیم کے اسٹائلز لوڈ نہیں ہو رہے

آپ کے چائلڈ تھیم کی style.css اس لیے لوڈ نہیں ہو رہی کیونکہ WordPress اسے خود اینکیو نہیں کرتا۔ چائلڈ تھیم کی اسٹائل شیٹ کو دستی طور پر رجسٹر کرنا پڑتا ہے، اسی جگہ

شائع شدہ

آپ کے چائلڈ تھیم کی style.css اس لیے لوڈ نہیں ہو رہی کیونکہ WordPress اسے آپ کے لیے خود اینکیو نہیں کرتا۔ چائلڈ تھیم کی اسٹائل شیٹ کو چائلڈ تھیم کی functions.php میں دستی طور پر رجسٹر کرنا پڑتا ہے، اور اس اینکیو میں تقریباً ہمیشہ دو میں سے ایک خرابی ہوتی ہے: یا تو وہ سرے سے موجود ہی نہیں ہوتا، یا وہ پیرنٹ اسٹائل شیٹ کو بطور ڈیپینڈنسی ظاہر کیے بغیر لوڈ ہوتا ہے، جس کی وجہ سے آپ کے رولز کیسکیڈ میں غلط جگہ آ جاتے ہیں اور اوور رائیڈ ہو جاتے ہیں۔ اینکیو ٹھیک کریں اور اسٹائلز واپس آ جائیں گے۔ وہ پرانا @import والا حل جو غالباً آپ نے 2013 کے کسی ٹیوٹوریل سے کاپی کیا تھا، غلط حل ہے۔

یہ کیوں ہوتا ہے

ایک کلاسک چائلڈ تھیم دو لازمی فائلوں پر مشتمل ہوتا ہے: ایک style.css جس کے ہیڈر بلاک میں پیرنٹ کا نام درج ہو، اور ایک functions.php۔ ہیڈر کی Template: لائن WordPress کو بتاتی ہے کہ ٹیمپلیٹس کس پیرنٹ سے وراثت میں لینے ہیں۔ بس یہی ایک کام WordPress خود بخود کرتا ہے۔ وہ ہیڈر پڑھتا ہے، ٹیمپلیٹ فال بیک ترتیب دیتا ہے، اور رک جاتا ہے۔ وہ آپ کی چائلڈ style.css کو فرنٹ اینڈ پر کبھی اینکیو نہیں کرتا۔

دوسری طرف، پیرنٹ تھیم اپنی اسٹائل شیٹ کو اپنی functions.php سے اینکیو کرتا ہے، جو wp_enqueue_scripts سے ہک ہوتی ہے۔ آپ کی چائلڈ functions.php پہلے چلتی ہے، پھر پیرنٹ کی، پھر اس ہک پر موجود ہر چیز فائر ہوتی ہے۔ اگر آپ کی چائلڈ اپنی فائل کے لیے کبھی wp_enqueue_style کال ہی نہ کرے، تو براؤزر اسے کبھی ریکویسٹ نہیں کرتا۔ صفحہ خام پیرنٹ تھیم جیسا دکھتا ہے کیونکہ دراصل وہ بالکل یہی ہوتا ہے۔

دوسری خرابی زیادہ باریک ہے۔ آپ چائلڈ اسٹائل شیٹ اینکیو کرتے ہیں، وہ لوڈ بھی ہوتی ہے، لیکن آپ کے اوور رائیڈز کچھ نہیں کرتے۔ یہ لوڈ آرڈر کا مسئلہ ہے۔ جب دو رولز کی اسپیسیفسٹی برابر ہو، تو وہی جیتتا ہے جو آخر میں لوڈ ہوتا ہے۔ اگر آپ کی چائلڈ CSS پیرنٹ کی CSS سے پہلے لوڈ ہو، تو ہر ٹائی میں پیرنٹ جیتتا ہے۔ wp_enqueue_style پر موجود ڈیپینڈنسی اَرے ہی وہ چیز ہے جو ترتیب کو مجبور کرتی ہے۔

ایک اور چیز جس میں لوگ غلطی کرتے ہیں: get_template_directory_uri() پیرنٹ تھیم فولڈر کی طرف اشارہ کرتا ہے، اور get_stylesheet_directory_uri() ایکٹو (چائلڈ) تھیم فولڈر کی طرف۔ انہیں الٹا کر دیں تو آپ پیرنٹ کی style.css دوسری بار اینکیو کر بیٹھیں گے اور چائلڈ کی فائل کو کبھی چھوئیں گے ہی نہیں۔

حل، ترتیب سے

سب سے پہلے، تصدیق کریں کہ اصل میں کیا لوڈ ہو رہا ہے۔ خراب صفحہ کھولیں، ویو سورس دیکھیں، اور اپنے چائلڈ تھیم فولڈر کا نام تلاش کریں۔ WordPress اینکیو شدہ اسٹائلز کو <link id="handle-css" href="..."> کی صورت میں رینڈر کرتا ہے — یہاں id آپ کا ہینڈل جمع -css ہوتا ہے۔ اگر آپ کی چائلڈ style.css سرے سے <head> میں موجود ہی نہیں، تو اینکیو نہیں چل رہا۔ اگر وہ موجود ہے مگر اسٹائلز لاگو نہیں ہو رہے، تو یہ ڈیپینڈنسی/آرڈر کا مسئلہ ہے۔ یہی ایک جانچ آپ کو بتا دیتی ہے کہ آپ کو دونوں میں سے کون سی خرابی درپیش ہے۔

دوسرا، پیرنٹ کا اصل ہینڈل تلاش کریں۔ زیادہ تر جدید تھیمز (Astra، GeneratePress، Twenty-* تھیمز) پہلے ہی اپنی اسٹائل شیٹ کو ایک مخصوص ہینڈل کے تحت اینکیو کرتے ہیں — astra-theme-css، generate-style-css، twenty-twenty-four-style، وغیرہ۔ آپ کو وہ بالکل درست اسٹرنگ چاہیے۔ پیرنٹ تھیم میں grep کریں، یا اسے ویو سورس میں موجود <link id="...-css"> سے پڑھ لیں (آخری -css ہٹا دیں)۔

تیسرا، اینکیو لکھیں۔ عام صورت میں جہاں پیرنٹ پہلے ہی اپنی اسٹائل شیٹ لوڈ کرتا ہے، آپ پیرنٹ کو دوبارہ اینکیو نہیں کرتے۔ آپ صرف چائلڈ کو اینکیو کرتے ہیں، اور پیرنٹ کے ہینڈل کو بطور ڈیپینڈنسی درج کرتے ہیں تاکہ آپ کی فائل اس کے بعد لوڈ ہو:

<?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' )
    );
}

اگر پیرنٹ تھیم اپنی اسٹائل شیٹ خود اینکیو نہیں کرتا (کچھ پرانے یا کم سہولت والے تھیمز @import پر انحصار کرتے ہیں)، تو دونوں کو اینکیو کریں، اور چائلڈ کو پیرنٹ پر منحصر بنائیں:

<?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') والا آرگیومنٹ آپ کا کیش بسٹر ہے۔ چائلڈ کی style.css ہیڈر میں Version: لائن بڑھائیں اور براؤزرز فائل دوبارہ فیچ کر لیتے ہیں۔ اسے چھوڑ دیں اور آپ CSS ایڈٹ کرتے رہیں گے اور قسمیں کھاتے رہیں گے کہ کچھ بدل ہی نہیں رہا، حالانکہ وہ محض کیش شدہ ہوتی ہے۔

اگر functions.php میں کوئی سینٹیکس ایرر ہو، تو پوری فائل خاموشی سے مر جاتی ہے اور آپ کا کوئی اینکیو نہیں چلتا — اور یہ بالکل “اسٹائلز لوڈ نہیں ہو رہے” جیسا ہی دکھتا ہے۔ WP_DEBUG آن کریں، یا اپنی debug.log ہمارے WordPress error log decoder میں پیسٹ کریں تاکہ فیٹل کو جلدی پکڑ سکیں۔

کیا نہیں کرنا چاہیے

@import استعمال نہ کریں۔ Codex دور کا مشورہ یہ تھا کہ چائلڈ style.css کے اوپر @import url("../parenttheme/style.css"); رکھ دو۔ یہ کام تو کرتا ہے، مگر سست ہے — براؤزر پیرنٹ CSS ڈاؤن لوڈ کرنا اُس وقت تک شروع نہیں کر سکتا جب تک وہ چائلڈ CSS کو پارس نہ کر لے، لہٰذا دونوں ریکویسٹس متوازی کے بجائے یکے بعد دیگرے چلتی ہیں۔ خود WordPress کی ہینڈ بک برسوں سے اس کے خلاف مشورہ دیتی آئی ہے۔ اگر آپ کے ٹیوٹوریل نے آپ کو یہ کرنے کو کہا تھا، تو وہی ٹیوٹوریل آپ کے اسٹائلز کے بھدے ہونے کی وجہ ہے۔

'parent-style' ہینڈل کو ہارڈ کوڈ کر کے پیرنٹ فائل کو آنکھیں بند کر کے اینکیو نہ کریں۔ مشہور Codex سنیپٹ بالکل یہی کرتا ہے، اور یہ ہر اُس تھیم کے لیے غلط ہے جو پہلے ہی اپنی اسٹائل شیٹ کسی مختلف ہینڈل کے تحت رجسٹر کرتا ہے۔ نتیجتاً آپ پیرنٹ CSS دو بار لوڈ کر بیٹھتے ہیں اور آپ کی ڈیپینڈنسی ایک ایسے ہینڈل کی طرف اشارہ کرتی ہے جو شاید موجود ہی نہ ہو۔

wp_enqueue_style کو functions.php کی ٹاپ لیول پر کال نہ کریں۔ اسے wp_enqueue_scripts سے ہک شدہ کسی فنکشن کے اندر چلنا چاہیے۔ بہت جلدی کال کیا جائے تو یہ کچھ نہیں کرتا۔

پیرنٹ کی پوری functions.php چائلڈ میں کاپی نہ کریں۔ دونوں لوڈ ہوتی ہیں؛ چائلڈ کی پہلے چلتی ہے۔ اسے کاپی کرنے سے ڈپلیکیٹ فنکشن ڈیکلریشنز بنتی ہیں اور فیٹل ایرر آ جاتا ہے۔

ایک احتیاط: یہ سب کچھ کلاسک (PHP-ٹیمپلیٹ) تھیمز کے بارے میں ہے۔ اگر آپ کا پیرنٹ ایک بلاک تھیم ہے، تو اسٹائلنگ زیادہ تر theme.json اور Site Editor کے ذریعے بہتی ہے، اور style.css اوور رائیڈز کا رویہ مختلف ہوتا ہے — میں اس پر کم بھروسہ کروں گا اور یہ فرض کرنے کے بجائے کہ یہی اینکیو حل ہے، اسے براہ راست ٹیسٹ کروں گا۔

پھر بھی پھنسے ہوئے ہیں؟

تصدیق کریں کہ چائلڈ کی style.css ہیڈر کی Template: لائن پیرنٹ کے فولڈر کے نام سے بالکل مطابقت رکھتی ہے، کیس سینسٹیو — نہ کہ پیرنٹ کے ڈسپلے نام سے۔ پھر ویو سورس دوبارہ چیک کریں: ہینڈل موجود ہے، پیرنٹ کے بعد لوڈ ہو رہا ہے، ورژن کویری اسٹرنگ بڑھی ہوئی ہے۔ اگر <link> موجود ہے، سب سے آخر میں لوڈ ہو رہا ہے، اور پھر بھی CSS لاگو نہیں ہو رہی، تو یہ اب اینکیو کا مسئلہ نہیں رہا — یہ اسپیسیفسٹی کا مسئلہ ہے، اور حل خود رولز کے اندر منتقل ہو جاتا ہے۔