FTC: Web sitemiz ziyaretçi desteklidir; İçeriklerde bulunan bağlantılar aracılığıyla ürün/hizmet satın aldığınızda komisyon kazanabiliriz. Komisyonlar editoryal değerlendirmelerimizi etkilemez.

WordPress Özel CSS Ekleme (4 Farklı Yol)

Çoğu WordPress teması, tipografi ve renkler gibi temel stilleri değiştirmenize izin veren yerleşik ayarlara sahip olsa da bazen daha büyük değişiklikler yapmak isteyebilirsiniz. Bu da, WordPress sitenize özel CSS eklemeniz gerektiği anlamına gelir. Peki, WordPress özel CSS nasıl eklenir? İşte detaylar…

CSS Nedir?

WordPress özel CSS ekleme işlemine geçmeden önce kısaca “CSS nedir” sorusunu yanıtlayalım.

Cascading Style Sheets kısaltması olan CSS’in Türkçe karşılığıyla “Basamaklı Stil Şablonu”dur. Renkler, düzen ve yazı tipleri dahil olmak üzere Web sayfalarının sunumunu tanımlayan ve böylece web sayfalarını kullanıcılara sunulabilir hale getiren basit bir dildir. HTML’den bağımsızdır ve herhangi bir XML tabanlı biçimlendirme dili ile kullanılabilir.

CSS, farklı cihazlar ve ekran boyutları için tasarım, düzen ve gösterimdeki varyasyonlar dahil olmak üzere web sayfalarınız için stiller tanımlamak için kullanılır.

Buradan detaylı CSS eğitimine göz atabilirsiniz.

WordPress Özel CSS Ekleme Yöntemleri

WordPress’e özel CSS eklemek, özellikle kodlama bilgisi olmayanlar ve yeni başlayanlar için zorlu bir işlem gibi görünebilir. Neyse ki, WordPress’e kolayca özel CSS eklemenize yardımcı olacak çeşitli yöntemler vardır.

Bunlardan bazıları son derece basittir ve herhangi bir kod yazmayı gerektirmez. Bazıları ise biraz daha karmaşık olabilir. Yine de, WP sitenize özel CSS eklemek için kesinlikle bir kodlama uzmanı olmanıza gerek yok!

WordPress özel CSS ekleme işleminin detaylarına geçmeden önce, birçok WordPress temasının birden çok HTML öğesini biçimlendirmek veya konumlandırmak için aynı stilleri kullandığını bilmelisiniz. Küçük bir değişiklik bir sayfada mükemmel görünürken başka bir sayfayı bozabilir.

Bu nedenle, mevcut CSS’yi düzenlemeye başlamadan önce sitenizin bir yedeğini almanızı öneririz.

1. Tema Özelleştirici ile WordPress özel CSS ekleme

WordPress sitenize CSS eklemenin en kolay ve en hızlı yolu, Tema Özelleştirici’deki ek CSS seçeneğini kullanmaktır.

Bunun için WordPress yönetim panelinde Görünüm>>Özelleştir seçeneğine gidin. Özelleştiriciye girdikten sonra, sayfanın sol tarafındaki panelin altında Ek CSS seçeneğini göreceksiniz.

WordPress özel CSS ekleme

Ek CSS seçeneğine tıkladığınızda bir kod paneli göreceksiniz. Bu panele herhangi bir özel CSS’yi ekleyebilir, ayrıca değişikliklerinizi de sağ taraftan doğrudan önizleyebilirsiniz.

wp css ekleme

Üstteki Yayınla/Kaydet düğmesinin yanında bulunan dişli simgesini kullanarak değişikliklerinizi planlayabilir ya da doğrudan yayınlayabilirsiniz.

NOT: Bu yöntemi kullanırsanız, WordPress temanızı değiştirdiğinizde eklediğiniz CSS kodları silinir ve yeni temanız için tekrar eklemeniz gerekir. Bu nedenle eklediğiniz tüm kodları bir yere not etmenizi öneririz.

2. Eklenti ile WordPress özel CSS ekleme

Yeni başlayanlar için bu en kolay ve en çok önerilen yöntemdir. Yapmanız gereken şey aşağıdaki eklentilerden birini kurmak ve eklentinin özel CSS kısmına gerekli kodu/kodları ekleyip kaydetmek.

