WordPress Body Class 101: mövzu dizaynerləri üçün məsləhətlər və tövsiyələr

WordPress istifadə təcrübəmiz boyu mövzu dizaynerlərinin tez-tez müəyyən bir funksionallıq haqqında çox düşündüklərini gördük. Lazım olanların hamısı sadə bir CSS olduqda tapşırığı yerinə yetirmək üçün dəli WordPress filtrləri və qarmaqlar axtarırıq. Varsayılan olaraq WordPress bir çox CSS dərsləri yaradır. (WordPress CSS Cheat Sheet). Bu CSS siniflərindən biri bədən sinif üslublarıdır. Bu yazıda, WordPress bədən sinif 101-i izah edəcəyik və mövzu dizaynerlərinin başlaması üçün bəzi faydalı məsləhətlər və tövsiyələri paylaşacağıq.

WordPress Body Class nədir?

Body Class (body_class) bədən elementlərinə fərqli siniflər verən bir WordPress funksiyasıdır, buna görə mövzu müəllifləri saytlarını CSS ilə effektiv şəkildə dizayn edə bilərlər. HTML bədən etiketi əsasən hər səhifədə yüklənən header.php faylınızdadır. Bir mövzunu kodlaşdırarkən body_class funksiyasını bədən elementinizə aşağıdakı kimi əlavə edə bilərsiniz:

>

Bu kiçik elementi əlavə edərək, CSS istifadə edərək hər səhifənin görünüşünü asanlıqla dəyişdirmək üçün rahatlığa sahibsiniz. Yüklənən səhifənin növündən asılı olaraq, WordPress avtomatik olaraq müvafiq sinif əlavə edir. Məsələn, bir arxiv səhifəsinizsə, istifadə etmək qərarına gəlsəniz WordPress avtomatik olaraq arxiv sinfini bədən elementinə əlavə edəcəkdir. Bunu demək olar ki, hər səhifə üçün edir. WordPress-in əlavə edə biləcəyi ümumi siniflərə dair bəzi nümunələr:

.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) {}

Gördüyünüz kimi, əlinizdə belə güclü bir mənbəyə sahib olduğunuz halda, yalnız CSS istifadə edərək WordPress səhifənizi tamamilə düzəldə bilərsiniz. Xüsusi müəllif profil səhifələrini, tarixə əsaslanan sənədləri və s. Düzəldə bilərsiniz. Beləliklə, bunu necə və nə vaxt istifadə edəcəksiniz?

WordPress bədən sinifindən necə istifadə olunur

Əksər hallarda, WordPress bədən sinfi mövzu dizaynerlərinin tez-tez qulaqardına vurduğu sadə bir həlldir. Bəli, bu bizə də aiddir. Təxminən bir il əvvəl, yalnız müəyyən bir səhifədə olan bir WordPress menyusu dizayn etməliyik. Şərti bir ifadədən istifadə edilərək əlavə ediləcək menyu maddələrinə xüsusi bir naviqasiya sinfi əlavə etmək üçün bir filtr tapmaq üçün qazmağa qərar verdik. Məsələn, tək səhifədirsə, menyu bölmələrinə “Blog” sinifini əlavə edin. Bütün bunların deşifrini açmaq və bu barədə yazı yazmaq üçün bütün vaxt sərf etdikdən sonra istifadəçilərimizdən biri bu kimi mövcud bədən sinfi ilə asanlıqla edə biləcəyimizə işarə etdi:

.single #navigation .leftmenublog div{display: inline-block !important;}

Diqqət: bütün fərdi poçt səhifələrində əlavə olunan .single bədən sinifindən necə istifadə etdiyinizə diqqət yetirin.

Oğlan, bundan sonra özümüzü axmaq hiss etmirik? O vaxtdan bəri, daha dərin qazmadan əvvəl bədən sinfi ilə işlərin edilə biləcəyini görmək üçün bir qeyd etdik.

Başqa bir misal gətirim. Bir istifadəçi bir veb saytındakı logo səhifəsini əsas götürərək loqotip şəklini dəyişdirmək üçün bir yol istəyərək bizə yaxınlaşdı. Mövzu dizaynlarının çoxu, o cümlədən sizin də loqosunuzu CSS (#header .logo) istifadə edərək yüklədi. Loqotipinizi bu kimi dəyişdirmək üçün .category-slug bədən sinifindən necə istifadə etməyinizi təklif edirik:

.category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}
.category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}

Bu yeni tema dizayneri bizim yaşadığımız eyni ah-hah anına sahib idi. İnşallah, indi mövzu dizaynında bədən sinifindən necə istifadə edə biləcəyinizi öyrənirsiniz. Ancaq gözləyin, bu daha da güclənir, çünki filtrdən istifadə edərək xüsusi bədən dərsləri əlavə etmək yolu var. Bunun necə olacağına bir nəzər salaq.

Xüsusi bədən siniflərini necə əlavə etmək olar

