WordPress Body Class 101: نکات و نکاتی برای طراحان تم – هاست |هاست لینوکس | خرید هاست ارزان | نمایندگی هاست | فروش هاست


آیا شما یک طراح تم وردپرس مشتاق هستید که به دنبال روش های جدید استفاده از CSS در تم های خود هستید؟

خوشبختانه ، وردپرس به طور خودکار کلاسهای CSS را اضافه می کند که می توانید از آنها در مضامین خود استفاده کنید. چندین مورد از این کلاسهای CSS به طور خودکار به <body> بخش هر صفحه در سایت وردپرس.

در این مقاله ، ما کلاس بدن وردپرس را با نکات و ترفندهایی برای طراحان تم مشتاق برای استفاده از آنها در پروژه های خود توضیح خواهیم داد.

استفاده از کلاس بدن وردپرس برای توسعه تم

در اینجا یک مرور سریع از آنچه در این مقاله خواهید آموخت ، آورده شده است.

  • کلاس بدن وردپرس چیست؟
  • چه زمانی از کلاس بدن استفاده کنیم
  • نحوه افزودن کلاسهای بدن اختصاصی
  • نحوه اضافه کردن کلاس بدن با استفاده از یک پلاگین
  • استفاده از برچسب های شرطی برای افزودن کلاسهای بدنی سفارشی
  • نمونه های بیشتری از اضافه کردن پویا کلاس های بدن سفارشی
  • شناسایی مرورگر کاربر و افزودن کلاس بدنه خاص مرورگر

کلاس بدن وردپرس چیست؟

Body class (body_class) یک عملکرد وردپرس است که به شما امکان می دهد کلاس های CSS را به عنصر بدن اختصاص دهید.

برچسب بدنه HTML به طور معمول در پرونده header.php یک موضوع شروع می شود ، که در هر صفحه بارگیری می شود. به شما این امکان را می دهد که بطور پویا متوجه شوید کاربر کدام صفحه را مشاهده می کند و طبق آن کلاسهای CSS را اضافه کنید.

به طور معمول بیشتر مضامین و چارچوب های مبتدی از قبل شامل عملکرد کلاس body در داخل برچسب body HTML هستند. با این حال ، اگر طرح زمینه شما آن را ندارد ، می توانید آن را با تغییر برچسب بدن به این صورت اضافه کنید:

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

بسته به نوع صفحه نمایش داده شده ، وردپرس به طور خودکار کلاسهای مناسب را اضافه می کند.

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

مربوط: نحوه عملکرد وردپرس در پشت صحنه را ببینید (اینفوگرافیک)

در اینجا چند نمونه از کلاسهای متداول که وردپرس ممکن است اضافه کند ، بسته به اینکه کدام صفحه نمایش داده می شود ، آورده شده است:


.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

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

با این اوصاف ، حال بیایید نگاهی به نحوه و زمان استفاده از کلاس بدن بیندازیم.

چه زمانی از کلاس بدن وردپرس استفاده کنیم

ابتدا باید مطمئن شوید که عنصر بدن تم شما همانند شکل بالا دارای عملکرد کلاس body باشد. اگر اینگونه باشد ، به طور خودکار شامل تمام کلاسهای CSS تولید شده در وردپرس می شود که در بالا ذکر شد.

پس از آن ، شما همچنین می توانید کلاسهای CSS سفارشی خود را به عنصر بدن اضافه کنید. هر زمان که به این کلاس ها احتیاج داشتید می توانید اضافه کنید.

به عنوان مثال ، اگر می خواهید شکل ظاهری مقالات توسط یک نویسنده خاص را که در یک گروه خاص ثبت شده است تغییر دهید.

نحوه افزودن کلاسهای بدنه سفارشی

وردپرس دارای فیلتری است که می توانید با استفاده از آن کلاسهای بدن را در صورت لزوم اضافه کنید. ما قبل از اینکه سناریوی خاص مورد استفاده را به شما نشان دهیم ، چگونگی افزودن کلاس بدن با استفاده از فیلتر را به شما نشان خواهیم داد تا همه بتوانند در یک صفحه باشند.

از آنجا که کلاسهای بدن مخصوص تم هستند ، لازم است کد زیر را به پرونده functions.php قالب خود اضافه کنید.


function my_class_names($classes) {
	// add 'class-name' to the $classes array
	$classes[] = 'wpb-class';
	// return the $classes array
	return $classes;
}

//Now add test class to the filter
add_filter('body_class','my_class_names');

کد بالا یک کلاس “wpb-class” را به برچسب body در هر صفحه در وب سایت شما اضافه می کند. این خیلی بد نیست ، درست است؟

اکنون می توانید به طور مستقیم از این کلاس CSS در صفحه سبک تم خود استفاده کنید. اگر در وب سایت شخصی خود کار می کنید ، می توانید CSS را با استفاده از ویژگی CSS سفارشی در customizer تم اضافه کنید.

