WordPress'te Sayfa Kalıbını Gövde Sınıfına Ekleme

Yıllar boyunca birçok WordPress sitesi üzerinde çalıştık ve her zaman başvurduğumuz bir özelleştirme hilesi, sayfa slug'ını gövde sınıfına eklemektir. Tasarım esnekliği söz konusu olduğunda büyük fark yaratan çok basit bir şeydir.

Ne demek istediğimizi açıklayalım: Muhtemelen daha önce bu durumla karşılaşmışsınızdır - sitenizin geri kalanından sadece bir sayfayı farklı biçimlendirmek istersiniz. Gövde sınıfınızda sayfa kalıbı olmadan, karmaşık CSS seçicileriyle uğraşmak veya ayrı stil sayfaları oluşturmak zorunda kalırsınız.

WordPress temasında bir sayfa bölümü eklemek, herhangi bir karmaşa olmadan istediğiniz tüm özelleştirmeleri yapmanızı sağlar. Renkleri, yazı tiplerini ve diğer öğeleri, sitenizin geri kalanını etkilemeden tek tek sayfalarda kolayca değiştirebilirsiniz.

Bu makalede, WordPress temalarınızın gövde sınıfına bir sayfa bölümü eklemeyi göstereceğiz. Bu yöntemi basit işletme sitelerinden karmaşık e-ticaret mağazalarına kadar her şeyde kullandık.

Tema İçinde Gövde Sınıfına Sayfa Takma Adı Neden Eklenir?

Sitenizdeki belirli sayfaları özelleştirmek istiyorsanız ve sayfayı doğru bir şekilde tanımlamak istiyorsanız, temanızın gövde sınıfına bir sayfa kalıbı eklemek gerçekten kullanışlıdır.

Varsayılan olarak, WordPress siteniz yalnızca gönderi kimliği sınıflarını gösterecektir, bu da doğru sayfayı tanımak söz konusu olduğunda zorlayıcı olabilir. Bir sayfa takma adı, blog gönderinizin URL'sini gösterir ve sayfayı özelleştirmeyi kolaylaştırır.

Bunun yanı sıra, sayfa kalıbı gövde sınıfını kullanarak sayfalarınızda farklı özelleştirmeler yapabilirsiniz. Örneğin, belirli bir gönderinin yazı tipini ve renklerini değiştirebilir veya belirli bir açılış sayfasındaki bir harekete geçirici mesaj düğmesini vurgulayabilirsiniz.

Bunu söyledikten sonra, sayfa slug'ını WordPress temanızın gövde sınıfına nasıl ekleyebileceğinize bakalım.

WordPress Temanıza Bir Sayfa Slug'ı Ekleme

WordPress temanızın body sınıfına sayfanızın URL'sini eklemenize yardımcı olmak için, aşağıdaki kodu temanızın functions.php dosyasına girebilirsiniz.

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' );

Tema dosyalarınızın functions.php dosyalarına WordPress Tema Düzenleyicisi (Kod Düzenleyici) aracılığıyla erişebilirsiniz. Ancak, tema dosyalarını doğrudan düzenlemek çok risklidir.

Bunun nedeni, kodu eklerken yapılan herhangi bir hatanın sitenizi bozabilmesi ve WordPress kontrol panelinize giriş yapmanızı engelleyebilmesidir.

Temanızın gövde sınıfına kodu eklemenin çok daha basit bir yolu, WPCode gibi bir WordPress eklentisi kullanmaktır. Biz bunu birden çok sitede kullanıyoruz, daha fazla bilgi için tam WPCode incelememize bakın.

WPCode ile sitenize dakikalar içinde ve hatasız kod ekleyebilirsiniz. Ayrıca, gelecekte temanızı güncellerseniz veya değiştirirseniz kodunuzun kaldırılmamasını sağlar.

Ayrıca, tek tıklamayla kurabileceğiniz uzman yapımı kod parçacıkları kütüphanesiyle birlikte gelir. Bu nedenle, gelişmiş WordPress özelleştirmeleri yapmak için herhangi bir kodlama becerisine ihtiyacınız yoktur.

