WordPress Body Class 101: نکات و نکاتی برای طراحان قالب

با تجربیات خود در استفاده از وردپرس ، متوجه شدیم که اغلب طراحان موضوعات از یک ویژگی خاص غافل می شوند. آنها به دنبال فیلترها و قلاب های وردپرس دیوانه وار برای انجام کاری هستند که تنها چیزی که به آنها نیاز است CSS ساده است. وردپرس به طور پیش فرض کلاسهای CSS زیادی ایجاد می کند. ( WordPress CSS Cheat Sheet ) یکی از این کلاس های CSS شامل سبک های کلاس بدن است. در این مقاله ، کلاس بدن 101 وردپرس را به همراه به اشتراک گذاری برخی نکات و نکات مفید برای شروع طراحان تم توضیح خواهیم داد.

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

Body Class (body_class) یک عملکرد وردپرس است که عناصر بدن را کلاسهای مختلفی قرار می دهد ، بنابراین نویسندگان قالب می توانند سایتهای خود را به طور م withثر با CSS سبک کنند. برچسب بدنه HTML در پرونده header.php شما وجود دارد که در هر صفحه بارگیری می شود. هنگام کدگذاری یک موضوع ، می توانید عملکرد body_class را به عنصر بدن خود مانند این پیوست کنید:

 > 

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

.rtl {}
. خانه {}
.وبلاگ {}
.بایگانی {}
.تاریخ {}
.جستجو کردن {}
صفحه بندی شده {}
.پیوست {}
.خطای 404 {}
.single postid- (id) {}
.attachmentid- (شناسه) {}
.tatachment- (نوع میمی) {}
.نویسنده {}
نویسنده- (نام کاربری_نام) {}
.دسته بندی {}
.category- (حلزون حرکت کردن) {}
.tag {}
.tag- (حلزون حرکت کردن) {}
.page-parent {}
.page-child والدین-pageid- (شناسه) {}
.page-template page-template- (نام فایل الگو) {}
.نتایج جستجو {}
. جستجو بدون نتیجه {}
.وارد شده {}
.paged- (شماره صفحه) {}
.single-paged- (شماره صفحه) {}
.page-paged- (شماره صفحه) {}
.category-paged- (شماره صفحه) {}
.tag-paged- (شماره صفحه) {}
.date-paged- (شماره صفحه) {}
.autor-paged- (شماره صفحه) {}
.search-paged- (شماره صفحه) {}

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

نحوه استفاده از کلاس بدن WordPress

در بیشتر موارد ، کلاس بدنه وردپرس راه حل ساده ای است که طراحان قالب اغلب از آن چشم پوشی می کنند. بله ، این شامل ما نیز می شود. حدود یک سال پیش ، ما نیاز داشتیم که یک مورد منوی وردپرس را که فقط در یک صفحه خاص بود ، سبک کنیم. ما تصمیم گرفتیم عمیقاً حفاری کنیم تا یک فیلتر برای افزودن کلاس ناوبری ویژه به موارد منو اضافه کنیم که با استفاده از دستور شرطی اضافه می شود. به عنوان مثال ، اگر یک صفحه باشد ، کلاس “Blog” را به موارد منو اضافه کنید. پس از صرف تمام وقت برای کشف همه اینها و statement / “title =” Class Custom in WordPress Menu Items “> نوشتن پستی در مورد آن ، یکی از کاربران ما اشاره کرد که ما می توانستیم به راحتی این کار را با کلاس بدن موجود انجام دهیم:

. تک # ناوبری .leftmenublog div {display: inline-block! important؛} 

توجه: نحوه استفاده از کلاس body .single که در همه صفحات پست منفرد اضافه می شود.

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

