WordPress’te Özel CSS ile Sayfa Stilleri Nasıl Uygulanır?
WordPress’teki bir sayfa veya yazının ID’sini bulmak ve bu ID’yi kullanarak CSS ile stil uygulamak, sitenizin tasarımını kişiselleştirmenin ve özelleştirmenin mükemmel bir yoludur. Bu yöntem, her sayfada veya yazıda farklı bir stil uygulayarak site tasarımınızı daha dinamik ve hedeflenmiş hale getirmenize olanak tanır. Özellikle belirli bir sayfada veya yazıda görsel değişiklikler yapmak istiyorsanız, CSS ile yalnızca o sayfa veya yazıya özgü stil ekleyebilirsiniz.
WordPress, her sayfa ve yazıya kendine özgü bir ID atar. Bu ID’yi kullanarak, sadece o yazı veya sayfa için belirli bir stil uygulamak mümkün olur. Örneğin, yalnızca “Hakkımızda” sayfası için bir stil değişikliği yapmak istiyorsanız, o sayfanın ID’sine özgü CSS kodları yazabilirsiniz. Bu, sitenizin tüm sayfalarında veya yazılarında aynı görünümü koruyarak, her birine özelleştirilmiş bir görünüm kazandırır.
Bu yöntem sayesinde, sayfalarınızın tasarımını daha özgün hale getirirken, kullanıcı deneyimini de geliştirebilirsiniz. Örneğin, bir yazının başlığının renk değiştirmesini, arka planının farklı olmasını veya yalnızca o sayfada farklı bir font kullanılmasını istiyorsanız, bu işlemi CSS ile kolayca yapabilirsiniz.
Şimdi, WordPress’teki bir sayfa veya yazının ID’sini nasıl bulacağınızı ve bu ID’yi CSS ile nasıl kullanarak özelleştirmeler yapacağınızı adım adım öğrenelim.
CSS Kodu Açıklaması
.post-17 p {
color: #ffffff;
background-color: #000000;
padding: 10px;
}
.post-17 p { … }:
- .post-17 sınıfı, WordPress’teki bir yazının veya sayfanın ID’si ile ilişkilendirilmiş bir sınıftır. Örneğin, .post-17, ID’si 17 olan bir yazıyı hedef alır.
- p: Burada
p, paragrafları ifade eder. Bu stil yalnızca o yazıya ait paragraflara uygulanacaktır.
color: #ffffff;
- Bu özellik, yazının rengini beyaz (hex:
#ffffff) yapar.
background-color: #000000;
- Bu, paragrafların arka plan rengini siyah (hex:
#000000) yapar.
padding: 10px;
- Bu, paragrafların etrafına 10 piksel boşluk ekler. Yani metnin kenarlarından biraz uzak olmasını sağlar.
ID Nasıl Bulunur?
Bir sayfanın veya yazının ID’sini bulmak için iki farklı yöntem kullanabilirsiniz:
Yöntem 1: Yazı veya Sayfa Düzenleyicisinden
Yazıyı veya Sayfayı Düzenleme:
- WordPress admin paneline giriş yapın.
- “Yazılar” veya “Sayfalar” menüsüne gidin ve düzenlemek istediğiniz yazıyı veya sayfayı tıklayın.
ID’yi URL’den Öğrenme:
Yazıyı veya sayfayı düzenlerken, tarayıcınızın adres çubuğunda şu URL’yi göreceksiniz:
https://siteadresiniz.com/wp-admin/post.php?post=XX&action=edit
Buradaki XX, sayfanın veya yazının ID’sini ifade eder. Örneğin, post=17 ise, bu yazının ID’si 17‘dir.
Yöntem 2: HTML Kaynak Kodundan
- Sayfayı veya yazıyı önizlerken sağ tıklayın ve İncele (Inspect) seçeneğini tıklayın.
- Tarayıcıdaki geliştirici araçlarında
<body>etiketinde şu şekilde bir satır göreceksiniz:
<body class="postid-17 page-id-17 ...">
Buradaki postid-17, yazının ID’sini belirtir.
ID’yi CSS ile Kullanma
ID’yi öğrendikten sonra, belirli bir yazıya veya sayfaya özel stil eklemek için şu adımları izleyebilirsiniz:
CSS’yi Temaya Eklemek:
- Görünüm > Özelleştir menüsüne gidin.
- Ek CSS kısmına yukarıdaki CSS kodunu ekleyin.
Yazı ID’sini Değiştirme:
ID’yi değiştirmek için .post-17 kısmını istediğiniz başka bir ID ile değiştirebilirsiniz. Örneğin, ID’si 20 olan bir yazıyı hedeflemek için şu şekilde değiştirebilirsiniz:
.post-20 p {
color: #ffffff;
background-color: #000000;
padding: 10px;
}
CSS Özelliklerini Değiştirme:
Farklı stil özellikleri eklemek isterseniz, örneğin metin boyutunu değiştirebilirsiniz. Örnek olarak:
.post-17 p {
font-size: 18px; /* Metin boyutunu 18px yapar */
font-family: Arial, sans-serif; /* Yazı tipini Arial yapar */
}
Sonuç
CSS kodlarıyla belirli yazılara veya sayfalara özel stiller eklemek, web sitenizin tasarımını özelleştirmenizi sağlar. Yazı ID’sini öğrenmek için URL veya HTML kaynak kodunu kullanabilirsiniz. Bu ID’yi kullanarak, sadece o yazıya veya sayfaya özel stil uygulayabilirsiniz. Bu sayede, her sayfa için özel görsel düzenlemeler yapabilirsiniz.
Umarım bu açıklamalar faydalı olmuştur! Eğer başka sorularınız varsa, sormaktan çekinmeyin.