چرا استایل‌دهی شرطی صفحات بدون body_class شکست می‌خورد؟
تابع body_class برای تولید خودکار کلاس‌های CSS تگ body در وردپرس؛ بررسی پارامترها، کلاس‌های تولیدی، فیلترها و اشتباهات رایج در قالب‌نویسی.
7 دقیقه مطالعه
چرا استایل‌دهی شرطی به کلاس نیاز دارد؟
در یک قالب حرفه‌ای، بخش‌های مختلف سایت نیاز به استایل متفاوتی دارند. صفحه اصلی ممکن است عرض کامل داشته باشد، صفحه نوشته تکی ممکن است سایدبار داشته باشد، صفحات آرشیو ممکن است چیدمان کارتی داشته باشند و صفحه ۴۰۴ ممکن است طراحی مخصوص خود را داشته باشد. روش سنتی حل این مسئله، نوشتن شرط‌های PHP در فایل‌های CSS نیست (که ممکن نیست)، بلکه استفاده از کلاس‌های شرطی در HTML است. تابعbody_class() دقیقاً همین کار را انجام می‌دهد: به‌جای شرط‌های پیچیده در هر فایل قالب، کلاس‌های استاندارد به تگ body اضافه می‌کند و CSS بر پایه این کلاس‌ها تصمیم می‌گیرد.
تابع body_class چیست؟
تابعbody_class() یک تابع هسته وردپرس است که در فایل wp-includes/post-template.php تعریف شده است. این تابع فهرستی از کلاس‌های CSS را بر پایه وضعیت صفحه جاری تولید می‌کند و آنها را در تگ body چاپ می‌کند.
کلاس‌های تولیدی شامل شناسه صفحه، نوع محتوا، وضعیت کاربر، نوع مرورگر، و ویژگی‌های صفحه فعلی هستند. این کلاس‌ها پایه استایل‌دهی شرطی در CSS مدرن هستند و در همه قالب‌های حرفه‌ای استفاده می‌شوند.
نکته مهم این است که این تابع باید در فایل header.php و در داخل تگ body فراخوانی شود.
امضای تابع و پارامترها
امضای این تابع به‌شکل زیر است:function body_class( $class = '' ) {
echo 'class="' . esc_attr( implode( ' ', get_body_class( $class ) ) ) . '"';
}get_body_class() استفاده کنید. این تابع در سناریوهایی که می‌خواهید کلاس‌ها را دستکاری کنید، کاربردی‌تر است.
نمونه استفاده ساده:
<body <?php body_class(); ?>><body <?php body_class( 'custom-layout' ); ?>><body <?php body_class( array( 'dark-mode', 'wide-layout' ) ); ?>>سازوکار داخلی تابع
تابعbody_class() ابتدا از get_body_class() استفاده می‌کند تا آرایه‌ای از کلاس‌ها بسازد. این آرایه بر پایه وضعیت صفحه جاری، نوع کاربر و سایر شرایط ساخته می‌شود.
سپس یک فیلتر به نام body_class روی آرایه اعمال می‌شود که امکان افزودن، حذف یا تغییر کلاس‌ها را فراهم می‌کند. در نهایت، آرایه با esc_attr پاک‌سازی و به‌صورت رشته در تگ body چاپ می‌شود.
نکته مهم این است که فیلتر body_class یکی از پرکاربردترین فیلترها در افزونه‌ها و قالب‌های حرفه‌ای است. با استفاده از آن می‌توان کلاس‌های شرطی بدون تغییر فایل‌های قالب اضافه کرد.
کلاس‌های تولیدی و معنای هر یک
تابعget_body_class() کلاس‌های زیر را به‌صورت پیش‌فرض تولید می‌کند:
- home: در صفحه اصلی سایت
- blog: در صفحه وبلاگ (در صورت تفکیک از صفحه اصلی)
- archive: در صفحات آرشیو
- category: در آرشیو دسته‌بندی
- tag: در آرشیو برچسب
- author: در آرشیو نویسنده
- date: در آرشیو تاریخ
- search: در صفحه نتایج جستجو
- paged: در صفحات بعدی صفحه‌بندی
- single: در نوشته تکی
- page: در برگه
- page-id-{ID}: شناسه برگه
- postid-{ID}: شناسه نوشته
- logged-in: در صورت ورود کاربر
- admin-bar: در صورت فعال بودن نوار مدیریت
- error404: در صفحه ۴۰۴
- rtl: در صورت راست‌به‌چپ بودن سایت
- no-customize-support: در صورت نبود پشتیبانی از سفارشی‌ساز
این کلاس‌ها امکان هدف‌گیری دقیق صفحات در CSS را بدون شرط‌های پیچیده PHP فراهم می‌کنند.
کاربردهای عملی در قالب
استفاده استاندارد در فایلheader.php:
<body <?php body_class(); ?>>$extra_class = is_front_page() ? 'home-page' : '';
?>
<body <?php body_class( $extra_class ); ?>>is_front_page استفاده شده است. برای مطالعه بیشتر، می‌توانید به راهنمای is_front_page و راهنمای is_home مراجعه کنید.
افزودن کلاس بر اساس قالب برگه:
$classes = array();
if ( is_page_template( 'templates/full-width.php' ) ) {
$classes[] = 'full-width-layout';
}
?>
<body <?php body_class( $classes ); ?>>افزودن کلاس سفارشی با فیلتر
فیلترbody_class امکان افزودن کلاس‌های شرطی به همه صفحات را فراهم می‌کند. الگوی رایج:
add_filter( 'body_class', 'mytheme_body_classes' );
function mytheme_body_classes( $classes ) {
if ( is_singular() && has_post_thumbnail() ) {
$classes[] = 'has-featured-image';
}
if ( is_user_logged_in() ) {
$classes[] = 'logged-user';
}
if ( is_rtl() ) {
$classes[] = 'rtl-layout';
}
return $classes;
}نقش در Child Theme
در Child Theme، تابعbody_class بدون تغییر کار می‌کند، اما فیلتر body_class امکان سفارشی‌سازی آسان را فراهم می‌کند. با استفاده از این فیلتر در functions.php قالب فرزند، می‌توان کلاس‌های سفارشی بدون تغییر فایل‌های Parent Theme اضافه کرد.
الگوی حرفه‌ای برای Child Theme:
add_filter( 'body_class', 'mychild_body_classes', 20 );
function mychild_body_classes( $classes ) {
$classes[] = 'child-theme-active';
if ( is_woocommerce() ) {
$classes[] = 'woo-layout';
}
return $classes;
}نکات امنیتی و اشتباهات رایج
اشتباه اول، نبود فراخوانی درheader.php است. اگر body_class در فایل هدر فراخوانی نشود، CSS شما نمی‌تواند بر پایه کلاس‌های شرطی کار کند.
اشتباه دوم، نبود فیلتر سفارشی برای کلاس‌های شرطی است. اگر همه شرط‌ها را در فایل قالب بنویسید، نگهداری کد سخت می‌شود و در Child Theme نمی‌توانید تغییر دهید.
اشتباه سوم، چاپ مستقیم کلاس‌ها بدون escape است. اگر از get_body_class استفاده می‌کنید، همیشه esc_attr را فراموش نکنید. راهنمای این تابع در صفحه esc_html آمده است.
اشتباه چهارم، نبود تست در انواع مختلف صفحات است. باید صفحه اصلی، نوشته تکی، برگه، آرشیو، جستجو و ۴۰۴ را تست کنید.
اشتباه پنجم، نبود توجه به کش است. اگر کلاس‌های body بر اساس وضعیت کاربر تغییر می‌کنند (مثلاً logged-in)، باید استراتژی کش مناسب انتخاب شود. این نکته در پروژه‌هایی که از Cache استفاده می‌کنند بسیار مهم است.
اشتباه ششم، استفاده از کلاس‌های دستی به‌جای کلاس‌های استاندارد است. کلاس‌هایی مانند single، page و archive را جدی بگیرید و از آنها در CSS استفاده کنید.
اشتباه هفتم، نبود توجه به RTL است. کلاس rtl در سایت‌های فارسی به‌صورت خودکار اضافه می‌شود. از این کلاس برای استایل‌دهی مناسب RTL استفاده کنید.
تحلیل فنی پیشرفته
در نگاه مهندسی، تابعbody_class() یک نقطه معماری در لایه نمایش است که بر چند جنبه از سیستم اثر می‌گذارد. لایه اول لایه تولید کلاس است. این تابع بر پایه وضعیت صفحه جاری، وضعیت کاربر و ویژگی‌های محیط، کلاس‌ها را تولید می‌کند. این تولید بر پایه توابعی مانند is_front_page، is_single، is_user_logged_in و is_rtl انجام می‌شود.
لایه دوم لایه فیلترپذیری است. فیلتر body_class امکان دخالت در تولید نهایی را فراهم می‌کند و یکی از پرکاربردترین فیلترها در توسعه وردپرس است.
لایه سوم لایه امنیت است. کلاس‌ها با esc_attr پاک‌سازی می‌شوند تا از تزریق کاراکترهای خطرناک جلوگیری شود.
لایه چهارم لایه کشینگ است. کلاس‌های body ممکن است در HTML نهایی کش شوند. اگر بر اساس وضعیت کاربر تغییر می‌کنند، باید Cache Segmentation یا Vary: Cookie اعمال شود.
لایه پنجم لایه CSS است. کلاس‌های تولیدی به عنوان قرارداد میان قالب و CSS عمل می‌کنند. این الگو در فریم‌ورک‌های CSS مدرن مانند Tailwind و Bootstrap رایج است.
لایه ششم لایه Performance است. تعداد کلاس‌ها بر حجم HTML اثر می‌گذارد اما در عمل تأثیر آن ناچیز است. با این حال، در سایت‌های بسیار پربازدید، کاهش تعداد کلاس‌ها می‌تواند مفید باشد.
لایه هفتم لایه Accessibility است. برخی کلاس‌ها مانند admin-bar برای فاصله‌گذاری مناسب نوار مدیریت ضروری هستند. حذف آنها می‌تواند تجربه کاربر را برای مدیران سایت تضعیف کند.
لایه هشتم لایه Multisite است. در شبکه‌های Multisite، هر سایت می‌تواند قالب متفاوتی داشته باشد و body_class در هر سایت بر پایه داده‌های همان سایت کار می‌کند.
مفاهیم پایه‌ای CSS در CSS در ویکی‌پدیا توضیح داده شده است.
برای مطالعه بیشتر روی توابع مرتبط، می‌توانید به راهنمای post_class، راهنمای get_header، راهنمای get_footer، راهنمای get_sidebar، راهنمای get_template_part، راهنمای add_theme_support و راهنمای register_nav_menus مراجعه کنید.
پرسش‌های پرتکرار
تفاوتbody_class و get_body_class چیست؟ اولی کلاس‌ها را مستقیم در HTML چاپ می‌کند و دومی آرایه‌ای از کلاس‌ها برمی‌گرداند.
آیا می‌توان کلاس سفارشی اضافه کرد؟ بله، با پارامتر ورودی یا با فیلتر body_class.
آیا کلاس‌های body برای SEO مفیدند؟ این کلاس‌ها بیشتر برای استایل هستند، اما برخی از آنها مانند error404 می‌توانند برای ابزارهای تحلیلی مفید باشند.
آیا کلاس rtl خودکار اضافه می‌شود؟ بله، اگر زبان سایت راست‌به‌چپ باشد.
چطور بر اساس نوع کاربر استایل متفاوت بدهیم؟ با فیلتر body_class و شرط is_user_logged_in.
نتیجه و مسیر ادامه
تابعbody_class() یک ابزار پایه‌ای برای تولید کلاس‌های CSS هوشمند در تگ body است. استفاده درست از آن یعنی فراخوانی در فایل هدر، بهره‌گیری از کلاس‌های استاندارد، افزودن کلاس‌های سفارشی با فیلتر و توجه به کش. اشتباه‌های کوچک در این تابع اغلب به CSS شکننده و نگهداری سخت منجر می‌شوند.
اگر این تابع را در پروژه‌ای واقعی به کار برده‌اید و رفتار غیرمنتظره‌ای دیده‌اید — به‌خصوص در ترکیب با کش یا در سایت‌های چندزبانه — تجربه‌تان می‌تواند راهگشای دیگران باشد. کدام بخش بیشترین زمان را از شما گرفت؟ دیدگاه خود را بنویسید.
سعید کریمه
نویسنده
نویسنده در وردپرس کار.