WordPress Body Class 101: Tema Tasarımcıları için İpuçları ve Püf Noktaları

wordpresstr · 3 Ara 2020

WordPress Body Class nedir?
Body Class (body_class), gövde öğesine farklı sınıflar veren bir WordPress işlevidir, böylece tema yazarları sitelerini CSS ile etkili bir şekilde biçimlendirebilirler. HTML gövde etiketi, çoğunlukla her sayfaya yüklenen header.php dosyanızda bulunur. Bir temayı kodlarken body_class işlevini body öğenize şu şekilde ekleyebilirsiniz:

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

Bu küçük öğeyi ekleyerek, kendinize CSS kullanarak her sayfanın görünümünü kolayca değiştirme esnekliği verirsiniz. WordPress, yüklenen sayfanın türüne bağlı olarak uygun sınıfı otomatik olarak ekler. Örneğin, bir arşiv sayfasındaysanız, WordPress, kullanmayı seçerseniz, gövde öğesine otomatik olarak arşiv sınıfı ekleyecektir. Bunu hemen hemen her sayfa için yapar. İşte WordPress'in ekleyebileceği bazı yaygın sınıf örnekleri:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.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üğünüz gibi, bu kadar güçlü bir kaynağa sahip olarak, WordPress sayfanızı sadece CSS kullanarak tamamen özelleştirebilirsiniz. Belirli yazar profil sayfalarını, tarihe dayalı arşivleri vb. Özelleştirebilirsiniz. Peki bunu nasıl ve ne zaman kullanırsınız?

WordPress Body Class nasıl kullanılır

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

Dikkat: Tüm tek yazı sayfalarına eklenen .single gövde sınıfını nasıl kullanır?
Ondan sonra kendimizi aptal hissetmedik. O zamandan beri, daha derine inmeden önce vücut sınıfıyla bir şeyler yapılıp yapılamayacağını görmek için bir not aldık.
Size başka bir örnek vermek gerekirse. Bir kullanıcı bize yaklaştığında, kategori sayfasına dayalı olarak web sitelerindeki logo resmini değiştirmenin bir yolunu sordu. Onunki dahil çoğu tema tasarımı, logoyu bir CSS (#header .logo) kullanarak yüklüyordu. Logosunu şu şekilde değiştirmek için .category-slug body sınıfını kullanmayı önerdik:

1 2	.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 tasarımcısı, sahip olduğumuz ah-hah anına sahipti. Umarım artık tema tasarımlarınızda vücut sınıfını nasıl kullanabileceğinizi öğrenmişsinizdir. Ama bekleyin, bu daha da güçlü hale geliyor çünkü bir filtre kullanarak özel vücut sınıfları eklemenin bir yolu var. Bunun nasıl yapılacağına bir göz atalım.
Özel Beden Sınıfları Nasıl Eklenir
WordPress, gerektiğinde özel vücut sınıfları eklemek için kullanabileceğiniz bir filtreye sahiptir. Herkesin aynı sayfada olabilmesi için size özel kullanım senaryosunu göstermeden önce filtreyi kullanarak bir vücut sınıfını nasıl ekleyeceğinizi göstereceğiz.
Vücut sınıfları temaya özel olduğundan, functions.php dosyanıza şu şekilde özel bir işlev yazmanız gerekir:

1
2
3
4
5
6
7
8
9

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

Yukarıdaki kod, web sitenizdeki her sayfada gövde etiketine bir "test sınıfı adı" sınıfı ekleyecektir. O kadar da kötü değil değil mi? Bu işlevin gerçek gücü koşullu etiketlerdedir . XYZ sınıfını sadece tek sayfalara vb. Ekle diyebilirsiniz. Bu örneği alalım ve gerçek kullanım senaryosuna uygulayalım.
Tek Gönderi Sayfalarına Kategori Sınıfı Ekleyin
Diyelim ki her kategorinin tek yazı sayfalarını özelleştirmek istiyorsunuz. Özelleştirme türüne bağlı olarak, bunun için vücut sınıflarını kullanabilirsiniz. İşleri basitleştirmek için, tek gönderilerin kategorisine göre sayfanın arka plan rengini değiştirmek istediğinizi varsayalım. Bunu, tek yazı sayfası görünümlerinize kategori sınıfları ekleyerek yapabilirsiniz. Aşağıdaki işlevi temanızın functions.php dosyasına yapıştırın:

1
2
3
4
5
6
7
8
9

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

Yukarıdaki kod, tekli gönderi sayfaları için gövde sınıfınıza kategori sınıfını ekleyecektir. Daha sonra istediğiniz gibi biçimlendirmek için css sınıflarını kullanabilirsiniz.
WordPress Temalarınızın Gövde Sınıfına Sayfa Slug'ı Ekleyin
Aşağıdaki kodu temanızın functions.php dosyasına yapıştırın:

1
2
3
4
5
6
7
8
9

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

Ara

Hoşgeldin Ziyaretçi

WordPress Body Class 101: Tema Tasarımcıları için İpuçları ve Püf Noktaları

wordpresstr

Administrator

Hakkımızda

Hızlı Linkler

Ekstra Linkler