WordPress Body Class 101: Tema tasarımcıları için ipuçları ve püf noktaları

Temanızda CSS kullanmanın yeni yollarını arayan potansiyel bir WordPress tema tasarımcısı mısınız? Neyse ki, WordPress, temanızda kullanabileceğiniz bir CSS sınıfı otomatik olarak ekler. Bu CSS sınıflarından bazıları, WordPress sitesindeki her sayfadan bölümüne otomatik olarak eklenir. Bu makalede, WordPress Body sınıfını, potansiyel tema tasarımcılarının projelerinde kullanmaları için ipuçları ve püf noktaları ile açıklayacağız.
Menggunakan kelas tubuh WordPress untuk pengembangan tema
İşte bu makalede ne öğreneceğinizin kısa bir özeti.
WordPress’in vücut sınıfı nedir?
Vücut sınıfını ne zaman kullanmalı
Özel vücut sınıfları nasıl eklenir
Eklentiler kullanarak vücut sınıfları nasıl eklenir
Özel gövde sınıfları eklemek için koşullu etiketler kullanın
Dinamik olarak özel vücut sınıfları eklemenin daha fazla örneği
Kullanıcının tarayıcısını algılayın ve özel bir gövde sınıfı tarayıcı sınıfı ekleyin
WordPress’in vücut sınıfı nedir? Body Class (Body_Class), CSS sınıfını vücudun öğelerine belirlemenizi sağlayan bir WordPress işlevidir.
HTML gövde etiketleri genellikle her sayfada yayınlanan header.php başlık dosyasında başlar. Bu, kullanıcıyı hangi sayfaları göreceğinizi dinamik olarak bulmanıza ve ardından uygun CSS sınıfını eklemenizi sağlar. Genellikle temaların ve yeni başlayan çerçevelerin çoğu, HTML gövde etiketindeki vücut sınıfının işlevini içermiştir. Ancak, temanız yoksa, vücut etiketlerini şöyle değiştirerek ekleyebilirsiniz: <Body > Görüntülenen sayfaların türüne bağlı olarak, WordPress otomatik olarak uygun sınıfı ekler.
Örneğin, arşiv sayfasındaysanız, WordPress otomatik olarak bedenin öğelerine arşiv sınıfları ekler. Bu hemen hemen her sayfa için yapılır. İlgili: WordPress’in ekranın arkasında nasıl çalıştığını görün (Infographic) İşte hangi sayfanın görüntülenmesine bağlı olarak WordPress’in eklenebileceği genel sınıfların bazı örnekleri: .rtl {} .Home {}
.Blog {}
.Arşiv {}
.tarih {}
.arama {}
.pated {}
.ek {}
.Hata 404 {}
.Single Postid- (id) {}
.attachmentid- (id) {}
.attachment- (MIME-Type) {}
.yazar {}
.Author- (user_nicename) {}
.category {}
.category- (sümüklü) {}
.etiket {}
.tag- (sümüklü) {}
.Page-Pant {}
.Page-child ana-pageid- (id) {}
.Page-Template Page-TEMPLATE- (Dosya Adı Şablonu) {}
.Arama Sonuçları {}
.Search-no-rezorts {}
.giriş {}
.Paged- (sayfa numarası) {}
.Single-sayfalı- (sayfa numarası) {}
.Page-sayfalı- (sayfa numarası) {}
.category-sayfalı- (sayfa numarası) {}
.Tag-sayfalı- (sayfa numarası) {}
.date-sayfalı- (sayfa numarası) {}
.Author-sayfalı- (sayfa numarası) {}
.search-paged- (sayfa numarası) {}
Gördüğünüz gibi, güçlü kaynaklara sahip olarak, WordPress sayfanızı yalnızca CSS kullanarak tam olarak ayarlayabilirsiniz. Belirli yazar profil sayfalarını, tarihe dayalı arşivleri vb. Ayarlayabilirsiniz.
Bu nedenle, şimdi vücut sınıfını nasıl ve ne zaman kullanacağınızı görelim. İlk WordPress vücut sınıfını ne zaman kullanacağınız, vücudunuzun vücut elemanlarının yukarıda gösterildiği gibi vücut sınıfının işlevini içerdiğinden emin olmanız gerekir. Evet ise, yukarıda belirtilen WordPress tarafından üretilen tüm CSS sınıflarını otomatik olarak dahil edecektir. Bundan sonra, vücut öğesine kendi özel CSS sınıfınızı da ekleyebilirsiniz. Bu sınıfları ihtiyacınız olduğunda ekleyebilirsiniz. Örneğin, belirli kategoriler altında gönderilen belirli yazarlar tarafından makalenin görünümünü değiştirmek istiyorsanız. Özel gövde 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 özel bir kullanım senaryosu göstermeden önce bir filtre kullanarak vücut sınıfını nasıl ekleyeceğinizi göstereceğiz. Body Class özel bir tema olduğundan, function.php file.fonction my_class_names ($ classes) {
// $ sınıf dizisine ‘class-name’ ekle
$ sınıflar [] = ‘wpb-class’;
// $ sınıf dizisini döndür
Dönüş $ sınıfları;
}
// Şimdi filtreye test sınıfı ekleyin
add_filter (‘body_class’, ‘my_class_names’);
Yukarıdaki kod, web sitenizdeki her sayfadaki gövde etiketine “WPB-Sınıfı” sınıfını ekleyecektir. Bu çok 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 ayarında özel bir CSS özelliği kullanarak CSS de ekleyebilirsiniz.
WordPress eklentilerini kullanarak gövde sınıfları eklemek, istemci projeleri ü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 gövde sınıfı eklentisini yüklemek ve etkinleştirmektir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. Aktivasyondan sonra, Ayarlar sayfasını ziyaret etmeniz gerekir »Özel Body Class. Buradan eklenti ayarlarını yapılandırabilirsiniz. Vücut sınıfı özelliklerini etkinleştirmek istediğiniz ve ona erişebileceğiniz yazı türünü seçebilirsiniz. Ayarlarınızı kaydetmek için Değiştir düğmesini tıklamayı unutmayın. Ardından, WordPress sitenizdeki yayınları veya sayfaları düzenlemeye gidebilirsiniz. Düzenleme sonrası ekranda, sağ sütunda ‘Post sınıfları’ etiketli yeni bir meta kutusu bulacaksınız.
CSS özel sınıfınızı eklemek için tıklayın. Boşluklarla ayrılmış birkaç sınıf ekleyebilirsiniz. İşiniz bittiğinde, yalnızca yayınınızı kaydetmeniz veya yayınlamanız gerekir. Eklenti şimdi belirli yayınlar veya sayfalar için özel CSS sınıfınızı içerik sınıfına ekleyecektir.
Menambahkan CSS khusus di penyesuai tema
Body_class işlevinden gerçek gövde vücut kuvveti ile koşullu etiketler kullanmak, koşullu etiketlerle kullanıldığında görünür.
Pengaturan Kelas Tubuh Khusus
Bu koşullu etiket, WordPress’te bir durumun doğru veya yanlış olup olmadığını kontrol eden doğru veya yanlış bir veri türüdür. Örneğin, koşullu etiket IS_HOME şu anda görüntülenen sayfanın ana sayfa olup olmadığını kontrol eder. Bu, tema geliştiricilerin, Body_Class işlevine özel bir CSS sınıfı eklemeden önce bir durumun doğru veya yanlış olup olmadığını kontrol etmelerini sağlar. İçindekiler sınıfına özel sınıflar eklemek için koşullu etiketlerin kullanımına ilişkin bazı örneklere bakalım. WordPress otomatik olarak .home ve .logged-in sınıfını üretirken, kullanıcının rolünü algılamaz veya bir sınıf olarak eklemez. Şimdi bu, içerik sınıfına dinamik olarak özel sınıflar eklemek için bazı özel kodlara sahip koşullu etiketleri kullanabileceğiniz bir senaryo. Bunu başarmak için, functions.php dosyasına aşağıdaki kodu ekleyeceksiniz.
Menambahkan kelas tubuh ke posting di WordPress
// ana sayfa olup olmadığını kontrol edelim
if (is_home ()) {

// Şimdi oturum açılan kullanıcının yazar kullanıcı rolü olup olmadığını kontrol edelim.
$ user = wp_get_current_user ();
if (in_array (‘yazar’, (dizi) $ kullanıcı-> roller) {
// kullanıcının “yazar” rolü var
// vücut sınıfına kullanıcı rolü ekleyin
$ sınıflar [] = ‘yazar’;
// Sınıf dizisini döndür
Dönüş $ sınıfları;
}
} başka {
// Ana sayfa değilse, sadece varsayılan sınıfları döndür
Dönüş $ sınıfları;
}
}
add_filter (‘body_class’, ‘wpb_loggedin_user_role_class’);
Şimdi, diğer yararlı örnekleri görelim. Bu kez görüntülenen sayfanın WordPress taslağının bir önizlemesi olup olmadığını kontrol edeceğiz.
Bunu yapmak için koşullu etiketi kullanacağız ve ardından özel CSS sınıfımızı ekleyeceğiz. Function add_preview_class ($ classs) {if (is_pienciew ()) {
$ sınıflar [] = ‘önizleme kodu’;
Dönüş $ sınıfları;
}
Dönüş $ sınıfları;
}
add_filter (‘body_class’, ‘add_preview_class’);
Şimdi, yeni eklediğimiz yeni özel CSS sınıfını kullanmak için stil sayfası temamıza aşağıdaki CSS’yi ekleyeceğiz.
İçerik: ‘Önizleme Modu’;
Renk: #fff;
Arka plan-rengi:#FF0000;
}
Bu, demo sitemizdeki görünüm:
WordPress’te kullanabileceğiniz koşullu etiketlerin tam bir listesini görmek isteyebilirsiniz. Bu, kodunuz için pratik olan bir dizi hazır etiket verecektir.
Dinamik özel gövde sınıfı eklemenin başka bir örneği, koşullu etiketlerin yanı sıra, WordPress veritabanından bilgi almak ve içerik sınıfı için özel bir CSS sınıfı oluşturmak için başka teknikleri de kullanabilirsiniz. Kategorinin adını bir sayfa yazısından vücut sınıfına ekleyin, girdikleri kategoriye göre tek bir yazının görünümünü ayarlamak istediğinizi varsayalım. Body Class’ı önce elde etmek için kullanabilirsiniz, kategorinin adını tek yazı sayfasına CSS sınıfı olarak eklemeniz gerekir. Bunu yapmak için, Dosya işlevine aşağıdaki kodu ekleyin.
İşlev category_id_class ($ sınıflar) {
Global $ Post;
foreach ((get_the_category ($ post-> id)) $ kategori olarak)
Kelas CSS mode pratinjau khusus ditambahkan ke kelas tubuh
$ sınıflar [] = $ category-> category_nicename;
Dönüş $ sınıfları;
}
add_filter (‘body_class’, ‘category_id_class’);
Yukarıdaki kod, tek bir posta sayfası için vücut sınıfınıza bir sınıf kategorisi ekleyecektir. Daha sonra istediğiniz gibi düzenlemek için CSS sınıfını kullanabilirsiniz. Salyangoz sayfasına body class functions.php dosyasında aşağıdaki kodu verin.
Global $ Post;
if (isset ($ post)) {
$ sınıflar [] = $ post-> post_type. ‘-‘. $ post-> post_name;
}
Dönüş $ sınıfları;
}
add_filter (‘body_class’, ‘add_slug_body_class’);
Tarayıcıların ve belirli gövde sınıfları tarayıcısının tespiti bazen temanızın belirli tarayıcılar için ek CSS gerektirebileceği sorunlar bulabilirsiniz. Şimdi iyi haber şu ki, WordPress yüklenirken tarayıcıyı otomatik olarak algılıyor ve daha sonra bu bilgileri küresel bir değişken olarak geçici olarak saklıyor. Yalnızca WordPress’in belirli bir tarayıcı algılayıp algılmadığını ve ardından özel bir CSS sınıfı olarak ekleyip eklemediğini kontrol etmeniz gerekir. Yeterli, aşağıdaki kodu Fonksiyonlara Kopyala ve Yapıştır.
İşlev wpb_browser_body_class ($ classs) {
Global $ IS_IPHone, $ IS_CHROME, $ IS_SAFARI, $ IS_NS4, $ IS_OPERA, $ IS_MACIE, $ IS_WINIE, $ IS_GECKO, $ IS_LYNX, $ IS_IE, $ IS_EDED;
if ($ is_iphone) $ classs [] = ‘iPhone-safari’;
elseif ($ IS_CHROME) $ sınıflar [] = ‘Google-Chrome’;
elseif ($ is_safari) $ sınıflar [] = ‘Safari’;
elseif ($ IS_NS4) $ sınıflar [] = ‘netscape’;
elseif ($ IS_OPERA) $ sınıflar [] = ‘opera’;
elseif ($ is_macie) $ sınıflar [] = ‘mac-ie’;
elseif ($ IS_WINIE) $ sınıflar [] = ‘windows-ie’;
elseif ($ is_gecko) $ sınıflar [] = ‘firefox’;
elseif ($ is_lynx) $ sınıflar [] = ‘lynx’;
elseif ($ is_ie) $ classs [] = ‘internet-explorer’;
elseif ($ IS_EDED) $ sınıflar [] = ‘ms-kent’;
else $ sınıflar [] = ‘bilinmeyen’;
Dönüş $ sınıfları;
}
add_filter (‘body_class’, ‘wpb_browser_body_class’);
Daha sonra şu gibi sınıfları kullanabilirsiniz: .ms-kent. Navigasyon {bazı öğe buraya gider} Bu bir dolgu veya küçük marj problemi ise, bu düzeltmenin yeterince kolay bir yoludur. Body_class işlevini kullanmanın sizi uzun bir kod satırı yazmanızı sağlayabileceği daha fazla senaryo olmalıdır. Örneğin, Genesis gibi bir tema çerçevesi kullanıyorsanız, çocuğunuzun temasına özel sınıflar eklemek için kullanabilirsiniz. Tam genişlikte sayfa düzeni, yan çubuk içeriği, üstbilgiler ve altbilgiler vb. İçin CSS sınıfları eklemek için Body_Class işlevini kullanabilirsiniz. Bu makalenin temanızda WordPress Body sınıfını nasıl kullanacağınızı öğrenmenize yardımcı olur. Her WordPress Post’u farklı şekilde nasıl düzenleyeceğiniz ve en iyi WordPress sayfaları eklentilerimizin karşılaştırılması hakkındaki makalemizi de 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.