- Konu sahibi
- #1
WordPress’te bir bloğa özel CSS sınıfı vermek için bloğu seçin, sağ ayar panelindeki Gelişmiş bölümünü açın ve Ek CSS sınıf(lar)ı alanına sınıf adını yazın. Ardından bu sınıfı hedefleyen CSS kuralını temanızın özel CSS alanına veya çocuk temanızın stil dosyasına ekleyin. Alan adına sınıfı noktasız yazın; CSS içinde ise sınıf adının başına nokta koyun.
Aşağıdaki örnekte bir paragraf bloğuna
Her blok bu alanı desteklemeyebilir; blok kayıt ayarında customClassName kapatılmışsa alan görünmez. Bu örnekteki4px köşe yarıçapını daha yüksek tema kuralının geçersiz kılmadığını hesaplanan stil bölümünde kontrol edin; masaüstü/mobilde kutu taşmamalıdır.
Klasik temalarda Özelleştir > Ek CSS, blok temalarda Site Düzenleyici > Stiller alanındaki Ek CSS (sunulduğunda) kullanılabilir; yetki ve sürüm arayüzü etkiler. Çocuk temanın style.css dosyasının gerçekten enqueue edildiğini doğrulayın; dosyaya yazmak otomatik yükleme garantisi değildir. Editör içi görünümün ön yüzle aynı olması için editör stil yüklemesi de gerekebilir. CSS’nin konumu kullandığınız tema ve çalışma biçimine bağlıdır. Amaç, kuralın ziyaretçiye gönderilen stil dosyasında yer almasını sağlamaktır. Tema ayarlarında özel CSS alanı varsa küçük değişiklikler için bunu kullanabilirsiniz. Çocuk tema kullanıyorsanız kuralı çocuk temanın stil dosyasına eklemek daha düzenli bir seçimdir. Ana temanın dosyasını doğrudan değiştirmek, tema güncellendiğinde değişikliklerin silinmesine yol açabilir.
Karar verirken şu ayrımı kullanın:
Önce düzenleyicide bloğun gerçekten seçili olduğunu ve sınıfın alana noktasız yazıldığını kontrol edin. Ardından tarayıcıda sayfanın kaynak inceleme aracını açarak blok sarmalayıcısında
Sınıf mevcut olduğu hâlde görünüm değişmiyorsa CSS’nin yüklenip yüklenmediğini ve seçicinin doğru yazıldığını kontrol edin. Başka bir kural aynı özelliği daha yüksek öncelikle belirliyorsa seçiciyi gereksiz yere
Önbellek kullanan sitelerde CSS değişikliğinin ön yüzde görünmesi gecikebilir. Kaydettikten sonra sayfayı yenileyin ve gerekiyorsa tema veya önbellek katmanının önbelleğini temizleyin. Mobil ve masaüstü görünümünü de kontrol edin; sabit genişlik, büyük iç boşluk veya uzun metin küçük ekranlarda taşmaya neden olabilir.
CSS alanına sınıf adını yanlış biçimde yazmak: Blok alanına
Boşlukla birden fazla sınıfı karıştırmak: Birden fazla sınıf kullanılacaksa adları boşlukla ayırın; her sınıf için ayrı nokta eklemeyin. Örneğin alan değeri
Ana tema dosyasını doğrudan düzenlemek: Bu yöntem tema güncellemesinde kaybolabilecek değişiklikler oluşturur. Kalıcı özelleştirmeyi çocuk tema veya temanın sunduğu özel CSS mekanizmasıyla yapın.
Evet. Sınıf adlarını alanda boşlukla ayırabilirsiniz. Böylece bir sınıf ortak görünümü, diğer sınıf ise yalnızca o kullanımın ek davranışını tanımlar.
Sınıfın eklendiği HTML öğesine bağlıdır. Özellikleri doğrudan sınıfa verirseniz genellikle blok sarmalayıcısı etkilenir. Yalnız içindeki başlık veya bağlantıyı değiştirmek için
Özel sınıf nasıl eklenir?
Aşağıdaki örnekte bir paragraf bloğuna
kart-vurgu sınıfı verilecek ve bu paragraf renkli bir bilgi kutusuna dönüştürülecek.- Yazı veya sayfa düzenleyicisinde biçimlendirmek istediğiniz bloğu seçin. Örnekte bu blok bir Paragraf bloğudur.
- Bloğun ayarlarını açın ve Gelişmiş bölümündeki Ek CSS sınıf(lar)ı alanına
kart-vurguyazın. Tek sınıf adının içine boşluk, başına nokta veya # eklemeyin. Birden fazla sınıf adı gerekiyorsa adları boşlukla ayırabilirsiniz. - Temanızın özel CSS alanına veya çocuk temanızın CSS dosyasına aşağıdaki kuralı ekleyin:
Kod:
.kart-vurgu {
background-color: #f3f7fb;
border: 1px solid #b8cbe0;
padding: 16px;
border-radius: 4px;
color: #1f2933;
}- Değişiklikleri kaydedin ve sayfayı ön yüzde açın. Sınıf doğru uygulanmışsa paragraf açık renkli arka plana, kenarlığa ve iç boşluğa sahip bir kutu olarak görünür.
.kart-vurgu seçicisi, üzerinde kart-vurgu sınıfı bulunan bloğu hedefler. Aynı sınıfı başka bloklara verirseniz CSS kuralı onlar için de geçerli olur. Yalnızca tek bir bloğu biçimlendirmek istiyorsanız sınıf adını benzersiz seçin.Her blok bu alanı desteklemeyebilir; blok kayıt ayarında customClassName kapatılmışsa alan görünmez. Bu örnekteki4px köşe yarıçapını daha yüksek tema kuralının geçersiz kılmadığını hesaplanan stil bölümünde kontrol edin; masaüstü/mobilde kutu taşmamalıdır.
CSS’yi nereye eklemeli?
Klasik temalarda Özelleştir > Ek CSS, blok temalarda Site Düzenleyici > Stiller alanındaki Ek CSS (sunulduğunda) kullanılabilir; yetki ve sürüm arayüzü etkiler. Çocuk temanın style.css dosyasının gerçekten enqueue edildiğini doğrulayın; dosyaya yazmak otomatik yükleme garantisi değildir. Editör içi görünümün ön yüzle aynı olması için editör stil yüklemesi de gerekebilir. CSS’nin konumu kullandığınız tema ve çalışma biçimine bağlıdır. Amaç, kuralın ziyaretçiye gönderilen stil dosyasında yer almasını sağlamaktır. Tema ayarlarında özel CSS alanı varsa küçük değişiklikler için bunu kullanabilirsiniz. Çocuk tema kullanıyorsanız kuralı çocuk temanın stil dosyasına eklemek daha düzenli bir seçimdir. Ana temanın dosyasını doğrudan değiştirmek, tema güncellendiğinde değişikliklerin silinmesine yol açabilir.
Karar verirken şu ayrımı kullanın:
| İhtiyaç | Uygun yer | Dikkat edilmesi gereken |
|---|---|---|
| Tek sayfada veya birkaç blokta basit görünüm değişikliği | Temanın özel CSS alanı | Tema değiştiğinde alanın korunup korunmadığını kontrol edin |
| Tema genelinde kalıcı stil | Çocuk tema CSS dosyası veya tema tarafından sunulan özel stil alanı | CSS dosyasının yüklenmesini ve önceliğini kontrol edin |
| Sadece bir blok türünün tüm örnekleri | Blok türünü hedefleyen daha genel seçici | İstenmeyen diğer blokları etkilememesi için seçiciyi daraltın |
Çalışmıyorsa nasıl teşhis edilir?
Önce düzenleyicide bloğun gerçekten seçili olduğunu ve sınıfın alana noktasız yazıldığını kontrol edin. Ardından tarayıcıda sayfanın kaynak inceleme aracını açarak blok sarmalayıcısında
kart-vurgu sınıfının bulunup bulunmadığına bakın. Sınıf HTML çıktısında yoksa sorun CSS kuralında değil, sınıfın bloğa eklenmemiş olmasındadır.Sınıf mevcut olduğu hâlde görünüm değişmiyorsa CSS’nin yüklenip yüklenmediğini ve seçicinin doğru yazıldığını kontrol edin. Başka bir kural aynı özelliği daha yüksek öncelikle belirliyorsa seçiciyi gereksiz yere
!important ile doldurmak yerine daha hedefli yazın. Örneğin yalnızca içerik alanındaki bu sınıfı hedeflemek için .entry-content .kart-vurgu kullanılabilir; ancak bu seçici temaya özgü olduğundan önce HTML yapısını doğrulayın.Önbellek kullanan sitelerde CSS değişikliğinin ön yüzde görünmesi gecikebilir. Kaydettikten sonra sayfayı yenileyin ve gerekiyorsa tema veya önbellek katmanının önbelleğini temizleyin. Mobil ve masaüstü görünümünü de kontrol edin; sabit genişlik, büyük iç boşluk veya uzun metin küçük ekranlarda taşmaya neden olabilir.
Sık yapılan hatalar
CSS alanına sınıf adını yanlış biçimde yazmak: Blok alanına
.kart-vurgu yazmak yerine kart-vurgu yazılmalıdır. Nokta yalnızca CSS kuralındaki seçicide kullanılır.Boşlukla birden fazla sınıfı karıştırmak: Birden fazla sınıf kullanılacaksa adları boşlukla ayırın; her sınıf için ayrı nokta eklemeyin. Örneğin alan değeri
kart-vurgu dar, CSS seçicileri ise .kart-vurgu ve .dar şeklindedir.Ana tema dosyasını doğrudan düzenlemek: Bu yöntem tema güncellemesinde kaybolabilecek değişiklikler oluşturur. Kalıcı özelleştirmeyi çocuk tema veya temanın sunduğu özel CSS mekanizmasıyla yapın.
Kaynaklar
Sık sorulan sorular
Aynı bloğa birden fazla özel sınıf eklenebilir mi?
Evet. Sınıf adlarını alanda boşlukla ayırabilirsiniz. Böylece bir sınıf ortak görünümü, diğer sınıf ise yalnızca o kullanımın ek davranışını tanımlar.
Özel CSS sınıfı bloğun içindeki metni mi, tüm bloğu mu etkiler?
Sınıfın eklendiği HTML öğesine bağlıdır. Özellikleri doğrudan sınıfa verirseniz genellikle blok sarmalayıcısı etkilenir. Yalnız içindeki başlık veya bağlantıyı değiştirmek için
.kart-vurgu h2 ya da .kart-vurgu a gibi alt seçiciler kullanmanız gerekir.