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

تابع body_class() یکی از ابزارهای قدرتمند وردپرس برای افزودن کلاس‌های CSS به تگ <body> است. این کلاس‌ها به توسعه‌دهندگان امکان می‌دهند که با کنترل دقیق‌تر بر روی استایل‌ها و رفتار صفحات، قالب‌های منعطف‌تری بسازند. در این مقاله کاربردها، مثال‌های عملی، نکات پیشرفته و بهترین شیوه‌ها را توضیح می‌دهیم.

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

شناسایی نوع صفحه: صفحه اصلی، نوشته، بایگانی، دسته‌بندی و غیره.
هدف‌گیری دقیق CSS و JavaScript بر اساس نوع صفحه یا شناسه محتوا.
افزودن کلاس‌های سفارشی بدون تغییر مستقیم در HTML قالب.
بهبود نگهداری و توسعه قالب با استفاده از کلاس‌های معنایی.

خروجی پیش‌فرض body_class

وقتی در قالب از body_class() استفاده می‌کنید مثل زیر:

<body <?php body_class(); ?>>

وردپرس مجموعه‌ای از کلاس‌های پیش‌فرض را به تگ <body> اضافه می‌کند، از جمله:

کلاس	معنی
home	صفحه خانه
blog	صفحه وبلاگ
single	صفحه نمایش یک نوشته
page-id-2	شناسه صفحه (صفحات دارای id)
category-news	صفحه دسته‌بندی با slug معادل
logged-in	کاربر وارد شده

دسترسی برنامه‌نویسی به کلاس‌ها – get_body_class()

$classes = get_body_class();
if ( in_array( 'single', $classes ) ) {
    // logic for single post pages
}

تابع get_body_class() آرایه‌ای از کلاس‌ها را بازمی‌گرداند و مناسب زمانی است که می‌خواهید در PHP بر اساس وجود یا عدم وجود یک کلاس تصمیم بگیرید.

افزودن کلاس‌های سفارشی با فیلتر body_class

برای افزودن کلاس دلخواه بهتر است از فیلتر body_class استفاده کنید تا maintainability قالب حفظ شود:

function mytheme_add_body_class( $classes ) {
    if ( is_front_page() ) {
        $classes[] = 'mytheme-frontpage';
    }
    if ( is_single() && in_category( 'news' ) ) {
        $classes[] = 'single-news';
    }
    return $classes;
}
add_filter( 'body_class', 'mytheme_add_body_class' );

در این مثال، در صورتی که صفحه صفحه‌اول باشد یا نوشته‌ای در دسته ‘news’ باشد، کلاس‌های مربوط اضافه می‌شوند. افزودن از طریق فیلتر به شما امکان حذف یا جابجایی راحت‌تر را هم می‌دهد.

مثال: افزودن کلاس بر اساس فیلد سفارشی (ACF)

function add_acf_body_class( $classes ) {
    if ( is_singular( 'post' ) ) {
        $value = get_field( 'layout_style' ); // ACF field
        if ( $value ) {
            $classes[] = 'layout-' . sanitize_html_class( $value );
        }
    }
    return $classes;
}
add_filter( 'body_class', 'add_acf_body_class' );

در این کد مقدار یک فیلد ACF گرفته شده و پس از امن‌سازی با sanitize_html_class() به عنوان کلاس افزوده می‌شود. این الگو مناسب زمانی است که تنظیمات ظاهری را از پنل مدیریت اعمال می‌کنید.

حذف یا تغییر کلاس‌های پیش‌فرض

function remove_wp_body_class( $classes ) {
    $remove = array( 'blog', 'logged-in' );
    $classes = array_diff( $classes, $remove );
    return $classes;
}
add_filter( 'body_class', 'remove_wp_body_class' );

با استفاده از array_diff می‌توان کلاس‌های ناخواسته را حذف کرد. دقت کنید حذف کلاس‌هایی که افزونه‌ها یا ابزارها به آن وابسته‌اند ممکن است باعث اختلال شود.

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

پیشوند گذاری کلاس‌ها: برای جلوگیری از تداخل با افزونه‌ها یا تم‌های دیگر از پیشوند اختصاصی استفاده کنید (مثلاً mytheme-).
امنیت و پاکسازی: مقادیر دینامیک را با sanitize_html_class() یا توابع مشابه امن کنید.
پرهیز از کلاس‌های زیاد: اضافه کردن تعداد زیادی کلاس می‌تواند پیچیدگی را افزایش دهد و خوانایی را کاهش دهد.
استفاده از get_body_class در جاوااسکریپت: گاهی نیاز دارید بر اساس کلاس بدنه اسکریپت اجرا شود؛ می‌توانید با document.body.classList تعامل کنید.
BEM و body_class: می‌توانید از body_class برای اضافه کردن بلوک یا مودهای کلی و سپس به سبک BEM عمل کنید.

مثال ترکیبی: اضافه کردن کلاس برای هر taxonomy term

function add_taxonomy_terms_to_body( $classes ) {
    if ( is_singular() ) {
        $terms = wp_get_post_terms( get_the_ID(), 'category' );
        foreach ( $terms as $term ) {
            $classes[] = 'cat-' . sanitize_html_class( $term->slug );
        }
    }
    return $classes;
}
add_filter( 'body_class', 'add_taxonomy_terms_to_body' );

این کد برای هر نوشته، همهٔ دسته‌بندی‌های مربوطه را به عنوان کلاس بدنه اضافه می‌کند که برای هدف‌گیری CSS یا رفتارهای خاص بسیار مفید است.

کاربردهای عملی و نمونه‌های واقعی

نمایش هدر متفاوت در صفحه نخست: اضافه کردن کلاس home و هدف‌گیری آن در CSS یا بارگذاری اسکریپت خاص.
موارد A/B تست: افزودن کلاس‌های مود برای فعال/غیرفعال کردن یک طرح و تغییر آن از طریق کنترل پنل.
لود منابع فقط در صفحات خاص: با بررسی کلاس‌ها در JavaScript می‌توان منابع را بهینه بارگذاری کرد.

جمع‌بندی

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

آیا این مطلب برای شما مفید بود ؟

خیر

بله