Nedir: CSS

CSS (Cascading Style Sheets), web sitenizdeki öğelerin nasıl görüneceğini tanımlayan bir dizi kural içeren bir dildir.

Bu kurallar, web sitenizin yazı tipi boyutu ve rengi, sitenizin arka plan rengi ve farklı bölümler arasında ne kadar boşluk olduğu gibi tasarım öğelerini kontrol eder.

CSS’yi web siteniz için stil talimatları olarak düşünün. WordPress temanız sitenizin içeriğini yapılandırmak için HTML öğelerini kullanırken (başlıklar, paragraflar, resimler ve düğmeler gibi), CSS tarayıcıya bu öğeleri görsel olarak nasıl sunacağını söyler.

WordPress’te CSS’yi Neden Düzenlemeniz Gerekir?

WordPress temaları çeşitli tasarım seçenekleri sunarken, bazen web sitenizin görünümünde temanın yerleşik ayarlarının ötesinde belirli değişiklikler yapmak isteyebilirsiniz. İşte bu noktada CSS düzenlemek WordPress kullanıcıları için 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 değiştirmek isteyebilirsiniz.

Ayrıca web sitenizin görünümünü kişiselleştirebilir ve aynı temayı kullanan diğer sitelerden farklılaştırabilirsiniz. Bu, metin seçim rengini değiştirmeyi, paralaks efekti eklemeyi veya WordPress yorum formunu şekillendirmeyi içerebilir.

Bazen bir tema, öğeleri web tasarımınızda tam olarak istediğiniz gibi göstermeyebilir. Birkaç satır CSS ile, merkezin dışında görünen metni ortalamak veya bir görüntünün etrafındaki dolguyu veya kenar boşluğunu ayarlamak gibi küçük sorunları düzeltebilirsiniz.

WordPress Kullanmak İçin CSS Bilmem Gerekiyor mu?

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üzenleme genellikle gelişmiş bir özellik olarak kabul edilir. Yeni başlayanlar WordPress’i kesinlikle onsuz kullanabilse de, CSS bilmek web sitenizin tasarımında ince ayar yapmak için daha fazla olanak sağlar.

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ştirirken size daha fazla kontrol ve esneklik sağlayacaktır.

WordPress’te CSS’in Temelleri (Örneklerle)

CSS, web sitenizdeki öğelerin nasıl görünmesi gerektiğ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 öğelere stil verileceğini söyler. Web sitenizin belirli bölümlerine 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ı hedefleyecektir.

İkincisi ise ö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 ilişkin talimatlar gibidir. Yaygın örnekler arasında renk, yazı tipi boyutu, arka plan rengi ve kenar boşluğu bulunur.

Sırada değerler var. Bunlar, özelliğin neye ayarlanması gerektiğini belirtir. Örneğin, renk değeri kırmızı, mavi veya belirli bir renk kodu olabilir.

Bir de HTML öğelerine atanabilen bir tür öznitelik olan CSS sınıfı vardır. HTML kodundaki bir öğeye bir sınıf atayabilir ve ardından bu sınıfa sahip tüm öğelere aynı stilleri uygulamak için CSS’nizde kullanabilirsiniz.

Diyelim ki tüm web sitenizin arka plan rengini siyah olarak değiştirmek istiyorsunuz. İşte bunun için CSS kodu:

body {
  background-color: black;
}

Bu örnekte:

• body, web sitesi içerik alanının tamamını hedefleyen seçicidir.
• background-color, hangi yönü değiştirmek istediğimizi tanımlayan özelliktir.
• black yeni arka plan rengini belirten değerdir.

Şimdi, web sitenizde belirli bir metni 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 HTML’nizdeki öğelere nasıl uygulayacağınız aşağıda açıklanmıştır:

<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>

Bu örnekte:

• .highlight sınıf seçicidir. “highlight” sınıfına sahip tüm öğeleri seçer.
• font-weight: bold; ve color: yellow; özelliklerdir. Seçilen öğelerin hangi yönlerini değiştirmek istediğimizi tanımlarlar.
• kalın ve sarı değerlerdir. Bunlar özellikler için yeni değerleri belirtir.

WordPress’e Özel CSS Kodunu Nasıl Ekleyebilirim?

Özel CSS’yi nasıl ekleyebileceğiniz, ne tür bir WordPress teması kullandığınıza bağlıdır.

Klasik bir tema kullanıyorsanız, WordPress özelleştiricisine gidebilir ve kodunuzu buraya eklemek için ‘Ek CSS’yi seçebilirsiniz.

Bir blok WordPress teması kullanıyorsanız, tema özelleştirici WordPress panonuzda eksik olacaktır. Bunun nedeni, varsayılan düzenleyicinizin artık tam site düzenleyicisi olmasıdır.

Bununla birlikte, alan adınızın sonuna aşağıdaki gibi /wp-admin/customize.php ekleyerek WordPress özelleştiricisine erişebilirsiniz:

https://example.com/wp-admin/customize.php

WordPress özelleştirici 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 ki bu çok daha güvenli bir yöntemdir.

Bununla birlikte, bu şekilde karmaşık CSS değişiklikleri yapamazsınız. Bu yüzden alternatif olarak WPCode gibi bir kod parçacığı eklentisi kullanabilirsiniz, çünkü bu eklenti WordPress temanıza güvenli bir şekilde özel CSS ekleyebilir.

Ayrıca bir alt tema oluşturabilir ve özel CSS kodunuzu buraya ekleyebilirsiniz. Bu şekilde, ana tema güncellendiğinde bile CSS ayarlarınız orada kalmaya devam edecektir.

Daha fazla bilgi için WordPress sitenize nasıl özel CSS ekleyeceğinize ilişkin adım adım kılavuzumuzu okuyabilirsiniz.

Son olarak, CSS Hero gibi bir CSS düzenleyici eklentisi de kullanabilirsiniz. Bu eklenti, kod yazmayı bilmeden CSS düzenlemenizi sağlar. Daha fazla bilgi için CSS Hero incelememize göz atın.

CSS’im WordPress Sitemde Neden Gösterilmiyor?

Sözdizimi hataları nedeniyle CSS’niz WordPress sitenizde görünmüyor olabilir. CSS kodunuzdaki küçük bir hata kodun uygulanmasını engelleyebilir. Bu eksik bir ayraç, özellik adında bir yazım hatası veya yanlış bir değer olabilir.

Ayrıca, yakın zamanda CSS eklediyseniz veya değiştirdiyseniz, değişiklikleri görmek için önbelleğinizi temizlemeniz gerekebilir. Tarayıcınızın önbelleğini temizleyin ve WordPress sitenizde bir önbellek eklentisi kullanıyorsanız bunu da temizlemelisiniz.

Bazen diğer temalar veya eklentiler CSS’nize müdahale edebilir. Sorunun çözülüp çözülmediğini görmek için diğer ek lentileri teker teker devre dışı bırakmayı deneyin. Eğer düzelirse, muhtemelen en son devre dışı bıraktığınız eklenti ç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 sıralandığından emin olun.

Yardıma ihtiyacınız varsa, WordPress hatalarını gidermeye yönelik yeni başlayanlar için hazırladığımız rehbere göz atabilirsiniz.

Umarız bu makale WordPress’te CSS hakkında daha fazla bilgi edinmenize yardımcı olmuştur. Faydalı WordPress ipuçları, püf noktaları ve fikirleriyle ilgili makaleler için aşağıdaki Ek Okuma listemize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.