WordPress lazım olduqda xüsusi bədən dərsləri əlavə etmək üçün istifadə edə biləcəyiniz bir filtrə malikdir. Hər kəsin eyni səhifədə olması üçün xüsusi istifadə vəziyyətinin ssenarisini göstərməzdən əvvəl filtrdən istifadə edərək bədən sinifini necə əlavə edəcəyinizi sizə göstərəcəyik.

Bədən dərsləri mövzuya məxsus olduğuna görə funksiyalarınızı.php faylında xüsusi bir funksiya yazmalısınız:

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

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

Yuxarıdakı kod veb saytınızın hər səhifəsindəki bədən etiketinə bir sinif “test-class-name” əlavə edəcəkdir. Bu o qədər də pis deyil, elə deyilmi? Bu funksiyanın həqiqi gücü şərti etiketlərdə. XYZ sinifini yalnız fərdi səhifələrdə və s. Əlavə edə bilərsiniz. Bu nümunəni götürək və faktiki istifadə ssenarisinə tətbiq edək.

Fərdi poçt səhifələrinə kateqoriya sinif əlavə edin

Hər bir kateqoriya üçün fərdi poçt səhifələrini düzəltmək istədiyinizi söyləyin. Fərdi uyğunlaşdırma növündən asılı olaraq bunun üçün bədən siniflərindən istifadə edə bilərsiniz. İşlərinizi sadə saxlamaq üçün deyək ki, fərdi yazıların kateqoriyasına əsasən səhifənin arxa rəngini dəyişdirmək istəyirsiniz. Bunu tək dərc edilmiş səhifə görünüşlərinə kateqoriya dərsləri əlavə etməklə edə bilərsiniz. Aşağıdakı funksiyanı temanın funksiyaları.php faylına yapışdırın:

// 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');

Yuxarıda göstərilən kod tək sinif səhifələr üçün kateqoriya kateqoriyasını bədən siniflərinizə əlavə edəcəkdir. İstədiyiniz kimi dizayn etmək üçün css dərslərindən istifadə edə bilərsiniz.

WordPress mövzularınızın bədən sinifində səhifə şlak əlavə edin

Aşağıdakı kodu temanın funksiyaları.php faylına yapışdırın:

//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' );

Bunun niyə lazım olduğunu izah edəcək bədən sinif səhifəsindəki şlakdakı məqaləmizi oxuyun.

Brauzer aşkarlanması və brauzerə məxsus bədən sinifləri

Bəzən hər şeyin müəyyən brauzerlərdə düzgün işləməsi üçün xüsusi CSS üslublarına ehtiyacınız ola bilər (Sugerencia: Internet Explorer). Yaxşı, Natan Rays, istifadəçinin sayta daxil olduğu brauzer əsasında bədən sinifinə brauzerin xüsusi siniflərini əlavə edən çox maraqlı bir həll təklif etdi.

Bunun üçün aşağıdakı kodu funksiyalarınıza köçürmək lazımdır: php:


Sonra dərsləri istifadə edə bilərsiniz:

.ie .navigation {some item goes here}

Kiçik bir margin və ya boşalma problemi varsa, bu düzəltməyin olduqca sürətli bir yolu.

Daha çox istifadə halları:

Yəqin ki, daha çox istifadə vəziyyətini sadalaya bilərik, amma bu olmaz, əks halda bu məqalə nəzarətdən çıxacaq. Əsas məqsəd yeni mövzuların inkişaf etdiricilərinə WordPress bədən sinifinin əsas anlayışlarını və üstünlüklərini anlamaqda kömək etmək idi. İstifadə halları yalnız təsəvvürünüzlə məhdudlaşır. İş mövzusunu inkişaf etdirənlər (Yaradılış) bədən dizaynlarını müxtəlif dizayn variantlarını təklif etmək üçün istifadə etdiklərini gördük. Məsələn, Tam Səhifənin Layihəsi, Yan Yardım Məzmunu, Məzmun Yan Tərkibi və s. Bunu etməklə, istifadəçi görünüşü ilə bağlı narahatlıq keçirmədən səhifələrinin dizaynını asanlıqla dəyişdirə bilər, çünki artıq CSS ilə düzəldilmişdir.0

Bəzi inkişaf etdiricilərin təklif etdikləri müxtəlif rəng sxemləri üçün CSS fayllarını yükləmək üçün HTTP sorğularını əlavə etdiklərini gördük. Bir çox hallarda dəyişikliklər də çox azdır. Heç bir şarj yoxdur 3 iş edilə biləcəyi zaman üslub cədvəlləri. Bunun üçün bədən sinifindən istifadə edin.

İnşallah bu məqalə sizə faydalı oldu. Body Class haqqında fikirlərinizi və keçmişdə necə istifadə etməyinizi və ya gələcəkdə bunu planlaşdırmağı eşitməkdən məmnun olarıq.