ev borcu WordPress sitesi
WordPress Body Class 101: Tema Tasarımcıları için İpuçları ve Püf Noktaları
CSS'yi temalarınızda kullanmanın yeni yollarını arayan, hevesli bir WordPress tema tasarımcısı mısınız?
Neyse ki WordPress, temalarınızda kullanabileceğiniz CSS sınıflarını otomatik olarak ekler. Bu CSS sınıflarından birkaçı, bir WordPress sitesindeki her sayfanın <body> bölümüne otomatik olarak eklenir.
Bu yazıda, tema tasarımcılarını projelerinde kullanmaları için WordPress vücut sınıfını ipuçları ve püf noktaları ile açıklayacağız.
İşte bu makalede öğreneceğiniz şeylere hızlı bir genel bakış.
- WordPress vücut sınıfı nedir?
- Beden sınıfı ne zaman kullanılır?
- Özel vücut sınıfları nasıl eklenir
- Bir eklenti kullanarak vücut sınıfı nasıl eklenir
- Özel gövde sınıfları eklemek için koşullu etiketleri kullanma
- Dinamik olarak özel gövde sınıfları eklemeye ilişkin daha fazla örnek
- Kullanıcı tarayıcısını algılama ve tarayıcıya özel gövde sınıfı ekleme
WordPress Vücut Sınıfı nedir?
Gövde sınıfı (body_class), gövde öğesine CSS sınıfları atamanıza izin veren bir WordPress işlevidir.
HTML gövde etiketi normalde bir temanın her sayfada yüklenen header.php dosyasında başlar. Bu, bir kullanıcının hangi sayfayı görüntülediğini dinamik olarak belirlemenize ve ardından buna göre CSS sınıflarını eklemenize olanak tanır.
Normalde çoğu başlangıç teması ve çerçevesi, HTML gövde etiketinin içindeki gövde sınıfı işlevini zaten içerir. Ancak, temanızda yoksa, gövde etiketini şu şekilde değiştirerek ekleyebilirsiniz:
<body <?php body_class($class); ?>>
Görüntülenen sayfanın türüne bağlı olarak, WordPress uygun sınıfları otomatik olarak ekler.
Örneğin, bir arşiv sayfasındaysanız, WordPress gövde öğesine otomatik olarak arşiv sınıfını ekler. Bunu hemen hemen her sayfada yapıyor.
İlgili: WordPress'in perde arkasında nasıl çalıştığını görün (infografik)
Aşağıda, hangi sayfanın görüntülendiğine bağlı olarak WordPress'in ekleyebileceği bazı yaygın sınıf örnekleri verilmiştir:
.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, elinizde böylesine güçlü bir kaynağa sahip olarak, yalnızca CSS kullanarak WordPress sayfanızı tamamen özelleştirebilirsiniz. Belirli yazar profili sayfalarını, tarihe dayalı arşivleri vb. özelleştirebilirsiniz.
Olduğu söyleniyor, şimdi beden sınıfını nasıl ve ne zaman kullanacağınıza bir göz atalım.
WordPress Vücut Sınıfı ne zaman kullanılır?
Öncelikle, temanızın gövde öğesinin yukarıda gösterildiği gibi gövde sınıfı işlevini içerdiğinden emin olmanız gerekir. Varsa, yukarıda bahsedilen WordPress tarafından oluşturulan tüm CSS sınıflarını otomatik olarak içerecektir.
Bundan sonra, body öğesine kendi özel CSS sınıflarınızı da ekleyebileceksiniz. İhtiyacınız olduğunda bu sınıfları ekleyebilirsiniz.
Örneğin, belirli bir kategori altında dosyalanan belirli bir yazara ait makalelerin görünümünü değiştirmek istiyorsanız.
Özel Vücut Sınıfları Nasıl Eklenir
WordPress, gerektiğinde özel gövde 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 nasıl bir gövde sınıfı ekleyeceğinizi göstereceğiz.
Gövde sınıfları temaya özel olduğundan, aşağıdaki kodu temanızın function.php dosyasına eklemeniz gerekir.
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');
Yukarıdaki kod, web sitenizdeki her sayfada gövde etiketine bir "wpb-class" sınıfı ekleyecektir. Bu o kadar da kötü değil, değil mi?
Artık bu CSS sınıfını doğrudan temanızın stil sayfasında kullanabilirsiniz. Kendi web sitenizde çalışıyorsanız, tema özelleştiricideki özel CSS özelliğini kullanarak CSS'yi de ekleyebilirsiniz.
WordPress Eklentisi Kullanarak Body Class Ekleme
Bir müşteri projesi üzerinde çalışmıyorsanız ve kod yazmak istemiyorsanız, bu yöntem sizin için daha kolay olacaktır.
Yapmanız gereken ilk şey, Custom Body Class eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Aktivasyon üzerine, Ayarlar » Özel Vücut Sınıfı sayfasını ziyaret etmeniz gerekir. Buradan eklenti ayarlarını yapılandırabilirsiniz.
Gövde sınıfı özelliğini etkinleştirmek istediğiniz gönderi türlerini ve buna kimlerin erişebileceğini seçebilirsiniz. Ayarlarınızı kaydetmek için değişiklikleri kaydet düğmesine tıklamayı unutmayın.
Ardından, WordPress sitenizdeki herhangi bir gönderiyi veya sayfayı düzenlemek için gidebilirsiniz. Yazı düzenleme ekranında, sağ sütunda 'Sınıf Sonrası' etiketli yeni bir meta kutusu bulacaksınız.
Özel CSS sınıflarınızı eklemek için tıklayın. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz.
İşiniz bittiğinde, gönderinizi kaydedebilir veya yayınlayabilirsiniz. Eklenti şimdi özel CSS sınıflarınızı söz konusu gönderi veya sayfa için gövde sınıfına ekleyecektir.
Vücut Sınıfıyla Koşullu Etiketleri Kullanma
body_class işlevinin gerçek gücü, koşullu etiketlerle kullanıldığında gelir.
Bu koşullu etiketler, WordPress'te bir koşulun doğru veya yanlış olup olmadığını kontrol eden doğru veya yanlış veri türleridir. Örneğin, koşullu etiket is_home , o anda görüntülenen sayfanın ana sayfa olup olmadığını kontrol eder.
Bu, tema geliştiricilerinin body_class işlevine özel bir CSS sınıfı eklemeden önce bir koşulun doğru veya yanlış olup olmadığını kontrol etmesine olanak tanır.
Gövde sınıfına özel sınıflar eklemek için koşullu etiketleri kullanmanın bazı örneklerine bir göz atalım.
Yazar kullanıcı rolüne sahip oturum açmış kullanıcılar için ana sayfanızı farklı şekilde biçimlendirmek istediğinizi varsayalım. WordPress otomatik olarak bir .home ve .logged-in sınıfı oluştururken, kullanıcı rolünü algılamaz veya sınıf olarak eklemez.
Şimdi, bu, gövde sınıfına dinamik olarak özel bir sınıf eklemek için bazı özel kodlarla koşullu etiketleri kullanabileceğiniz bir senaryodur.
Bunu başarmak için aşağıdaki kodu temanızın function.php dosyasına ekleyeceksiniz.
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');
Şimdi başka bir faydalı örneğe bakalım. Bu sefer görüntülenen sayfanın bir WordPress taslağının önizlemesi olup olmadığını kontrol edeceğiz.
Bunu yapmak için is_preview koşullu etiketini kullanacağız ve ardından özel CSS sınıfımızı ekleyeceğiz.
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
Şimdi, yeni eklediğimiz özel CSS sınıfını kullanmak için temamızın stil sayfasına aşağıdaki CSS'yi ekleyeceğiz.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Demo sitemizde böyle görünüyordu:
WordPress'te kullanabileceğiniz koşullu etiketlerin tam listesine göz atmak isteyebilirsiniz. Bu size kodunuz için kullanışlı bir kullanıma hazır etiket seti verecektir.
Dinamik Olarak Özel Vücut Sınıfları Eklemeyle İlgili Diğer Örnekler
Koşullu etiketlerin yanı sıra, WordPress veritabanından bilgi almak ve gövde sınıfı için özel CSS sınıfları oluşturmak için diğer teknikleri de kullanabilirsiniz.
Tek bir gönderi sayfasının gövde sınıfına kategori adları ekleme
Diyelim ki, tekil gönderilerin görünümünü, dosyalandıkları kategoriye göre özelleştirmek istiyorsunuz. Bunu başarmak için gövde sınıfını kullanabilirsiniz.
İlk olarak, tekli gönderi sayfalarında kategori adlarını CSS sınıfı olarak eklemeniz gerekir. Bunu yapmak için temanızın function.php dosyasına aşağıdaki kodu ekleyin:
// 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, tek gönderi sayfaları için vücut sınıfınıza kategori sınıfını ekleyecektir. Daha sonra istediğiniz gibi stil vermek için CSS sınıflarını kullanabilirsiniz.
Gövde sınıfına sayfa bilgisi ekleme
Aşağıdaki kodu temanızın functions.php dosyasına yapıştı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' );
Tarayıcı Algılama ve Tarayıcıya Özgü Vücut Sınıfları
Bazen temanızın belirli bir tarayıcı için ek CSS'ye ihtiyaç duyabileceği sorunlarla karşılaşabilirsiniz.
Şimdi iyi haber şu ki, WordPress yükleme sırasında tarayıcıyı otomatik olarak algılar ve ardından bu bilgiyi geçici olarak global bir değişken olarak depolar.
WordPress'in belirli bir tarayıcı tespit edip etmediğini kontrol etmeniz ve ardından onu özel bir CSS sınıfı olarak eklemeniz yeterlidir.
Basitçe, aşağıdaki kodu kopyalayıp temanızın function.php dosyasına yapıştırın:
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');
Daha sonra aşağıdaki gibi sınıfları kullanabilirsiniz:
.ms-edge .navigation {some item goes here}
Küçük bir dolgu veya kenar boşluğu sorunuysa, bu sorunu düzeltmenin oldukça kolay bir yoludur.
body_class işlevini kullanmanın sizi uzun kod satırları yazmaktan kurtarabileceği kesinlikle daha birçok senaryo vardır. Örneğin, Genesis gibi bir tema çerçevesi kullanıyorsanız, bunu alt temanıza özel sınıflar eklemek için kullanabilirsiniz.
Tam genişlikte sayfa düzenleri, kenar çubuğu içeriği, üstbilgi ve altbilgiler vb. için CSS sınıfları eklemek için body_class işlevini kullanabilirsiniz.
Bu makalenin, WordPress gövde sınıfını temalarınızda nasıl kullanacağınızı öğrenmenize yardımcı olacağını umuyoruz. Ayrıca, her bir WordPress gönderisinin nasıl farklı şekilde biçimlendirileceğiyle ilgili makalemizi ve en iyi WordPress sayfa oluşturucu eklentilerini karşılaştırmamızı görmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.