Bu yöntemle ilgili en iyi şey, WordPress temanızı değiştirdikten sonra bile CSS kodunu kaybetmeyecek olmanızdır. WordPress özel CSS ekleme işlemini oldukça kolay hale getiren çeşitli eklentiler vardır. İşte bunlardan bazıları:

  • Simpe Custom CSS: WordPress siteye özel CSS eklemek için kullnılan en popüler eklentidir. Tüm web sitenizi tek bir eklenti ile özelleştirmenizi sağlar. Ayrıca, yeni başlayanlar için faydalı olabilecek bazı hata kontrollerini de içerir.
  • Visual CSS Style Editor: Görsel bir düzenleyici ile oluşturulmuştur ve 60’tan fazla stil özelliğinin kontrolünü sağlar. Duyarlı aracı, herhangi bir sayfayı, gönderiyi, giriş sayfasını ve öğeyi düzenlemenize olanak tanır.
  • WP Add Custom CSS: Kullanabileceğiniz bir diğer Wp özel CSS ekleme eklentisidir.

3. CSS’yi düzenlemek için bir alt tema (child theme) kullanın

Çok sayıda özel CSS eklemeniz gerekiyorsa temanızın stil sayfasını kullanmanız daha iyi olacaktır. Ancak, özel CSS’nizi ana temanızın stil sayfasına koyrsanız temanızı her güncellediğinizde önceki değişiklikler silinir. Bunun yerine bir alt tema (child theme)kullanmanız gerekir.

Alt temanın style.css dosyasını kullanarak ana temanızın tasarımını devralabilir ve ana temaya dokunmadan tüm değişiklikleri yapabilirsiniz. Bu şekilde, ana temayı güncellediğinizde bile özel CSS’niz eskisi gibi kalacaktır.

Temanız bir alt tema içermiyorsa, hızlıca bir alt tema oluşturmak için Child Theme Creator gibi ücretsiz bir eklenti kullanabilirsiniz. Alt temanızı oluşturduktan sonra Görünüm>Tema Düzenleyici yolunu izleyin.

WordPress Özel CSS Nasıl Eklenir

Özel CSS eklemek veya düzenlemek için stye.css dosyasına tıklayın. Buradan, web sitenizin tasarımında değişiklik yapmak için dosyayı kolayca düzenleyebilirsiniz.

4. Sayfa Oluşturucuları kullanarak WP CSS ekleme

Gutenberg dahil diğer sayfa oluşturucular aracılığıyla da sayfalarınıza özel CSS ekleyebilirsiniz.

  • Gutenberg ile bunu yapmak için herhangi bir sayfa/yayın açın Gelişmiş>Ek CSS sınıfları kutucuğuna CSS’inizi ekleyin.
  • Elementor ile CSS eklemek için Ayarlar > Gelişmiş > Özel CSS yolunu izleyin. Ayrıca Elementor>Site Ayarları> Özel CSS kısmından da düzenleme yapabilirsiniz.
  • Avada Fusion Builder kapsayıcıları ve öğeleri, CSS sınıf adları ve CSS kimlikleri için alanlara sahiptir. Sayfaya üst araç çubuğundaki </> simgesi aracılığıyla özel CSS eklenebilir.
  • Divi Builder ile özel CSS eklemek için Modüller, satırlar ve bölümler için ayarlar açılır modunda Gelişmiş Sekmesini arayın.
  • WP Bakery ile WordPress’e özel CSS eklemek için Sayfa Ayarları (dişli simgesi) > Özel CSS kısmını kullanabilirsiniz. Global CSS için de WP Admin > Ayarlar > Visual Composer > Özel CSS bölümüne gidebilirsiniz.

NOT: Bazen özel CSS ekledikten sonra bazen önbellek nedeniyle değişiklikleriniz görünmeyebilir. görünmeyebilir. Herhangi bir önbellek eklentisi kullanıyorsanız, önbelleği temizlemeniz veya eklentiyi birkaç dakikalığına devre dışı bırakıp tekrar etkinleştirmeniz sorunu çözecektir. Ayrıca, tarayıcı önbelleğini de temizlemeniz gerekebilir.

Sonuç: WordPress’e Özel CSS Nasıl Eklenir

WordPress’e hızlı ve kolay bir şekilde özel CSS eklemek için yukarıda listelenen yollardan herhangi birini kullanabilirsiniz.

Yalnızca birkaç satır özel CSS kodu eklemek istiyorsanız, bunu yapmanın en iyi yolu, kolay ve güvenilir WordPress özelleştiricisini kullanmaktır. Ancak, çok sayıda özel CSS eklemeniz gerekiyorsa, alt tema kullanmanızı öneririz.

Bu yöntemler karmaşık geliyorsa, WordPress özel CSS ekleme eklentilerinden birini deneyebilirsiniz. Eklentilerle hem gönderiler hem sayfalar hem de site genelinde geçerli olabilecek özel CSS’ler ekleyebilirsiniz.

Peki siz hangi CSS ekleme yöntemini tercih ediyorsunuz? WordPress’e özel CSS eklemenin başka kolay yolları var mı? Aşağıdaki yorum bölümünde öneri ve düşüncelerinizi paylaşmaktan çekinmeyin.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu