WordPress tema tasarımcısı olmak istiyorsanız, CSS'de ustalaşmak iş akışınızda daha fazla kontrol, özelleştirme ve verimlilik sağlamanın anahtarıdır.
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 web sitesindeki her sayfanın <body> bölümüne otomatik olarak eklenir.
Bu makalede WordPress vücut sınıfını açıklayacağız. Ayrıca, projelerinizi geliştirmenize yardımcı olmak için yılların tema geliştirme deneyiminden yararlanarak WordPress vücut sınıflarını kullanma konusunda ipuçları ve püf noktaları paylaşacağız.
Here is a quick overview of what you’ll learn in this article.
- WordPress Body Class Nedir?
- WordPress Body Class Ne Zaman Kullanılır
- Özel Body Sınıfları Nasıl Eklenir
- WordPress Eklentisi Kullanarak Gövde Sınıfı Ekleme
- Koşullu Etiketleri Gövde Sınıfı ile Kullanma
- Dinamik Olarak Özel Gövde Sınıfları Eklemenin Diğer Örnekleri
- Tarayıcı Algılama ve Tarayıcıya Özel Gövde Sınıfları
- WordPress Tema Tasarımı Üzerine Uzman Rehberleri
WordPress Body Class Nedir?
Gövde sınıfı (body_class), CSS sınıflarını gövde öğesine atamanıza olanak tanıyan bir WordPress fonksiyonudur.
HTML body etiketi normalde her sayfada yüklenen bir temanın header.php dosyasında başlar. Bu, kullanıcının hangi sayfayı görüntülediğini dinamik olarak belirlemenize ve buna göre CSS sınıfları eklemenize olanak tanır.
Normalde, çoğu başlangıç teması ve çerçevesi zaten HTML body etiketinin içine body sınıfı fonksiyonunu dahil eder. Ancak, temanızda yoksa, body 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ında iseniz, WordPress otomatik olarak body elementine archive sınıfını ekleyecektir. Bunu hemen hemen her sayfa için yapar.
İlgili: WordPress'in perde arkasında nasıl çalıştığını görün (infografik).
Görüntülenen sayfaya bağlı olarak WordPress'in ekleyebileceği yaygın sınıflardan bazı örnekler şunlardı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üğünüz gibi, elinizde bu kadar güçlü bir kaynak varken, yalnızca CSS kullanarak WordPress sayfanızı tamamen özelleştirebilirsiniz. Belirli yazar profil sayfalarını, tarihe dayalı 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 Body Class 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 belirtilen tüm WordPress tarafından oluşturulan CSS sınıflarını otomatik olarak dahil edecektir.
Bundan sonra, gövde öğesine kendi özel CSS sınıflarınızı da ekleyebileceksiniz. Bu sınıfları istediğiniz zaman ekleyebilirsiniz.
Örneğin, belirli bir kategoride yer alan belirli bir yazarın makalelerinin görünümünü değiştirmek istiyorsanız.
Özel Body 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 olduğundan emin olmak için, belirli kullanım senaryosunu göstermeden önce filtreyi kullanarak bir gövde sınıfının nasıl ekleneceğini göstereceğiz.
Body sınıfları temaya özgü olduğundan, aşağıdaki kodu temanızın functions.php dosyasına veya bir kod parçacığı 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 sayfada body etiketine “wpb-class” sınıfını ekleyecektir.
Bu kodu, piyasadaki en iyi kod parçacığı eklentisi olan WPCode ile eklemenizi öneririz. Bu, temanızın functions.php dosyasını düzenlemeden özel kodu WordPress'e eklemeyi güvenli ve kolay hale getirir.
Öncelikle, ücretsiz WPCode eklentisini yükleyip etkinleştirmeniz gerekir. Talimatlara ihtiyacınız varsa, bir WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza bakın.
Eklenti etkinleştirildikten sonra, WordPress kontrol panelinizden Kod Parçacıkları » + Parçacık Ekle bölümüne gidin.
Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğini bulun ve altındaki ‘+ Özel Parçacık Ekle’ düğmesine tıklayın.
Oradan, ekranda görünen seçenekler listesinden bir kod türü seçmeniz gerekir.
Bu eğitim için, ‘PHP Snippet’ (PHP Parçacığı) seçin.
Ardından, kodun ne işe yaradığını hatırlamanıza yardımcı olacak bir başlık ekleyin.
Ardından, yukarıdaki kodu 'Kod Önizleme' kutusuna yapıştırın.
Bundan sonra, anahtarı 'Etkin Değil'den 'Etkin'e getirin ve 'Parçacığı Kaydet' düğmesine tıklayın.
Artık bu CSS sınıfını temanızın stil sayfasında doğrudan kullanabilirsiniz.
Kendi web siteniz üzerinde çalışıyorsanız, CSS'i WordPress tema özelleştiricisindeki özel CSS özelliğini kullanarak da ekleyebilirsiniz.
Daha fazla ayrıntı için, WordPress sitenize özel CSS'yi kolayca ekleme hakkındaki 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 Özel Body Sınıfı eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Etkinleştirdikten sonra, Ayarlar » Özel Gövde Sınıfı sayfasına gitmeniz gerekir. Buradan eklenti ayarlarını yapılandırabilirsiniz.
Vücut sınıfı özelliğini etkinleştirmek istediğiniz gönderi türlerini ve 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üzenlemeye gidebilirsiniz. Gönderi düzenleme ekranında, sağ sütunda 'Gönderi Sınıfları' etiketli yeni bir meta kutusu bulacaksınız.
Özel CSS sınıflarınızı eklemek için tıklayın. Birden fazla sınıfı boşlukla ayırarak ekleyebilirsiniz.
İşiniz bittiğinde, gönderinizi kaydedebilir veya yayınlayabilirsiniz. Eklenti artık özel CSS sınıflarınızı o belirli gönderi veya sayfa için body sınıfına ekleyecektir.
Koşullu Etiketleri Gövde Sınıfı ile Kullanma
body_class fonksiyonunun gerçek gücü, koşullu etiketlerle birlikte kullanıldığında ortaya çıkar.
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, is_home koşullu etiketi, şu anda görüntülenen sayfanın ana sayfa olup olmadığını kontrol eder.
Bu, tema geliştiricilerinin body_class fonksiyonuna özel bir CSS sınıfı eklemeden önce bir koşulun doğru veya yanlış olup olmadığını kontrol etmelerini sağlar.
Vücut sınıfına özel sınıflar eklemek için koşullu etiketlerin kullanımına ilişkin bazı örneklere bakalım.
Diyelim ki ana sayfanızı, yazar kullanıcı rolüne sahip oturum açmış kullanıcılar için farklı şekilde biçimlendirmek istiyorsunuz. WordPress otomatik olarak bir .home ve .logged-in sınıfı oluştursa da, kullanıcı rolünü algılamaz veya onu bir sınıf olarak eklemez.
Şimdi, bu, özel bir sınıfı dinamik olarak body sınıfına eklemek için koşullu etiketleri bazı özel kodlarla kullanabileceğiniz bir senaryodur.
Bunu başarmak için aşağıdaki kodu temanızın functions.php dosyasına veya kod parçacığı 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 kullanışlı bir ö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, az önce eklediğimiz yeni özel CSS sınıfını kullanmak için aşağıdaki CSS'yi temanın stil sayfasına ekleyeceğiz.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Demo sitemizde görünümü şöyleydi:
WordPress'te kodunuz için kullanışlı, kullanıma hazır etiketler kümesi sağlayacak olan, kullanabileceğiniz koşullu etiketlerin tam listesini incelemek isteyebilirsiniz.
Dinamik Olarak Özel Gövde Sınıfları Eklemenin Diğer Örnekleri
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.
Tekil gönderi sayfasının vücut sınıfına kategori adları ekleme
Kategorilendirildikleri kategoriye göre tekil gönderilerin görünümünü özelleştirmek istediğinizi varsayalım. Bunu başarmak için body sınıfını kullanabilirsiniz
Öncelikle, tek gönderi sayfalarında CSS sınıfı olarak kategori adları eklemeniz gerekir. Bunu yapmak için, aşağıdaki kodu temanızın functions.php dosyasına veya WPCode gibi bir kod parçacığı 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, tekil gönderi sayfaları için kategori sınıfını gövde sınıfınıza ekleyecektir. Ardından, istediğiniz gibi stil vermek için CSS sınıflarını kullanabilirsiniz.
Sayfa slug'ını body sınıfına ekleme
Şu kodu temanızın functions.php dosyasına veya bir kod parçacığı 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, bu kodu WordPress'te WPCode gibi bir kod parçacığı eklentisi kullanarak eklemenizi öneririz. Bu şekilde, sitenizi bozma endişesi yaşamazsınız.
Önce ücretsiz WPCode eklentisini kurun ve etkinleştirin. Yardımcı olması için WordPress eklentisi nasıl kurulur konusundaki bu kılavuzu izleyin.
Eklenti etkinleştirildikten sonra, WordPress kontrol panelinden Kod Parçacıkları » Parçacık Ekle'ye gidin.
Ardından, ‘Özel Kod Ekle (Yeni Kod Parçacığı)’ seçeneğinin altındaki ‘Kod Parçacığını Kullan’ düğmesine tıklayın.
Ardından, kod türü olarak 'PHP Parçacığı'nı seçin.
Bundan sonra, kod parçacığınız için bir başlık ekleyin ve yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırın.
Son olarak, anahtarı 'Etkin Değil'den 'Etkin' konumuna getirin ve 'Parçacık 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, tarayıcıyı yükleme sırasında otomatik olarak algılar ve bu bilgiyi geçici olarak genel bir değişken olarak depolar.
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.
Aşağıdaki kodu temanızın functions.php dosyasına veya kod parçacıkları eklentisine yapıştırmanız yeterlidir:
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');
Ardından şunlar gibi sınıfları kullanabilirsiniz:
.ms-edge .navigation {some item goes here}
Eğer küçük bir dolgu veya kenar boşluğu sorunuysa, bu onu 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 var. Ö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şlikli 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ı Üzerine Uzman Rehberleri
Daha fazla öğretici mi arıyorsunuz? WordPress'te tema tasarımı hakkındaki diğer kılavuzlarımıza göz atın:
- Herhangi Bir WordPress Temasına Paralaks Efekti Nasıl Eklenir
- WordPress'te Alt Bilgi Nasıl Düzenlenir (4 Yol)
- WordPress Blogunuza Düşen Kar Taneleri Nasıl Eklenir?
- WordPress Temasını Özelleştirmeyi Kaybetmeden Nasıl Güncellersiniz
- WordPress'te Web Sitesi Tasarımı Geri Bildirimi Nasıl Alınır
Umarız bu makale, temalarınızda WordPress body sınıfını nasıl kullanacağınızı öğrenmenize yardımcı olmuştur. Ayrıca her WordPress gönderisini farklı şekilde nasıl stilize edeceğiniz hakkındaki makalemizi ve en iyi WordPress sayfa oluşturucu eklentileri karşılaştırmamızı da görmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Mrteesurez
WordPress vücut sınıfı hakkındaki bu ipuçlarını ve kodları paylaştığınız için teşekkürler, WordPress geliştirmeyle ilgilendiğim için bu sınıfı burada öğreniyorum, bu yüzden bu gönderi daha fazla WordPress sınıfını ve işlevini anlamam için faydalı oldu.
jenny
Lütfen timsahı alt etme temasıyla ilgili bir örnek verin lütfen
Corrinda
Gövde sınıfı ile ilgili bir dizi makaleyi okuduktan sonra teşekkürler, bu nihayet anladığım makale oldu.
Anladım, bireysel sayfalarda ve kategori sayfalarında çalışıyor, harika. Kullanım senaryoları benim için farkı yarattı.
Yayın Kadrosu
Harika. Yardımcı olabildiğime sevindim.
Yönetici
Yolanda
Harika ipuçları! Menü sınıfını (yönetici panelinde girebildiğiniz) body_class'a nasıl ekleyeceğimi anlamaya çalışıyorum:
[pre]
/** Nav menü CSS sınıfını body sınıfına ekle */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Harika ipuçları. Bunu yapmaya çalışıyorum ve başlık dosyama şunları eklerken: “sayfa-şablonu sayfa-şablonu-(şablon dosya adı)”
Ve ardından CSS'mi şunları içerecek şekilde değiştiririm: .page-template-home_corechella
Tamamen boş bir sayfam var. Hiçbir şey. Yanlış ne yapıyorum? Teşekkürler!
Yayın Kadrosu
body_class etiketleri olduğu sürece sayfa şablonları ana sayfaya otomatik olarak eklenir. Yanlış yaptığınızı görmek için dosyayı görmem gerekir. Pastebin gibi üçüncü taraf bir hizmet kullanın ve ardından bağlantıyı buraya yapıştırın.
Yönetici
Seth
Tamam, çok teşekkürler!
Yazımdan bu yana yaklaşımı biraz değiştirdim (artık sayfa şablonu yerine kullanıyorum), ancak benzer bir sorun yaşanıyor – doğru gövde CSS'si (body.corechella) gösterilmiyor. Orijinal gövde sınıfı öncelik kazanıyor.
Corechella Sayfa şablonu (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php dosyası – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (yeni body sınıfı en altta) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Yayın Kadrosu
header.php dosyanızda, body sınıfını şu şekilde tutmalısınız:
1-click Use in WordPress
CSS'nizde, body.corchella yerine sadece .corchella kullanın
Michael
Harika bir yazı, teşekkürler
Yayın Kadrosu
Glad you found it helpful
Yönetici
Reşa
Kategori kullanarak gönderileri alan bir haber sayfam var. İçeriği geniş ve kenar çubuğu olmadan yapmak için ona özel bir sınıf vermek istiyorum, bunu nasıl yapabilirim?
Vajrasar
Gerçekten iyi bir yazı ve çok bilgilendirici. Sadece bir soru – Örneğin, Tarayıcıya Özel Gövde Sınıfını bugün eklersem ve birkaç gün sonra Gövde Sloganı'na Sayfa Sınıfı uygulamam gerekirse. O zaman Tarayıcıya Özel Gövde sınıfıyla yaptığım ayarlar/CSS bozulur mu yoksa bozulmaz mı?
Yayın Kadrosu
Hayır, bozulmaz. CSS'nizin nasıl yazıldığına bağlı olarak geçersiz kılınabilir.
Yönetici