CSS (Cascading Style Sheets), web sitenizdeki öğelerin nasıl görüneceğini tanımlayan bir kural kümesi içeren bir dildir.
Bu kurallar, yazı tipi boyutu ve rengi, sitenizin arka plan rengi ve farklı bölümler arasındaki boşluk gibi web sitenizin tasarım öğelerini kontrol eder.
CSS'i web siteniz için stil talimatları olarak düşünün. WordPress temanız, sitenizin içeriğini (başlıklar, paragraflar, resimler ve düğmeler gibi) yapılandırmak için HTML öğelerini kullanırken, CSS tarayıcıya bu öğeleri görsel olarak nasıl sunacağını söyler.
Neden WordPress'te CSS Düzenlemeye İhtiyaç Duyarsınız?
WordPress temaları çeşitli tasarım seçenekleri sunarken, bazen temanın yerleşik ayarlarının ötesinde web sitenizin görünümünde belirli değişiklikler yapmak isteyebilirsiniz. WordPress kullanıcıları için CSS düzenleme burada kullanışlı hale gelir.
Örneğin, web sitenizdeki belirli bir bölümün arka plan rengini değiştirmek veya daha iyi okunabilirlik için yazı tipi boyutunu biraz ayarlamak isteyebilirsiniz.
Ayrıca, aynı temayı kullanarak web sitenizin görünümünü kişiselleştirebilir ve diğer sitelerden farklılaştırabilirsiniz. Bu, metin seçimi rengini değiştirmeyi, bir paralaks efekti eklemeyi veya WordPress yorum formunu stilize etmeyi içerebilir.
Bazen bir tema, web tasarımınızda öğeleri tam olarak istediğiniz gibi göstermeyebilir. Birkaç satır CSS ile, ortalanmamış görünen metni ortalamak veya bir resmin etrafındaki dolgu veya kenar boşluğunu ayarlamak gibi küçük sorunları düzeltebilirsiniz.
WordPress Kullanmak İçin CSS Bilmem Gerekir mi?
Hayır, bir WordPress web sitesi oluşturmak için mutlaka CSS bilmeniz gerekmez. Çoğu WordPress teması, herhangi bir koda dokunmadan sitenizin görünümünü ve hissini özelleştirmenize olanak tanıyan çeşitli yerleşik tasarım seçenekleriyle birlikte gelir.
CSS düzenlemesi genellikle gelişmiş bir özellik olarak kabul edilir. Yeni başlayanlar bunu kesinlikle kullanabilse de, CSS bilmek web sitenizin tasarımını ince ayarlamak için daha fazla olasılık sunar.
CSS düzenlemeyi kolaylaştırmak için CSS Hero gibi bir WordPress eklentisi kullanabilirsiniz. Bir CSS eklentisi, CSS değişiklikleri yapmak için görsel bir yaklaşım sunar ve birçok popüler WordPress temasıyla uyumludur.
Bununla birlikte, CSS'nin nasıl çalıştığını anlamak, WordPress web sitenizi özelleştirme konusunda size daha fazla kontrol ve esneklik sağlayacaktır.
WordPress'te CSS Temelleri (Örneklerle)
CSS, web sitenizdeki öğelerin nasıl görüneceğini tanımlamak için belirli bir sözdizimi kullanır. İlk başta karmaşık görünse de, temel yapı oldukça basittir.
Bilmeniz gereken ilk şey CSS seçicileridir. Bunlar, CSS'ye web sitenizdeki hangi öğelerin stilini belirleyeceğini söyler. Web sitenizin belirli bölümlerini işaret eden etiketler gibidirler.
Örneğin, body etiketi web sitenizin tüm içerik alanını ifade eder. Dolayısıyla, body seçicisi tüm sayfayı hedefler.
İkincisi özelliklerdir. Bunlar, değiştirmek istediğiniz belirli görsel yönleri tanımlar. Özellikler, seçilen öğenin nasıl görünmesini istediğinize dair talimatlar gibidir. Yaygın örnekler arasında color, font-size, background-color ve margin bulunur.
Sonra değerler gelir. Bunlar, özelliğin neye ayarlanacağını belirtir. Örneğin, color için değer red, blue veya belirli bir renk kodu olabilir.
Ardından, HTML öğelerine atanabilen bir öznitelik türü olan CSS sınıfı vardır. Bir öğeye HTML kodunda bir sınıf atayabilir ve ardından o sınıfa sahip tüm öğelere aynı stilleri uygulamak için CSS'nizde kullanabilirsiniz.
Tüm web sitenizin arka plan rengini siyaha çevirmek istediğinizi varsayalım. İşte bunun için CSS kodu:
body {
background-color: black;
}
Bu örnekte:
bodyseçicidir ve tüm web sitesi içerik alanını hedefler.background-color, neyi değiştirmek istediğimizi tanımlayan özelliktir.blackyeni arka plan rengini belirten değerdir.
Şimdi, web sitenizdeki belirli metinleri vurgulamak istediğinizi varsayalım. Metni kalın yapan ve rengini sarıya çeviren .highlight adında bir CSS sınıfı oluşturabilirsiniz. Bu sınıfı CSS'nizde şu şekilde tanımlarsınız:
.highlight {
font-weight: bold;
color: yellow;
}
Ve bunu HTML'deki öğelere şu şekilde uygularsınız:
<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>
Bu örnekte:
.highlightsınıf seçicidir. "highlight" sınıfına sahip tüm öğeleri seçer.font-weight: bold;vecolor: yellow;özelliklerdir. Seçilen öğelerin hangi yönlerini değiştirmek istediğimizi tanımlarlar.boldveyellowdeğerlerdir. Özellikler için yeni değerleri belirtirler.
WordPress'e Özel CSS Kodu Nasıl Eklenir?
Özel CSS'yi nasıl ekleyeceğiniz, ne tür bir WordPress teması kullandığınıza bağlıdır.
Klasik bir tema kullanıyorsanız, WordPress özelleştiriciye gidip kodunuzu oraya eklemek için 'Ek CSS' seçeneğini seçebilirsiniz.
Bir blok WordPress teması kullanıyorsanız, tema özelleştiricisi WordPress kontrol panelinizde bulunmayacaktır. Bunun nedeni, varsayılan düzenleyicinizin artık tam site düzenleyicisi olmasıdır.
Bununla birlikte, alan adınızın sonuna şu şekilde /wp-admin/customize.php ekleyerek WordPress özelleştiricisine hala erişebilirsiniz:
https://example.com/wp-admin/customize.php
WordPress özel düzenleyicisi aracılığıyla özel CSS eklediğinizde, değişiklikler fiziksel style.css dosyasında (temanızın stil sayfası) değil, WordPress veritabanında saklanır.
Bu yaklaşım, tema dosyalarını doğrudan düzenlemeden değişiklik yapmanıza olanak tanır, bu da çok daha güvenli bir yöntemdir.
Bununla birlikte, bu şekilde karmaşık CSS değişiklikleri yapamazsınız. Bu nedenle, özel CSS'yi WordPress temanıza güvenli bir şekilde ekleyebileceği için WPCode gibi bir kod parçacığı eklentisi kullanmak bir alternatiftir.
Ayrıca bir alt tema oluşturabilir ve özel CSS kodunuzu oraya ekleyebilirsiniz. Bu şekilde, üst tema güncellendiğinde bile CSS düzenlemeleriniz yerinde kalacaktır.
WordPress sitenize özel CSS ekleme hakkında adım adım kılavuzumuzu okuyarak daha fazla bilgi edinebilirsiniz: WordPress sitenize özel CSS ekleme.
Son olarak, CSS Hero gibi bir CSS düzenleyici eklentisi de kullanabilirsiniz. Bu eklenti, kodlama bilmeden CSS düzenlemenizi sağlar. Daha fazla bilgi için CSS Hero incelememize göz atın.
CSS'im Neden WordPress Sitemde Görünmüyor?
CSS'niz, sözdizimi hataları nedeniyle WordPress sitenizde görünmüyor olabilir. CSS kodunuzdaki küçük bir hata, uygulanmasını engelleyebilir. Bu, eksik bir parantez, bir özellik adında yazım hatası veya yanlış bir değer olabilir.
Ek olarak, yakın zamanda CSS eklediyseniz veya değiştirdiyseniz, değişiklikleri görmek için önbelleği temizlemeniz gerekebilir. Tarayıcınızın önbelleğini temizleyin ve WordPress sitenizde bir önbellekleme eklentisi kullanıyorsanız, onu da temizlemelisiniz.
Bazen diğer temalar veya eklentiler CSS'nizle çakışabilir. Sorunun çözülüp çözülmediğini görmek için diğer eklentileri tek tek devre dışı bırakmayı deneyin. Eğer sorun çözülürse, devre dışı bıraktığınız son eklenti muhtemelen çakışmaya neden oluyordur.
Bir alt tema kullanıyorsanız ve CSS'niz görünmüyorsa, alt temanın doğru şekilde ayarlandığından ve CSS dosyasının alt temanın functions.php dosyasında doğru şekilde eklendiğinden emin olun.
WordPress hatalarını giderme konusunda başlangıç rehberimize göz atabilirsiniz.
Umarım bu makale, WordPress'te CSS hakkında daha fazla bilgi edinmenize yardımcı olmuştur. Ayrıca, faydalı WordPress ipuçları, püf noktaları ve fikirleri hakkında ilgili makaleler için aşağıdaki Ek Okuma listenize 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.