افزودن CSS سفارشی در تنظیم کننده تم

افزودن کلاس بدن با استفاده از یک افزونه وردپرس

اگر روی پروژه مشتری کار نمی کنید و نمی خواهید کدی بنویسید ، این روش برای شما آسان تر است.

اولین کاری که باید انجام دهید نصب و فعال سازی افزونه Custom Body Class است. برای جزئیات بیشتر ، به راهنمای گام به گام نحوه نصب افزونه وردپرس مراجعه کنید.

پس از فعال سازی ، باید بازدید کنید تنظیمات »کلاس بدنه سفارشی صفحه از اینجا می توانید تنظیمات افزونه را پیکربندی کنید.

تنظیمات کلاس بدنه سفارشی

می توانید انواع پست را در جاهایی که می خواهید ویژگی کلاس بدن را فعال کنید و چه کسی می تواند به آن دسترسی پیدا کند ، انتخاب کنید. فراموش نکنید که برای ذخیره تنظیمات خود بر روی دکمه ذخیره تغییرات کلیک کنید.

در مرحله بعدی ، می توانید برای ویرایش هر پست یا صفحه ای در سایت وردپرس خود اقدام کنید. در صفحه ویرایش پست ، یک جعبه متا جدید در ستون سمت راست با عنوان “Post Classes” پیدا خواهید کرد.

اضافه کردن کلاسهای بدن به یک پست در وردپرس

برای افزودن کلاسهای CSS سفارشی خود کلیک کنید. می توانید چندین کلاس را که با فاصله از هم جدا شده اند ، اضافه کنید.

پس از پایان کار ، می توانید پست خود را ذخیره یا منتشر کنید. اکنون این پلاگین کلاسهای CSS سفارشی شما را برای آن پست یا صفحه خاص به کلاس بدنه اضافه می کند.

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

قدرت واقعی تابع body_class زمانی حاصل می شود که با برچسب های شرطی استفاده شود.

این برچسب های شرطی نوع داده های درست یا نادرستی هستند که درست یا نادرست بودن یک شرط را در وردپرس بررسی می کنند. به عنوان مثال ، برچسب شرطی is_home بررسی می کند که آیا صفحه فعلی نمایش داده شده صفحه اصلی است یا خیر.

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

بیایید نگاهی به چند نمونه از استفاده از برچسب های شرطی برای اضافه کردن کلاسهای سفارشی به کلاس بدن بیندازیم.

بیایید بگوییم که شما می خواهید صفحه اصلی خود را برای کاربران وارد شده با نقش کاربر نویسنده متفاوت تغییر دهید. در حالی که وردپرس به طور خودکار یک تولید می کند .home و .logged-in کلاس ، این نقش کاربر را تشخیص نمی دهد یا آن را به عنوان یک کلاس اضافه نمی کند.

اکنون ، این یک سناریو است که می توانید با استفاده از برچسب های مشروط با برخی کد های سفارشی ، یک کلاس سفارشی را به کلاس بدن اضافه کنید.

برای دستیابی به این هدف ، کد زیر را به پرونده functions.php قالب خود اضافه خواهید کرد.


function wpb_loggedin_user_role_class($classes) { 

// let's check if it is homepage
if ( is_home() ) {

// Now let's check if the logged in user has author user role.  
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
    //The user has the "author" role
    // Add user role to the body class
    $classes[] = 'author';
    // Return the classes array
    return $classes;      
} 
} else { 
// if it is not homepage, then just return default classes
return $classes; 
}
} 

add_filter('body_class', 'wpb_loggedin_user_role_class');

حال ، بیایید نگاهی به یک مثال مفید دیگر بیندازیم. این بار قصد داریم بررسی کنیم که آیا صفحه نمایش داده شده پیش نمایش پیش نویس وردپرس است یا خیر.

برای این کار ما از برچسب شرطی is_preview استفاده خواهیم کرد و سپس کلاس CSS سفارشی خود را اضافه خواهیم کرد.


function add_preview_class($classes) { 
if ( is_preview() )  {
$classes[] = 'preview-mode';
return $classes;
}
return $classes; 
}
add_filter('body_class','add_preview_class');

اکنون ، ما برای استفاده از کلاس جدید سفارشی CSS که به تازگی اضافه کردیم ، CSS زیر را به صفحه سبک تم خود اضافه خواهیم کرد.


.preview-mode .site-header:before { 
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}

این چگونه در سایت نمایشی ما به نظر می رسید:

حالت پیش نمایش سفارشی کلاس CSS به کلاس بدن اضافه می شود

شاید بخواهید لیست کامل برچسب های شرطی را که می توانید در وردپرس استفاده کنید ، بررسی کنید. این به شما یک مجموعه مفید از برچسب های آماده برای کد شما می دهد.

