آموزش تابع wp_register_style() در وردپرس و کاربرد آن

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

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

• کنترل بهتر بر ترتیب بارگذاری استایل‌ها با تعیین وابستگی‌ها (dependencies).
• امکان ثبت استایل بدون لود فوری؛ مناسب برای پلاگین‌ها یا قالب‌هایی که استایل‌ها را در شرایط خاص بارگذاری می‌کنند.
• امکان استفاده مجدد و جلوگیری از ثبت یا لود دوبارهٔ فایل‌های تکراری.
• سهولت در مدیریت نسخه‌بندی و کش با تعیین پارامتر version.

امضای تابع و پارامترها

مثال پایه: ثبت و سپس فراخوانی استایل

add_action('wp_enqueue_scripts', 'my_theme_register_styles');
function my_theme_register_styles() {
    wp_register_style('my-theme-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0', 'all');
    // در صورت نیاز: wp_enqueue_style('my-theme-style');
}

در این مثال، استایل با شناسهٔ my-theme-style ثبت شده اما بارگذاری نشده. در ادامه می‌توانید در شرایط دلخواه آن را enqueue کنید.

مثال کامل: ثبت + شرطی کردن بارگذاری

add_action('wp_enqueue_scripts', 'my_theme_enqueue_conditional_styles');
function my_theme_enqueue_conditional_styles() {
    wp_register_style('home-style', get_template_directory_uri() . '/assets/css/home.css', array('my-theme-style'), '1.0.0', 'all');

    if (is_front_page()) {
        wp_enqueue_style('home-style');
    }
}

این کد استایل مخصوص صفحهٔ نخست را ثبت می‌کند و فقط وقتی صفحهٔ فعلی صفحهٔ نخست باشد آن را بارگذاری می‌کند. با این روش از لود بی‌جهت CSS در صفحات دیگر جلوگیری می‌شود.

استفاده از filemtime برای کش‌بستینگ خودکار

add_action('wp_enqueue_scripts', 'register_styles_with_filemtime');
function register_styles_with_filemtime() {
    $style_path = get_template_directory() . '/assets/css/main.css';
    $style_uri  = get_template_directory_uri() . '/assets/css/main.css';
    $ver = file_exists($style_path) ? filemtime($style_path) : '1.0.0';

    wp_register_style('theme-main', $style_uri, array(), $ver, 'all');
    wp_enqueue_style('theme-main');
}

در این نمونه از filemtime استفاده شده تا هر بار که فایل CSS تغییر کند، مقدار نسخه تغییر کند و کش مرورگر باطل شود. این راهکار برای توسعه و نیز انتشار مفید است.

تفاوت wp_register_style و wp_enqueue_style

• wp_register_style(): فقط ثبت می‌کند؛ لود نمی‌کند. برای آماده‌سازی و مدیریت بهتر مناسب است.
• wp_enqueue_style(): اگر استایل ثبت نشده باشد، آن را ثبت و سپس لود می‌کند. اگر ثبت شده باشد تنها آن را enqueue می‌کند.

روند توصیه‌شده: ابتدا با wp_register_style ثبت کنید و در نقاط مناسب (یا هنگام نیاز) با wp_enqueue_style بارگذاری کنید تا کنترل و انعطاف بیشتری داشته باشید.

استفاده در مدیریت پنل (Admin)

add_action('admin_enqueue_scripts', 'my_plugin_admin_styles');
function my_plugin_admin_styles($hook) {
    if ($hook !== 'toplevel_page_my_plugin') return;
    wp_register_style('my-plugin-admin', plugins_url('admin.css', __FILE__), array(), '1.0.0', 'all');
    wp_enqueue_style('my-plugin-admin');
}

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

وابستگی‌ها، ترتیب و جلوگیری از تکرار

با تعیین آرایهٔ deps می‌توانید وابستگی‌ها را مشخص کنید. وردپرس تضمین می‌کند که استایل‌های وابسته قبل از استایل فعلی بارگذاری شوند. همچنین اگر چند پلاگین یا قالب یک handle یکسان را ثبت کنند، وردپرس از تکرار جلوگیری می‌کند و فقط یکی را نگه می‌دارد.

اضافه کردن استایل‌های inline

wp_register_style('my-handle', get_template_directory_uri() . '/style.css', array(), null);
wp_enqueue_style('my-handle');
wp_add_inline_style('my-handle', 'body { background-color: #f5f5f5; }');

با wp_add_inline_style می‌توان CSS کوچک یا تولیدشده داینامیک را به استایل ثبت‌شده اضافه کرد. این روش برای افزودن متغیرهای CSS یا استایل‌های مختص صفحه کاربردی است.

نکات و بهترین روش‌ها

• همیشه استایل‌ها را در اکشن‌های مناسب ثبت/بارگذاری کنید: wp_enqueue_scripts برای فرانت‌اند و admin_enqueue_scripts برای پنل مدیریت.
• از شناسه‌های یکتا استفاده کنید تا تداخل با پلاگین‌ها کاهش یابد.
• برای بهینه‌سازی، فقط در صفحات لازم استایل را enqueue کنید.
• برای RTL از is_rtl() و بارگذاری فایل‌های جداگانه استفاده کنید.
• برای CDN یا آدرس خارجی، به‌صورت کامل URL را در پارامتر src قرار دهید و در نظر داشته باشید که filemtime دیگر کار نمی‌کند.

جمع‌بندی

تابع wp_register_style() یک ابزار قدرتمند برای مدیریت استایل‌ها در وردپرس است که کنترل، نظم و بهینه‌سازی بارگذاری CSS را امکان‌پذیر می‌کند. استفادهٔ مناسب از ثبت و فراخوانی شرطی، تعیین وابستگی‌ها، و نسخه‌بندی مناسب می‌تواند به کاهش زمان بارگذاری صفحات و جلوگیری از کشینگ نامناسب کمک کند.

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

ارسال