Temalarınızda CSS 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ının birçoğu WordPress sitesindeki her sayfanın <body> bölümüne otomatik olarak eklenir.
Bu makalede, WordPress gövde sınıfını, hevesli tema tasarımcılarının projelerinde kullanmaları için ipuçları ve püf noktaları ile açıklayacağız.
İşte bu makalede öğreneceklerinize hızlı bir genel bakış.
- What is WordPress Body Class?
- When to Use the WordPress Body Class
- How to Add Custom Body Classes
- Adding Body Class Using a WordPress Plugin
- Using Conditional Tags with the Body Class
- Other Examples of Dynamically Adding Custom Body Classes
- Browser Detection and Browser Specific Body Classes
- Expert Guides on WordPress Theme Design
WordPress Body Class nedir?
Gövde sınıfı (body_class), gövde öğesine CSS sınıfları atamanızı sağlayan bir WordPress işlevidir.
HTML gövde etiketi normalde bir temanın header.php dosyasında başlar ve bu dosya her sayfada yüklenir. Bu, bir kullanıcının hangi sayfayı görüntülediğini dinamik olarak anlamanıza ve ardından CSS sınıflarını buna göre eklemenize olanak tanır.
Normalde, çoğu başlangıç teması ve çerçevesi body sınıfı işlevini HTML body etiketinin içine zaten dahil eder. Ancak, temanızda yoksa, body etiketini aşağıdaki gibi değiştirerek ekleyebilirsiniz:
<body <?php body_class($class); ?>>
Görüntülenen sayfanın türüne bağlı olarak, WordPress otomatik olarak uygun sınıfları ekler.
Örneğin, bir arşiv sayfasındaysanız, WordPress otomatik olarak body öğesine arşiv sınıfı ekleyecektir. Bunu hemen hemen her sayfa için yapar.
İlgili: WordPress’in perde arkasında nasıl çalıştığını görün (infografik).
Hangi sayfanın görüntülendiğine bağlı olarak WordPress’in ekleyebileceği bazı yaygın sınıf örnekleri aşağıda 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 kaynak varken, WordPress sayfanızı sadece CSS kullanarak tamamen özelleştirebilirsiniz. Belirli yazar profil sayfalarını, tarih tabanlı arşivleri vb. özelleştirebilirsiniz.
Bununla birlikte, şimdi body sınıfını nasıl ve ne zaman kullanacağınıza bir göz atalım.
WordPress Gövde Sınıfı Ne Zaman Kullanılır?
Öncelikle, temanızın body öğesinin yukarıda gösterildiği gibi body class işlevini içerdiğinden emin olmanız gerekir. Eğer içeriyorsa, 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. Bu sınıfları ihtiyaç duyduğunuzda ekleyebilirsiniz.
Örneğin, belirli bir kategori altında dosyalanmış 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 bir gövde sınıfının nasıl ekleneceğini göstereceğiz.
Gövde sınıfları temaya özgü olduğundan, aşağıdaki kodu temanızın functions.php dosyasına veya bir kod parçacıkları eklentisine 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 sayfanın body etiketine bir “wpb-class” sınıfı ekleyecektir.
Bu kodu piyasadaki en iyi kod parçacıkları eklentisi olan WPCode ile eklemenizi öneririz. Temanızın functions.php dosyasını düzenlemeden WordPress’e özel kod eklemeyi güvenli ve kolay hale getirir.
Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Talimatlara ihtiyacınız varsa, bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.
Eklenti etkinleştirildikten sonra, WordPress kontrol panelinizden Code Snippets “ Add Snippet seçeneğine gidin. Ardından, ‘Add Your Custom Code (New Snippet)’ seçeneğini bulun ve altındaki ‘Use snippet’ düğmesine tıklayın.
Ardından, snippet’iniz için bir başlık ekleyin ve yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırın. Ayrıca sağdaki açılır menüden kod türü olarak ‘PHP Snippet’i seçmeniz gerekir.
Bundan sonra, anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın.
Artık bu CSS sınıfını doğrudan temanızın stil sayfasında kullanabilirsiniz. Kendi web siteniz üzerinde çalışıyorsanız, CSS’yi WordPress tema özelleştiricisindeki özel CSS özelliğini kullanarak da ekleyebilirsiniz.
Daha fazla ayrıntı için WordPress sitenize nasıl kolayca özel CSS ekleyebileceğinize ilişkin kılavuzumuza bakın.
WordPress Eklentisi Kullanarak Gövde Sınıfı 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 yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından Ayarlar ” Özel Gövde Sınıfı sayfasını ziyaret etmeniz gerekir. Buradan eklenti ayarlarını yapılandırabilirsiniz.
Body class özelliğini etkinleştirmek istediğiniz gönderi türlerini ve bu özelliğe kimlerin erişebileceğini seçebilirsiniz. Ayarlarınızı saklamak için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.
Ardından, WordPress sitenizdeki herhangi bir yazıyı veya sayfayı düzenlemeye gidebilirsiniz. Yazı düzenleme ekranında, sağ sütunda ‘Yazı Sınıfları’ etiketli yeni bir meta kutusu bulacaksınız.
Özel CSS sınıflarınızı eklemek için tıklayın. Bir boşluk ile ayrılmış birden fazla sınıf ekleyebilirsiniz.
İşiniz bittiğinde, yazınızı kaydedebilir veya yayınlayabilirsiniz. Eklenti artık özel CSS sınıflarınızı söz konusu yazı veya sayfa için gövde sınıfına ekleyecektir.
Body Sınıfı ile Koşullu Etiketleri Kullanma
body_class fonksiyonunun gerçek gücü, koşullu etiketlerle birlikte kullanıldığında ortaya çıkar.
Bu koşul etiketleri, WordPress’te bir koşulun doğru veya yanlış olup olmadığını kontrol eden doğru veya yanlış veri türleridir. Örneğin, is_home koşullu etiketi 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 etmelerini sağlar.
Şimdi body sınıfına özel sınıflar eklemek için koşullu etiketlerin kullanımına ilişkin bazı örneklere göz atalım.
Diyelim ki yazar kullanıcı rolüne sahip oturum açmış kullanıcılar için ana sayfanızı farklı şekillendirmek istiyorsunuz. WordPress otomatik olarak bir .home ve .logged-in sınıfı oluştururken, kullanıcı rolünü algılamaz veya bir sınıf olarak eklemez.
Şimdi, bu, body sınıfına dinamik olarak özel bir sınıf eklemek için bazı özel kodlarla birlikte koşullu etiketleri kullanabileceğiniz bir senaryodur.
Bunu başarmak için aşağıdaki kodu temanızın functions.php dosyasına veya code snippets eklentisine 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 göz atalım. Bu kez 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, az önce eklediğimiz yeni özel CSS sınıfını kullanmak için aşağıdaki CSS’yi temamızın stil sayfasına ekleyeceğiz.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Demo sitemizde bu şekilde 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 dizi kullanıma hazır etiket sağlayacaktır.
Özel Gövde Sınıflarının Dinamik Olarak Eklenmesine İlişkin 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 başka teknikler 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 body sınıfını kullanabilirsiniz
Öncelikle, tekli yazı sayfalarına kategori adlarını CSS sınıfı olarak eklemeniz gerekir. Bunu yapmak için, aşağıdaki kodu temanızın functions.php dosyasına veya WPCode gibi bir kod parçacıkları eklentisine 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 yazı sayfaları için body 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.
Sayfa slug’ını body sınıfına ekleme
Aşağıdaki kodu temanızın functions.php dosyasına veya bir kod parçacıkları eklentisine 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' );
Yine, WPCode gibi bir kod parçacıkları eklentisi kullanarak bu kodu WordPress’e eklemenizi öneririz. Bu şekilde, sitenizi bozma konusunda endişelenmenize gerek kalmayacaktır.
Ücretsiz WPCode eklentisini yükleyip etkinleştirerek başlayın. Yardıma ihtiyacınız varsa, WordPress eklentisinin nasıl kurulacağına ilişkin bu kılavuzu izleyin.
Eklenti etkinleştirildikten sonra, WordPress kontrol panelinden Code Snippets “ Add Snippet seçeneğine gidin. Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet kullan’ düğmesine tıklayın.
Ardından, yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırın ve açılır menüden kod türü olarak ‘PHP Snippet’i seçin.
Son olarak, anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın.
Tarayıcı Algılama ve Tarayıcıya Özel Gövde 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 daha sonra bu bilgiyi geçici olarak global bir değişken olarak saklar.
WordPress’in belirli bir tarayıcıyı algılayıp algılamadığını kontrol etmeniz ve ardından bunu özel bir CSS sınıfı olarak eklemeniz yeterlidir.
Basitçe, aşağıdaki kodu kopyalayıp temanızın functions.php dosyasına veya kod parçacıkları eklentisine 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 sorunu varsa, bunu düzeltmenin oldukça kolay bir yoludur.
body_class fonksiyonunu 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, 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 üzere body_class işlevini kullanabilirsiniz.
WordPress Tema Tasarımı Hakkında Uzman Kılavuzları
Daha fazla eğitim mi arıyorsunuz? WordPress’te tema tasarımı hakkındaki diğer rehberlerimize göz atın:
- Herhangi Bir WordPress Temasına Paralaks Efekti Nasıl Eklenir?
- WordPress’te Altbilgi Nasıl Düzenlenir (4 Yol)
- WordPress Blogunuza Düşen Kar Taneleri Nasıl Eklenir
- Özelleştirmeyi Kaybetmeden WordPress Teması Nasıl Güncellenir?
- WordPress’te Web Sitesi Tasarımı Geri Bildirimi Nasıl Alınır?
Umarız bu makale WordPress body sınıfını temalarınızda nasıl kullanacağınızı öğrenmenize yardımcı olmuştur. Ayrıca her WordPress yazısını farklı şekilde biçimlendirmeye ilişkin makalemizi ve en iyi WordPress sayfa oluşturucu eklentileri karşılaştırmamızı da görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
jenny says
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda says
Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.
Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.
Editorial Staff says
Sweet. Glad to be able to help.
Yönetici
Yolanda says
Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:
[pre]
/** Add nav menu css class to body class */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh says
Great tips. I”m trying to do this, and when inserting “page-template page-template-(template file name)” into my header file such that I have:
<body >
And I then modify my CSS to include: .page-template-home_corechella
I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!
Editorial Staff says
The page-templates are added in the homepage automatically as long as you have the body_class tags. Would have to see the file to see what you are doing wrong. Use a third party service like pastebin, and then paste the link here.
Yönetici
Seth says
Ok, thank you very much!
I’ve changed the approach slightly since my post (now using instead of page template), but a similar problem is happening – the correct body CSS (body.corechella) is not showing. The original body class is taking priority.
Corechella Page template (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php file – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (the new body class is at the very bottom) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Editorial Staff says
In your header.php, you have to keep the body class like this:
1-click Use in WordPress
In your CSS, just use .corchella instead of body.corchella
Michael says
Great write up, thanks
Editorial Staff says
Glad you found it helpful
Yönetici
Rasha says
i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?
Vajrasar says
Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?
Editorial Staff says
No it will not get ruined. It can be overridden depending on how your CSS is written.
Yönetici