WordPress, varsayılan olarak, web sitenizi özelleştirmek için kullanabileceğiniz birçok farklı CSS sınıfı ekler. Bazıları
öğesinde bulunabilir. Bunlar body_class() işlevi sayesinde oluşturulur ve genellikle stil verme amacıyla kullanılır.İster mevcut WordPress bilginizi genişletmek isteyen genç ve hevesli bir geliştirici olun, ister ek stil hileleri öğrenmek isteyen bir WordPress web sitesi sahibi olun, bu işlev hakkında daha fazla bilgi edinmek buna değer olabilir. Bu yüzden bu makaleyi WordPress body_class ve kullanımları üzerine oluşturmaya karar verdik.
Daha fazla uzatmadan başlayalım. İşte hakkında konuşacağımız konular:
-
WordPress body_class Nedir ve Ne Zaman Kullanılır?
-
Bir Eklenti Kullanarak WordPress’te Özel Gövde Sınıfı Nasıl Eklenir?
-
Kod Kullanarak WordPress’te Özel Gövde Sınıfı Nasıl Eklenir?
WordPress body_class Nedir ve Ne Zaman Kullanılır?
WordPress body_class() işlevi, her WordPress sayfasında veya gönderisinde
öğesi için tüm sınıf adlarını görüntülemekten sorumludur. Bu işleve yapılan çağrının genellikle herhangi bir temanın header.php dosyasına eklenmesinin nedeni budur, çünkü bu dosya herhangi bir sayfada veya gönderide yüklenir. Daha kesin olarak, body_class() işlevine yapılan çağrı genellikle açılış etiketinden hemen sonra eklenir.Örnek olarak yazı için kullandığımız Lekker temasına ait header.php dosyasının ekran görüntüsünü ekledik. Ekran görüntüsünde,
açılış etiketi ve body_class() işlevine yapılan çağrı vurgulanmıştır.
Bununla birlikte body_class() işlevi, WordPress çekirdek dosyalarının bir parçasıdır ve wp-includes/post-template.php dosyasında bulunur. İşleve daha yakından bakıldığında, yine daha önce bahsedilen dosyanın bir parçası olan get_body_class() işlevi kullanılarak oluşturulan tüm sınıf adlarının yanı sıra class özniteliğini yankıladığı görülür.
get_body_class() işlevine gelince, bulunduğunuz sayfaya veya gönderiye göre dinamik olarak bir vücut sınıfı adları dizisi oluşturur. Örneğin sırasıyla ana sayfanız, blog sayfanız, gizlilik politikanız ve arama sayfanız için ana sayfa, blog, gizlilik politikası veya arama gibi sınıflar oluşturabilir. Bunu takiben, bir sayfada belirli bir sayfa şablonu etkinleştirildiyse, page-template veya page-template-
<> gösteriminin amacının ne olduğunu merak edenler için, sadece bazı durumlarda sınıf adının bir kısmının bile dinamik olarak oluşturulabileceğini göstermek içindir. Örneğin 321 kimliğine sahip bir gönderi, postid-321 sınıfına sahip olacaktır, bir portföy özel türü öğesi, tek portföy öğesi sınıfına sahip olabilir, eğer portföy öğesi, bu özel gönderi türünün parçasıysa, bir Yazarın güzel adı John Doe ise, yazar-john-doe sınıfına sahip olabilir.
Bununla birlikte belirli bir sayfada veya gönderide sağlanan belirli koşullara karşılık gelen oturum açmış, admin-bar, rtl veya wp-custom-logo gibi ek yararlı sınıflar vardır. Ayrıca bir sayfa veya gönderi, bu makalenin ana konusu olacak bazı özel sınıflar da içerebilir.
Fakat bu makalenin nasıl yapılacağına geçmeden önce, mevcut bir sayfada veya gönderide hangi vücut sınıfı adlarının bulunduğunu belirleme yolunu ve bu sınıfların veya herhangi bir özel sınıfın nasıl kullanılabileceğini açıklamamız gerekiyor.
İlk olarak, herhangi bir sayfanın veya gönderinin tüm gövde sınıfı adlarını bulmak için, onu tarayıcı inceleme aracını kullanarak incelemeniz gerekir. Bunu yapmak için incelemek istediğiniz bir sayfayı veya gönderiyi açın ve içinde herhangi bir yeri sağ tıklayın. Ardından açılan menüden “İncele” seçeneğine tıklayın.
Bu durum mevcut tarayıcınızın geliştirici araçlarını açacak ve sizi sağ tıkladığınız HTML öğesinin Öğeler sekmesine yerleştirecek ve bu öğe de sayfada vurgulanacaktır.
Uygun CSS kodu oluştururken belirli bir öğenin veya sayfanın bir bölümünün HTML yapısını iyice incelemeniz gerekir. Bu durumda, yalnızca
açılış etiketini bulmanız gerekir. Bunu yapmak için, yan kaydırıcıyı kullanarak HTML yapısının en üstüne gidin. Açılış etiketini bulduktan sonra, class=” bölümünden sonra mevcut sayfanın veya gönderinin tüm sınıf adlarını göreceksiniz.
Önceki ekran görüntüsüne daha yakından bakıldığında, tartıştığımız bazı varsayılan WordPress sınıfları (aşağıda vurgulanmıştır), Lekker teması, birlikte gelen eklentileri veya Elementor gibi ek üçüncü taraf eklentileri tarafından eklenen ek sınıflarla karıştırılmıştır.
Bunu gösterdikten sonra geriye kalan tek şey, bu beden sınıfı adlarının nasıl kullanılabileceğini ve bazı durumlarda yeni sınıf adları eklemenin neden daha faydalı olabileceğini açıklamaktır.
Yeni Beden Sınıfı Adları ve Yeni Beden Sınıfları
Genel olarak konuşursak, belirli bir sınıfı/bu belirli sınıfları paylaşan tüm sayfalara yönelik belirli CSS stil kurallarını uygulamak için bir veya daha fazla gövde sınıfı adı kullanabilirsiniz. Bir CSS kodu için uygun bir CSS seçici seçmeye gelince, uygulayabileceğiniz iki yaklaşım vardır. İlk olarak, bir dizi CSS kuralını doğrudan bu sınıfları içeren
öğesine uygulamak istiyorsanız, yalnızca gövde sınıflarını kullanabilirsiniz.Yani, .body-class-name (ör.home, .page, .postid-27, vb.) gibi seçicileri veya tekil bir CSS sınıf seçicide birleştirilen birden çok sınıf adını kullanan seçicileri (ör.page. sayfa-template-default.logged-in). Bunu yaparak, sırasıyla belirli gövde sınıfı adına veya kullanılan tüm gövde sınıfı adlarına sahip sayfaların
öğesine CSS kuralları uygularsınız.Ayrıca CSS kurallarını
öğesine uygulamanın bazı yararları olsa da, bazı CSS özellikleri iç HTML öğelerine miras alınabileceğinden, CSS kodu yazmak daha yaygındır. vücut sınıfı isimleri. Bunu yapmak için, ek bir CSS seçici oluşturmanız ve bunu daha önce bahsettiğimiz gövde sınıfı adı seçicilerine eklemeniz gerekir. Yani, daha sık olarak, CSS kodunuz aşağıdaki örneğin yapısına sahip olacaktır.<body-class-selector> <additional-css-selector> {
// CSS rules go here
}
Tabii ki, bu ek CSS seçiciyi ve kullanılan herhangi bir CSS kuralını oluşturmak için en azından CSS kodunu temel düzeyde anlamanız gerekir. Fakat bu engelin üstesinden gelseniz bile, bazı durumlarda body_class() işlevi tarafından sağlanan varsayılan sınıflar, ihtiyacınız olan sayfaları düzgün bir şekilde biçimlendirmek için yeterli değildir. Bazı eklentilerin ve temaların, ilişkilendirdikleri işlevlere göre verilen özel gövde sınıfı adları içermesinin nedeni budur.
Bu şekilde, sayfaları ve gönderileri ihtiyaçlarınıza göre şekillendirmek için daha fazla yolunuz olacak. Ayrıca belirli sayfalara ve gönderilere veya sayfa ve gönderi türlerine özel gövde sınıfları ekleyerek stil erişiminizi genişletebilirsiniz. Bu konuya yazının ilerleyen bölümlerinde daha detaylı değineceğiz.
Temanız veya eklentilerinizden bazıları body_class() işlevi kullanılarak yazdırılan belirli sınıf adlarını da içerebilir, fakat bu makalede, bunu kendi başınıza yapmanın iki yolunu ele alacağız – ya uygun bir WordPress eklentisi kullanarak ya da özel kod parçacıkları aracılığıyla.
Bir Eklenti Kullanarak WordPress’te Özel Gövde Sınıfı Nasıl Eklenir?
Bu amaç için çok fazla yeni eklenti olmasa da, uygun şekilde test ettiğimiz ve en son WordPress sürümüyle mükemmel şekilde çalıştığını tespit ettiğimiz Custom Body Class adlı daha eski bir WordPress eklentisi bulabildik. Eklenti, özellikle bu niş amaç için oluşturulmuştur ve aşağıda ele alacağımız çok sınırlı bir dizi işlevsellik sunar. Hadi başlayalım.
Eklentiyi kurup etkinleştirdikten sonra, Ayarlar > Özel Gövde Sınıfı bölümüne gidin. Eklenti, WordPress’te özel bir gövde sınıfı eklemenin iki yolunu sunar. Birincisi, tüm sayfalarınıza ve gönderilerinize genel bir sınıf eklemek, ikincisi ise, belirli bir sayfaya veya gönderiye belirli bir sınıf ekleyebilmeniz için özel gönderi türleri de dahil olmak üzere tüm gönderi türlerinde özel bir sınıf meta kutusu etkinleştirmektir. Bunun dışında eklenti, kullanımını yalnızca yöneticilerle sınırlamanın bir yolunu sunar, otomatik tamamlama seçeneğine ve işlevselliğini devre dışı bırakmanın alternatif bir yoluna sahiptir.
Fakat bu yazıda, eklentinin sağladığı bu ek işlevlere odaklanmayacağız, yalnızca onu kullanmanın iki yolundan bahsedeceğiz. İlk olarak, tüm sayfalarınızın ve gönderilerinizin etiketine bir global sınıf eklemek için, “Global Class” etiketinin yanındaki giriş alanına global sınıfınızın adını girin ve “Değişiklikleri Kaydet” düğmesine tıklayın.
Bu durumda, eklediğiniz özel sınıf, geçerli tarayıcınızın geliştirici araçlarını kullanarak web sitenizin herhangi bir sayfasını veya gönderisini inceleyerek görebileceğiniz
etiketinin class özelliğinin bir parçası olacaktır. Bir sayfayı veya gönderiyi nasıl inceleyeceğinden emin olmayanların, WordPress gövde sınıflarına, yani sınıf adlarına ve nasıl denetlenebileceklerine genel bir bakış yaptığımız bu makalenin önceki bölümünü gözden geçirmeleri önerilir.Örnek olarak, aşağıdaki ekran görüntüsünde görülebilen my-global-css-class adlı bir sınıf ekledik. Fakat temanız veya diğer bazı eklentiler de kendi özel sınıflarını içerebileceğinden, eklenen CSS sınıfını bulmak biraz zor olabilir. Bu yüzden arama özelliğini etkinleştirmek ve kullanmak için Öğeler sekmesindeki bir HTML etiketine tıklamanızı ve Ctrl ve F tuşlarına (macOS kullanıcıları için Cmd ve F) aynı anda basmanızı öneririz. Daha sonra başarıyla eklenmişse aşağıdaki ekran görüntüsünde olduğu gibi vurgulanacak olan eklenen sınıfı özel olarak arayabilirsiniz.
CSS sınıfının başarıyla eklendiğinden emin olduktan sonra, o sınıfa uygulamak istediğiniz uygun CSS stil kurallarını oluşturabilir, böylece bunları web sitenizdeki tüm sayfalara ve gönderilere uygulayabilirsiniz. Olası bir örnek aşağıda verilmiştir. Söylemeye gerek yok, düzgün çalışması için “my-global-css-class” yer tutucusunu daha önce eklediğiniz sınıfın gerçek adıyla ve ayrıca yorum satırını ilgili CSS kurallarıyla değiştirmeniz gerekir.
.my-global-css-class {
// CSS rules go here
}
Bunu söyledikten sonra, Özel Gövde Sınıfı eklentisinin ikinci kullanım durumu olan Sınıflar meta kutusunu etkinleştirerek devam edelim. Bunu yapmak için, Ayarlar > Özel Gövde Sınıfı bölümüne gidin ve seçeneklerin Gönderi Türleri bölümünü bulun. Burada web sitenizde kayıtlı olan tüm gönderi türlerini görebileceksiniz ve Sınıflar meta kutusunu etkinleştirmek istediğiniz gönderilerin yanındaki onay kutularını işaretleyebileceksiniz. Eklenti seçeneklerini kullanarak etkinleştirdikten sonra, aşağıda ele alacağımız meta kutusunu belirli bir sayfada veya gönderide bulmanız ve kullanmanız gerekecek. Bu meta kutuyu etkinleştirmek istediğiniz gönderi türlerinin yanındaki onay kutularını işaretleyin ve “Değişiklikleri Kaydet” düğmesini tıklayın.
Bu meta kutunun kullanımına gelince, seçtiğiniz gönderi türünden bağımsız olarak aynıdır. Bununla birlikte örneğimizde kullandığımız Lekker temasının sağladığı özel bir gönderi türü olan hem sayfa hem de portföy öğesi için nasıl olabileceğini göstereceğiz. Meta kutuyu Sınıflar meta kutusu olarak adlandırmamızın nedeni, başlığın bir parçası olarak sınıflar kelimesini içermesidir.
Bununla birlikte tam meta kutu başlığını oluşturmak için bu kelimeden önce özel gönderi tipinin adı gelir. Yani, sayfalar için Sayfa sınıfları, portföy öğeleri için Portföy Öğesi sınıfları, ürün – Ürün sınıfları vb. Bunu söyledikten sonra devam edelim.
Belirli bir sayfaya özel bir CSS sınıfı eklemek için, o sayfayı düzenlemek üzere tıklayın ve sağdaki Sayfa sınıfları meta kutusu bölümünü bulun.
“Sınıf eklemek için burayı tıklayın” yazan bir yer tutucu ile tekil bir alan bulacaksınız. Üzerine tıklayarak, önünde bir nokta(.) olacak, yani uygun bir CSS seçicisi şeklinde gösterilecek bir CSS sınıfı ekleyebileceksiniz. Yaptıklarınızı kaydetmek için daha sonra “Güncelle” düğmesine tıklayın. Elbette, yukarıda belirtilen işlemi tekrarlayarak söz konusu sayfaya birden çok CSS sınıfı ekleyebilir veya daha önce eklediğiniz bazı sınıfları kaldırabilirsiniz…