Aslında, bir sayfa slug'ını body sınıfına eklemek WPCode kütüphanesinde hazır bir kod parçacığı olarak mevcuttur. Bu izlenmesi en kolay yöntemdir.

Öncelikle, sitenize ücretsiz WPCode eklentisini yükleyip etkinleştirmeniz gerekecektir. Adım adım talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakabilirsiniz.

Eklenti etkinleştirildikten sonra, WordPress yönetici çubuğunuza 'Kod Parçacıkları' adlı yeni bir menü öğesi eklenecektir. Buna tıklamak, tüm kod parçacıklarınızı yöneteceğiniz sayfaya götürecektir.

İlk kod parçacığınızı eklemek için 'Yeni Ekle' düğmesine tıklayın.

Bu, önceden hazırlanmış kütüphaneden bir kod parçacığı seçebileceğiniz 'Kod Parçacığı Ekle' sayfasını açacaktır.

Yalnızca 'Sayfa Takma Adını Gövde Sınıfına Ekle' kod parçasını arayın ve bulduğunuzda 'Kod parçasını kullan' düğmesine tıklayın.

Şimdi, WPCode kodu otomatik olarak ekleyecek ve doğru ekleme yöntemini ayarlayacaktır.

Yapmanız gereken tek şey anahtarı 'Etkin Değil'den 'Etkin'e getirmektir. Son olarak, sayfanın üst kısmındaki 'Güncelle' düğmesine tıklayın.

Artık şu şekilde yeni bir body sınıfı göreceksiniz: page-{slug}. Varsayılan stillerinizi geçersiz kılmak ve belirli sayfalar için öğeleri özelleştirmek için bu sınıfı kullanın.

Örneğin, yalnızca “education” bölümüne sahip bir sayfada kenar çubuğu widget'larınızı biçimlendirmek istediğinizi varsayalım. Bu durumda, CSS'yi şu şekilde ekleyebilirsiniz:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Daha fazla ayrıntı için, WordPress'e özel CSS ekleme kılavuzumuza bakabilirsiniz.

Özel Kodu Manuel Olarak Ekleme

Yukarıdaki özel kodu manuel olarak eklemeyi tercih ederseniz, işte nasıl yapılacağı.

İlk olarak, WordPress kontrol panelinizden Kod Snippetleri » Snippet Ekle sayfasına gidin.

Oradan, ‘Özel Kodunuzu Ekleyin (Yeni Kod Parçacığı)’ seçeneğine gidin ve ‘+ Özel Kod Parçacığı Ekle’ düğmesine tıklayın.

Ardından, ekranda beliren seçenekler listesinden bir kod türü seçmeniz gerekir. Bu eğitim için ‘PHP Snippet’ seçeneğini seçin.

Şimdi, yalnızca başvurunuz için olan ve kodu tanımlamanıza yardımcı olacak herhangi bir şey olabilen kod parçacığınız için bir başlık verin.

Ardından, yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırmanız yeterlidir.

Ardından, ‘Ekleme’ bölümüne aşağı kaydırın. Burada, kodu WordPress'in belirli bir konumuna, örneğin yönetici, ön yüz ve daha fazlası gibi otomatik olarak eklemek ve çalıştırmak için ‘Otomatik Ekle’ yöntemini seçebilirsiniz.

Emin değilseniz, varsayılan ‘Her Yerde Çalıştır’ seçeneğini kullanın.

Veya 'Kısa Kod' yöntemini seçebilirsiniz. Bu yöntemle, parça otomatik olarak eklenmez. Sitenizin herhangi bir yerine manuel olarak ekleyebileceğiniz bir kısa kod alırsınız.

Hazır olduğunuzda, anahtarı 'Etkin Değil'den 'Etkin'e getirin ve sağ üst köşedeki 'Snippet Kaydet' düğmesine tıklayın.

Daha fazla ayrıntı için, WordPress'e özel kodun nasıl ekleneceğine dair rehberimize bakabilirsiniz.

Bu makalenin WordPress temanızın gövde sınıfına bir sayfa takma adı eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress gövde sınıfı ve en iyi tasarım yazılımını nasıl seçeceğiniz hakkındaki rehberimize de bakmak 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.