Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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.

Using WordPress body class for theme development
İşte bu makalede öğreneceklerinize hızlı bir genel bakış.

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.

Add a new custom code snippet in WPCode

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.

Paste code into WPCode and select PHP snippet as code type

Bundan sonra, anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın.

Activate and save your custom code snippet

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.

Adding custom CSS in theme customizer

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.

Custom Body Class settings

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.

Adding body classes to a post in WordPress

Ö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:

Custom preview mode CSS class added to the body class

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.

Add a new custom code snippet in WPCode

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.

Paste code snippet into WPCode

Son olarak, anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın.

Activate and save your custom code snippet

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:

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

14 yorumBir Cevap Bırakın

  1. Syed Balkhi

    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!

  2. jenny

    plsss give me example outwitting a crocodile theme plsssssssss

  3. Corrinda

    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.

  4. Yolanda

    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]

  5. Seth Burleigh

    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!

  6. Michael

    Great write up, thanks

  7. Rasha

    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 ?

  8. Vajrasar

    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

      No it will not get ruined. It can be overridden depending on how your CSS is written.

      Yönetici

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.