تابع wp_enqueue_style در وردپرس

تابع wp_enqueue_style() یکی از مهم‌ترین توابع در وردپرس برای بارگذاری (enqueue) فایل‌های CSS در قالب‌ها و افزونه‌ها است. استفاده از این تابع باعث می‌شود فایل‌های استایل شما به‌صورت استاندارد و بهینه در وردپرس بارگذاری شوند، بدون آنکه با سایر افزونه‌ها یا قالب‌ها تداخل داشته باشند.

چرا باید از wp_enqueue_style() استفاده کنیم؟

در وردپرس نباید فایل‌های CSS را مستقیماً با تگ <link> در هدر قالب فراخوانی کنیم. این کار باعث می‌شود:

• تداخل بین استایل‌ها و افزونه‌ها رخ دهد.
• صفحات بهینه‌سازی نشوند.
• مدیریت نسخه‌ها و وابستگی‌ها دشوار شود.

تابع wp_enqueue_style() به شما امکان می‌دهد تا فایل‌های CSS را با کنترل کامل بارگذاری کنید و وردپرس مدیریت وابستگی‌ها و نسخه‌ها را به عهده بگیرد.

ساختار کلی تابع wp_enqueue_style()

wp_enqueue_style( 
    $handle, 
    $src = '', 
    $deps = array(), 
    $ver = false, 
    $media = 'all' 
);

توضیح پارامترها

مثال ساده از استفاده در قالب وردپرس

function mytheme_enqueue_styles() {
    wp_enqueue_style(
        'mytheme-main-style', 
        get_stylesheet_uri()
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

در این مثال، فایل اصلی style.css قالب بارگذاری می‌شود. هوک wp_enqueue_scripts مخصوص بارگذاری فایل‌های CSS و JS در سمت کاربر (Frontend) است.

افزودن فایل‌های CSS اضافی

function mytheme_add_custom_styles() {
    wp_enqueue_style(
        'bootstrap-css', 
        get_template_directory_uri() . '/assets/css/bootstrap.min.css', 
        array(), 
        '5.3.0', 
        'all'
    );

    wp_enqueue_style(
        'main-style', 
        get_template_directory_uri() . '/assets/css/main.css', 
        array('bootstrap-css'), 
        '1.0.0', 
        'all'
    );
}
add_action('wp_enqueue_scripts', 'mytheme_add_custom_styles');

در این مثال، ابتدا فایل bootstrap.min.css و سپس فایل main.css بارگذاری می‌شود. توجه کنید که main.css وابسته به bootstrap-css تعریف شده است، بنابراین وردپرس ترتیب بارگذاری را رعایت می‌کند.

نکته مهم:

برای جلوگیری از تکرار بارگذاری استایل‌ها، هر فایل باید handle منحصربه‌فرد داشته باشد.

مدیریت نسخه‌گذاری برای جلوگیری از کش (Cache)

یکی از چالش‌های توسعه‌دهندگان، عدم به‌روزرسانی استایل‌ها در مرورگر کاربران به‌دلیل کش شدن فایل CSS است. با استفاده از پارامتر $ver می‌توان این مشکل را حل کرد.

function theme_versioned_style() {
    wp_enqueue_style(
        'custom-style',
        get_template_directory_uri() . '/css/custom.css',
        array(),
        filemtime(get_template_directory() . '/css/custom.css')
    );
}
add_action('wp_enqueue_scripts', 'theme_versioned_style');

در این کد، از تابع filemtime() برای دریافت زمان آخرین تغییر فایل استفاده شده است. این مقدار به عنوان نسخه استایل تنظیم می‌شود، بنابراین اگر فایل تغییر کند، مرورگر نسخه جدید را دانلود می‌کند.

بارگذاری استایل‌ها در بخش مدیریت (Admin Panel)

اگر می‌خواهید CSS مخصوص داشبورد مدیریت وردپرس اضافه کنید، باید از هوک admin_enqueue_scripts استفاده کنید.

function my_admin_styles() {
    wp_enqueue_style(
        'admin-style',
        get_template_directory_uri() . '/admin/admin-style.css',
        array(),
        '1.0.0'
    );
}
add_action('admin_enqueue_scripts', 'my_admin_styles');

این روش تضمین می‌کند که استایل فقط در بخش مدیریت وردپرس بارگذاری شود و روی صفحات عمومی تأثیر نگذارد.

غیرفعال کردن یا حذف یک استایل خاص

گاهی لازم است استایل افزونه‌ای را حذف کنید. برای این کار از تابع wp_dequeue_style() یا wp_deregister_style() استفاده می‌شود.

function remove_plugin_styles() {
    wp_dequeue_style('plugin-style-handle');
    wp_deregister_style('plugin-style-handle');
}
add_action('wp_enqueue_scripts', 'remove_plugin_styles', 100);

عدد 100 در انتهای هوک تعیین می‌کند که این تابع بعد از تمام enqueueهای دیگر اجرا شود تا اطمینان حاصل شود استایل افزونه بارگذاری شده و سپس حذف گردد.

بارگذاری استایل از CDN

برای استفاده از فایل‌های CSS از CDN، کافی است آدرس CDN را در پارامتر $src وارد کنید.

function load_cdn_styles() {
    wp_enqueue_style(
        'fontawesome', 
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', 
        array(), 
        '6.4.0'
    );
}
add_action('wp_enqueue_scripts', 'load_cdn_styles');

این روش برای افزایش سرعت بارگذاری سایت و کاهش حجم سرور بسیار مفید است.

نکات بهینه‌سازی و بهترین شیوه‌ها (Best Practices)

• همیشه از wp_enqueue_scripts برای Frontend و از admin_enqueue_scripts برای بخش مدیریت استفاده کنید.
• از نام‌های منحصربه‌فرد برای $handle استفاده کنید تا با افزونه‌های دیگر تداخل نداشته باشد.
• نسخه‌دهی مناسب برای استایل‌ها را فراموش نکنید تا از کش شدن فایل‌ها جلوگیری شود.
• به‌جای درج مستقیم تگ <link> در header.php، همیشه از این تابع استفاده کنید.
• اگر از فریم‌ورک‌هایی مانند Bootstrap یا Tailwind استفاده می‌کنید، ترتیب بارگذاری استایل‌ها را رعایت کنید.

مقایسه روش‌های بارگذاری فایل CSS

جمع‌بندی کاربردی

• برای بارگذاری فایل CSS: از wp_enqueue_style() در تابعی که به wp_enqueue_scripts هوک شده است استفاده کنید.
• برای بخش مدیریت: از admin_enqueue_scripts بهره ببرید.
• برای حذف استایل: از wp_dequeue_style() استفاده کنید.
• برای جلوگیری از کش: از filemtime() برای نسخه‌دهی پویا کمک بگیرید.

با رعایت این نکات، فایل‌های CSS شما در وردپرس به شکلی استاندارد، سریع و بدون تداخل بارگذاری خواهند شد.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال