بارگذاری شرطی فایلهای CSS در صفحات دلخواه وردپرس (Conditional CSS)
با تابع `wp_enqueue_style` درون تگ شرطی `is_page('contact')` یا `is_singular('product')` فایلهای CSS را منحصراً در صفحه مورد نظر لود کنید.
مشخصات فنی و شناسنامه کد (Code Information)
بازبینی: 1405/06/29<?php
/**
* بارگذاری هوشمند و شرطی فایلهای CSS بر اساس نوع صفحه
*/
function bisco_conditional_enqueue_styles() {
// بارگذاری استایل فرم تماس فقط در برگه تماس با ما
if ( is_page( 'contact-us' ) ) {
wp_enqueue_style(
'bisco-contact-style',
get_stylesheet_directory_uri() . '/assets/css/contact.css',
array(),
'1.0.0'
);
}
// بارگذاری استایل گالری فقط در پستهای تکی وبلاگ
if ( is_single() && 'post' === get_post_type() ) {
wp_enqueue_style(
'bisco-single-gallery',
get_stylesheet_directory_uri() . '/assets/css/gallery.css',
array(),
'1.0.0'
);
}
}
add_action( 'wp_enqueue_scripts', 'bisco_conditional_enqueue_styles', 20 );
کد را کجا قرار دهیم؟ (Placement Guide)
کد را در functions.php قرار دهید و اسلاگ برگهها را مطابق سایت خود تنظیم کنید.
این کد چگونه کار میکند؟ (How it Works)
تابع وردپرسی is_page یا is_single ساختار صفحه را میسنجد و تنها در صورت صحیح بودن شرط، استایل را به صف بارگذاری (Queue) میفرستد.
چه زمانی از این کد استفاده کنیم؟ (Use Cases)
در وبسایتهای حرفهای برای حفظ نمره سبز سرعت صفحات اصلی و فرود (Landing Pages).
چه زمانی نباید از این کد استفاده کنیم؟ (Anti-patterns)
برای استایلهای پایه قالب (Global Styles) که در تمام صفحات مشترک هستند.
پیشنیازهای اجرا
وردپرس ۳.۰ به بالا.
نحوه تست و اطمینان از عملکرد
صفحه تماس را باز کنید؛ استایل باید لود شود. سپس صفحه اصلی را باز کنید؛ در تب Network فایل contact.css نباید وجود داشته باشد.
نحوه بازگردانی سریع (Rollback)
توابع شرطی را از functions.php بردارید.
خطاهای رایج و راهحل رفع
استفاده از توابع شرطی قبل از اکشن wp_enqueue_scripts (در اکشن init توابع شرطی صفحه به درستی مقداردهی نشدهاند).
ملاحظات و نکات امنیتی
استفاده از get_stylesheet_directory_uri برای ارجاع امن به مسیر چایلدتم.
تاثیر بر سرعت و پرفورمنس
کاهش حجم DOM و حذف صدها کیلوبایت CSS بلااستفاده (Unused CSS) از دید آزمونهای گوگل.