بارگذاری نشدن استایل‌های قالب فرزند در وردپرس
فایل style.css قالب فرزند شما بارگذاری نمی‌شود چون وردپرس آن را به‌صورت خودکار enqueue نمی‌کند. شیوه‌نامه قالب فرزند باید به‌صورت دستی در
منتشرشده
فایل style.css قالب فرزند شما بارگذاری نمی‌شود چون وردپرس آن را برایتان enqueue نمی‌کند. شیوه‌نامه قالب فرزند باید به‌صورت دستی در functions.php قالب فرزند ثبت شود، و این enqueue تقریباً همیشه یکی از این دو ایراد را دارد: یا اصلاً وجود ندارد، یا بدون معرفی شیوه‌نامه قالب والد به‌عنوان وابستگی بارگذاری می‌شود، به‌همین دلیل قوانین شما در جای اشتباهی از cascade قرار می‌گیرند و بازنویسی می‌شوند. enqueue را درست کنید تا استایل‌ها برگردند. آن ترفند قدیمی @import که احتمالاً از یک آموزش سال ۲۰۱۳ کپی کرده‌اید، راه‌حل اشتباهی است.
چرا این اتفاق می‌افتد
یک قالب فرزند کلاسیک دو فایل ضروری دارد: یک style.css با یک بلوک هدر که والد را نام می‌برد، و یک functions.php. خط Template: در هدر به وردپرس می‌گوید که قالب‌ها را از کدام والد به ارث ببرد. این تنها کاری است که وردپرس به‌صورت خودکار انجام می‌دهد. هدر را می‌خواند، جایگزینی قالب (template fallback) را برقرار می‌کند، و همین‌جا متوقف می‌شود. هیچ‌وقت style.css قالب فرزند شما را در بخش front-end سایت enqueue نمی‌کند.
از طرف دیگر، قالب والد شیوه‌نامه خودش را از functions.php خودش و با اتصال به هوک wp_enqueue_scripts بارگذاری می‌کند. functions.php قالب فرزند شما اول اجرا می‌شود، بعد functions.php والد، و سپس هر چیزی که روی آن هوک قرار دارد اجرا می‌شود. اگر قالب فرزند شما هیچ‌وقت wp_enqueue_style را برای فایل خودش صدا نزند، مرورگر هرگز آن را درخواست نمی‌کند. صفحه دقیقاً مثل قالب والد خام به نظر می‌رسد، چون واقعاً همان است.
ایراد دوم ظریف‌تر است. شیوه‌نامه قالب فرزند را enqueue می‌کنید، بارگذاری هم می‌شود، اما بازنویسی‌های شما هیچ اثری ندارند. این یک مشکل ترتیب بارگذاری است. وقتی دو قانون specificity برابر داشته باشند، آنی که آخر بارگذاری شود برنده است. اگر CSS قالب فرزند شما پیش از CSS والد بارگذاری شود، در هر تساوی والد برنده می‌شود. آرایه وابستگی (dependency array) در wp_enqueue_style همان چیزی است که ترتیب را تحمیل می‌کند.
یک نکته دیگر که مردم اشتباه می‌کنند: get_template_directory_uri() به پوشه قالب والد اشاره می‌کند، و get_stylesheet_directory_uri() به پوشه قالب فعال (فرزند) اشاره دارد. اگر این دو را جابه‌جا کنید، style.css والد را برای بار دوم enqueue می‌کنید و اصلاً به فایل فرزند دست نمی‌زنید.
راه‌حل، به‌ترتیب
اول، مطمئن شوید واقعاً چه چیزی بارگذاری می‌شود. صفحه خراب را باز کنید، سورس صفحه را ببینید و نام پوشه قالب فرزند خود را جست‌وجو کنید. وردپرس استایل‌های enqueueشده را به‌صورت <link id="handle-css" href="..."> رندر می‌کند — مقدار id همان handle شما به‌علاوه -css است. اگر style.css قالب فرزند شما اصلاً در <head> نباشد، enqueue اجرا نمی‌شود. اگر آنجا باشد اما استایل‌ها اعمال نشوند، مشکل از وابستگی/ترتیب است. همین یک بررسی به شما می‌گوید کدام‌یک از آن دو ایراد را دارید.
دوم، handle واقعی والد را پیدا کنید. بیشتر قالب‌های امروزی (Astra، GeneratePress، قالب‌های Twenty-*) شیوه‌نامه خودشان را از پیش با یک handle مشخص enqueue می‌کنند — astra-theme-css، generate-style-css، twenty-twenty-four-style و غیره. شما به همان رشته دقیق نیاز دارید. قالب والد را grep کنید، یا آن را از روی <link id="...-css"> در سورس صفحه بخوانید (پسوند -css انتهایی را حذف کنید).
سوم، enqueue را بنویسید. برای حالت رایجی که والد از پیش شیوه‌نامه خودش را بارگذاری می‌کند، شما والد را دوباره enqueue نمی‌کنید. فقط قالب فرزند را enqueue می‌کنید و handle والد را به‌عنوان وابستگی فهرست می‌کنید تا مال شما بعد از آن بارگذاری شود:
<?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' )
);
}اگر قالب والد شیوه‌نامه خودش را enqueue نکند (برخی قالب‌های قدیمی‌تر یا مینیمال به @import تکیه می‌کنند)، آن‌وقت هر دو را enqueue کنید و فرزند را وابسته به والد بسازید:
<?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') همان cache-buster شماست. خط Version: را در هدر style.css قالب فرزند بالا ببرید تا مرورگرها فایل را دوباره بگیرند. اگر این را نادیده بگیرید، CSS را ویرایش می‌کنید و قسم می‌خورید که هیچ چیز عوض نمی‌شود، در حالی که فقط کش شده است.
اگر functions.php یک خطای نحوی داشته باشد، کل فایل بی‌سروصدا از کار می‌افتد و هیچ‌کدام از enqueueهای شما اجرا نمی‌شوند — و این دقیقاً مثل «بارگذاری نشدن استایل‌ها» به نظر می‌رسد. WP_DEBUG را روشن کنید، یا debug.log خود را در ابزار رمزگشایی لاگ خطای وردپرس ما جای‌گذاری کنید تا سریع خطای مهلک را پیدا کنید.
چه کارهایی نکنید
از @import استفاده نکنید. توصیه دوران Codex این بود که @import url("../parenttheme/style.css"); را در بالای style.css قالب فرزند قرار دهید. کار می‌کند، اما کند است — مرورگر نمی‌تواند دانلود CSS والد را شروع کند تا زمانی که CSS فرزند را تجزیه (parse) کند، بنابراین دو درخواست به‌جای موازی، پشت‌سرهم اجرا می‌شوند. خود راهنمای رسمی وردپرس سال‌هاست که استفاده از آن را توصیه نمی‌کند. اگر آموزش شما گفته این کار را بکنید، همان آموزش دلیل کند و ناهماهنگ بودن استایل‌های شماست.
handle با نام 'parent-style' را ثابت hardcode نکنید و فایل والد را کورکورانه enqueue نکنید. آن قطعه‌کد معروف Codex دقیقاً همین کار را می‌کند، و برای هر قالبی که از پیش شیوه‌نامه‌اش را با handle متفاوتی ثبت کرده باشد اشتباه است. در نهایت CSS والد را دو بار بارگذاری می‌کنید و وابستگی شما به handleای اشاره می‌کند که ممکن است اصلاً وجود نداشته باشد.
wp_enqueue_style را در سطح بالای functions.php صدا نزنید. این تابع باید داخل یک تابع دیگر که به wp_enqueue_scripts هوک شده اجرا شود. اگر خیلی زود صدا زده شود، هیچ کاری نمی‌کند.
کل functions.php والد را داخل قالب فرزند کپی نکنید. هر دو بارگذاری می‌شوند؛ مال فرزند اول اجرا می‌شود. کپی کردن آن باعث اعلان تکراری توابع و یک خطای مهلک می‌شود.
یک نکته احتیاطی: همه این موارد درباره قالب‌های کلاسیک (مبتنی بر تمپلیت PHP) است. اگر والد شما یک قالب بلوکی (block theme) باشد، استایل‌دهی عمدتاً از طریق theme.json و ویرایشگر سایت جریان می‌یابد و بازنویسی‌های style.css رفتار متفاوتی دارند — من به این حالت کمتر اعتماد می‌کنم و به‌جای فرض این‌که این enqueue راه‌حل است، مستقیماً آن را آزمایش می‌کنم.
هنوز گیر کرده‌اید؟
مطمئن شوید خط Template: در هدر style.css قالب فرزند دقیقاً با نام پوشه والد مطابقت دارد، با حساسیت به بزرگی و کوچکی حروف — نه با نام نمایشی والد. سپس سورس صفحه را دوباره بررسی کنید: handle حاضر است، بعد از والد بارگذاری می‌شود، و رشته کوئری نسخه (version query string) بالا رفته است. اگر <link> آنجاست، آخر بارگذاری می‌شود، و CSS همچنان اعمال نمی‌شود، دیگر مشکل از enqueue نیست — مشکل از specificity است، و راه‌حل به داخل خود قوانین منتقل می‌شود.