تا مثالی دیگر برای شما بزنم. هنگامی که یک کاربر با مراجعه به ما خواستار راهی برای تغییر تصویر آرم در وب سایت خود بر اساس صفحه دسته بندی شد. بیشتر طرح های زمینه از جمله وی بارگیری آرم با استفاده از CSS (#header .logo) بود. ما پیشنهاد دادیم که چگونه در استفاده از کلاس بدن .category-slug برای تغییر آرم خود مانند این موارد استفاده کنید:

.category-مشاوره # header .logo {پس زمینه: url (تصاویر / آرم-مشاوره. png) بدون تکرار! مهم؛}
.category-health #header .logo {background: url (images / logo-health.png) بدون تکرار! مهم؛}

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

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

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

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

تابع my_class_names ($ class) {
// "class-name" را به آرایه $ class اضافه کنید
$ class [] = 'test-class-name'؛
// آرایه $ class را برگردانید
کلاسهای $ را برگردانید
}

// حالا کلاس تست را به فیلتر اضافه کنید
add_filter ('body_class'، 'my_class_names')؛

کد بالا یک کلاس “test-class-name” را به برچسب متن در هر صفحه در وب سایت شما اضافه می کند. این خیلی بد نیست ، درست است؟ قدرت واقعی این عملکرد در برچسب های شرطی است . می توانید کلاس XYZ را فقط در صفحات منفرد اضافه کنید و غیره. بیایید این مثال را بزنیم و آن را در مورد استفاده واقعی استفاده کنیم.

افزودن گروه دسته به صفحات پست واحد h4>

بیایید بگوییم می خواهید صفحات پست تک پست را برای هر دسته شخصی سازی کنید. بسته به نوع سفارشی سازی ، می توانید از کلاس های بدنه برای آن استفاده کنید. برای ساده نگه داشتن موارد ، بگذارید بگوییم شما می خواهید رنگ پس زمینه صفحه را بر اساس دسته بندی پست های تک تغییر دهید. می توانید این کار را با افزودن کلاسهای دسته بندی به بازدیدهای صفحه پست خود انجام دهید. عملکرد زیر را در پرونده functions.php طرح زمینه خود جایگذاری کنید:

// اضافه کردن نام های ویژه دسته در کلاس بدن
تابع category_id_class ($ Class) {
پست جهانی $؛
foreach ((get_the_category ($ post-> ID)) به عنوان $ category)
$ class [] = $ category-> category_nicename؛
کلاسهای $ را برگردانید
}

add_filter ('body_class'، 'category_id_class')؛

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

اضافه کردن صفحه صفحه در متن متن وردپرس خود h4>

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

// صفحه بدن Slug Body
تابع add_slug_body_class ($ Class) {
پست جهانی $؛
if (Isset ($ post)) {
$ class [] = $ post-> post_type. '-'. $ post-> post_name؛
}
کلاسهای $ را برگردانید
}
add_filter ('body_class'، 'add_slug_body_class')؛

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

ردیابی مرورگر و کلاسهای بدن خاص مرورگر h4>

گاهی اوقات ممکن است لازم باشد که سبک های CSS ویژه برای همه کارها داشته باشید تا در مرورگرهای خاصی درست کار کنند (HINT: Internet Explorer). خوب Nathan Rice یک راه حل بسیار جالب پیشنهاد کرد که کلاسهای خاص مرورگر را به کلاس بدنی اضافه می کند بر اساس مرورگری که کاربر از آن سایت بازدید می کند.

تمام کاری که شما باید انجام دهید اینست که کد زیر را در پرونده توابع function.php خود پیست کنید:

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

استفاده کنید

. به عنوان مثال .navigation {برخی از موارد به اینجا می روند} 

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

موارد استفاده بیشتر: h4>

ما احتمالاً می توانیم موارد استفاده بیشتری را لیست کنیم ، اما در غیر این صورت این مقاله از کنترل خارج می شود. هدف اصلی این بود که به توسعه دهندگان تم جدید کمک کنید تا اصول کلاس بدن وردپرس و مزایای آن را درک کنند. موارد استفاده محدود به تصورات شما است. ما دیده ایم که توسعه دهندگان تم تجاری (Genesis) از کلاسهای بدنه برای ارائه گزینه های مختلف طرح استفاده می کنند. به عنوان مثال طرح کامل صفحه ، محتوای نوار کناری ، نوار کناری محتوا و غیره. با این کار ، کاربر می تواند به راحتی طرح صفحه خود را تغییر دهد بدون اینکه نگران مشکلات ظاهری باشد زیرا از قبل با CSS.0 از آن مراقبت شده است

برخی از توسعه دهندگان دیده ایم که درخواستهای HTTP را برای بارگذاری پرونده های CSS برای طرحهای مختلف رنگی که ارائه می دهند ، اضافه می کنند. در بسیاری از موارد ، تغییرات نیز بسیار جزئی هستند. وقتی شخص می تواند کار را انجام دهد ، بارگیری 3 صفحه سبک فایده ای ندارد. فقط برای این کار از کلاس بدن استفاده کنید.

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