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ında ne kadar boşluk olduğu 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ı kullanan diğer sitelerden farklılaşmak ve web sitenizin görünümünü kişiselleştirebilirsiniz. Bu, metin seçim rengini değiştirmeyi, bir paralaks efekti eklemeyi veya WordPress yorum formunu biçimlendirmeyi 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 size 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'i seçebilirsiniz.
Blok tabanlı bir WordPress teması kullanıyorsanız, tema özelleştirici 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 yolla karmaşık CSS değişiklikleri yapamazsınız. Bu nedenle, alternatif olarak, özel CSS'yi WordPress temanıza güvenli bir şekilde ekleyebileceği için WPCode gibi bir kod parçacığı eklentisi kullanmaktır.
Ayrıca bir alt tema oluşturabilir ve özel CSS kodunuzu oraya ekleyebilirsiniz. Bu şekilde, üst tema güncellendiğinde bile CSS ayarlamalarınız orada kalacaktır.
Daha fazla bilgi için, WordPress sitenize özel CSS ekleme hakkındaki adım adım kılavuzumuzu okuyabilirsiniz.
Son olarak, CSS Hero gibi bir CSS düzenleyici eklentisi de kullanabilirsiniz. Bu eklenti, kodlama bilmeden CSS düzenlemenize olanak tanır. 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. Çözülürse, devre dışı bıraktığınız son eklenti muhtemelen çakışmaya neden oluyordur.
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 kuyruğa alındığından emin olun.
Yardıma ihtiyacınız olursa, WordPress hatalarını gidermeye yönelik başlangıç kılavuzumuza 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.