نمونه های دیگری از اضافه کردن پویا کلاس های بدن سفارشی

به غیر از برچسب های مشروط ، می توانید از تکنیک های دیگر برای گرفتن اطلاعات از پایگاه داده وردپرس و ایجاد کلاس های CSS سفارشی برای کلاس body استفاده کنید.

افزودن نام دسته ها به کلاس بدن یک صفحه پست واحد

بیایید بگوییم شما می خواهید ظاهر تک پست ها را بر اساس دسته بندی که در آنها ثبت شده است سفارشی کنید. برای رسیدن به این هدف می توانید از کلاس بدن استفاده کنید

ابتدا باید نام دسته ها را به عنوان کلاس CSS در صفحات تک پست اضافه کنید. برای انجام این کار ، کد زیر را به پرونده functions.php طرح زمینه خود اضافه کنید:


// add category nicenames in body class
function category_id_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
    return $classes;
}
 
add_filter('body_class', 'category_id_class');

کد بالا کلاس طبقه بندی را در کلاس بدن شما برای صفحات تک پست اضافه می کند. سپس می توانید از کلاس های CSS استفاده کنید تا به دلخواه خود آن را سبک کنید.

اضافه کردن حلزون صفحه به کلاس بدن

کد زیر را در پرونده functions.php طرح زمینه خود جایگذاری کنید:


//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

کلاس های تشخیص خاص مرورگر و بدن خاص

بعضی اوقات ممکن است با مسائلی روبرو شوید که ممکن است موضوع شما به CSS اضافی برای یک مرورگر خاص نیاز داشته باشد.

حال خبر خوب این است که وردپرس هنگام بارگیری به طور خودکار مرورگر را شناسایی می کند و سپس این اطلاعات را به عنوان یک متغیر جهانی ذخیره می کند.

شما فقط باید بررسی کنید که آیا وردپرس یک مرورگر خاص را شناسایی کرده است یا خیر و سپس آن را به عنوان یک کلاس CSS سفارشی اضافه کنید.

به سادگی ، کد زیر را در فایل functions.php موضوع خود کپی و جایگذاری کنید:



function wpb_browser_body_class($classes) { 
	global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;

if ($is_iphone)    $classes[] ='iphone-safari';
elseif ($is_chrome)    $classes[] ='google-chrome';
elseif ($is_safari)    $classes[] ='safari';
elseif ($is_NS4)    $classes[] ='netscape';
elseif ($is_opera)    $classes[] ='opera';
elseif ($is_macIE)    $classes[] ='mac-ie';
elseif ($is_winIE)    $classes[] ='windows-ie';
elseif ($is_gecko)    $classes[] ='firefox';
elseif ($is_lynx)    $classes[] ='lynx';
elseif ($is_IE)      $classes[] ='internet-explorer';
elseif ($is_edge)    $classes[] ='ms-edge';
else $classes[] = 'unknown';
	
return $classes;
}
add_filter('body_class','wpb_browser_body_class');

سپس می توانید از کلاسهایی مانند:

.ms-edge .navigation {some item goes here}

اگر یک مشکل کوچک یا حاشیه باشد ، این یک روش نسبتاً آسان برای رفع آن است.

قطعاً سناریوهای بیشتری وجود دارد که در آن استفاده از تابع body_class می تواند شما را از نوشتن خطوط طولانی کد نجات دهد. به عنوان مثال ، اگر از چارچوب موضوعی مانند Genesis استفاده می کنید ، می توانید از آن برای افزودن کلاسهای سفارشی در طرح زمینه کودک خود استفاده کنید.

شما می توانید از تابع body_class برای افزودن کلاسهای CSS برای طرح بندی صفحه با عرض کامل ، محتوای نوار کناری ، هدر و پاورقی و غیره استفاده کنید.

امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه از کلاس بدن وردپرس در موضوعات خود استفاده کنید. همچنین ممکن است بخواهید مقاله ما را در مورد نحوه سبک دادن به پست های مختلف وردپرس و مقایسه بهترین افزونه های سازنده صفحه وردپرس مشاهده کنید.

اگر این مقاله را دوست داشتید ، لطفاً برای آموزش های ویدئویی وردپرس در کانال YouTube ما مشترک شوید. همچنین می توانید ما را در توییتر و فیس بوک

پست WordPress Body Class 101: نکات و نکاتی برای طراحان تم اولین بار در Nex1host ظاهر شد.

برای امتیاز به این نوشته کلیک کنید!

[کل: 0 میانگین: 0]





WordPress Body Class 101: نکات و نکاتی برای طراحان تم – هاست |هاست لینوکس | خرید هاست ارزان | نمایندگی هاست | فروش هاست

نظر دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *