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, doğru sayfayı tanımak söz konusu olduğunda zorlayıcı olabilir. Sayfa bölümü, blog gönderinizin URL'sini gösterir ve bu da sayfayı özelleştirmeyi kolaylaştırır.

Bunun yanı sıra, sayfa bölümü 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 harekete geçirici mesaj düğmesini vurgulayabilirsiniz.

Bununla birlikte, sayfa bölümünü WordPress temanızın gövde sınıfına nasıl ekleyeceğinize bakalım.

WordPress Temanıza Bir Sayfa Slug'ı Ekleme

Sayfanızın URL'sini WordPress temanızın gövde sınıfına eklemenize yardımcı olmak için, temanızın functions.php dosyasına aşağıdaki kodu 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ılacak herhangi bir hatanın sitenizi bozabilmesi ve WordPress kontrol panelinize giriş yapmanızı engelleyebilmesidir.

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

WPCode ile kodları dakikalar içinde ve hatasız bir şekilde sitenize kolayca ekleyebilirsiniz. Ayrıca, gelecekte temanızı güncellerseniz veya değiştirirseniz kodunuzun kaldırılmamasını da 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, ücretsiz WPCode eklentisini sitenize kurmanız ve etkinleştirmeniz gerekecektir. Adım adım talimatlar için, bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza başvurabilirsiniz.

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ış kitaplıktan bir kod parçacığı seçebileceğiniz 'Kod Parçacığı Ekle' sayfasını getirecektir.

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, kenar çubuğu widget'larınızı yalnızca "education" bölümüne sahip bir sayfada stilize etmek istediğinizi varsayalım. Bu durumda, şu şekilde CSS 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 gidin. Burada, kodu yönetici, ön yüz ve daha fazlası gibi belirli bir WordPress konumuna 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, kod parçacığı 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 kod ekleme kılavuzumuza başvurabilirsiniz.

Umarız bu makale, WordPress temanızın gövde sınıfına bir sayfa bölümü eklemeyi nasıl öğreneceğinize yardımcı olmuştur. Ayrıca WordPress gövde sınıfı ve en iyi tasarım yazılımını nasıl seçeceğinize ilişkin kılavuzlarımıza da 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.