WordPress Web Sitelerini Özelleştirmek için En İyi CSS Kodları

Yayınlanan: 2022-03-15

WordPress'i özelleştirmek için en iyi CSS kodlarından bazılarına mı bakıyorsunuz? Öyleyse, size WordPress web sitenizi düzenlemek için kullanabileceğiniz en çok kullanılan CSS komut dosyalarından bazılarını göstereceğiz.

WordPress'i eklentiler, tema seçenekleri ve varsayılan ayarlarla özelleştirmek için birçok seçenek olduğunu biliyoruz. Ancak CSS kodlarını kullanarak web sitenizin çeşitli alanlarını da düzenleyebilirsiniz. Öyleyse, önce web sitenizi özelleştirmek için neden onlara ihtiyaç duyabileceğinizi görelim.

WordPress'te Web Sitelerini Özelleştirmek için CSS kodları neden kullanılıyor?

WordPress'te bir web sitesinin görsel görünümünü değiştirmek için CSS komut dosyaları veya kodları kullanılır. Tema seçeneklerinde veya varsayılan WordPress ayarlarında bulunmayan bazı özel tasarım değişiklikleri yapmak istiyorsanız, CSS komut dosyaları sizin için çok yararlı olabilir.

Özelleştirmeler için bir WordPress eklentisi yükleyebilirsiniz, ancak eklentiler, web sitenizin çerçevesini yavaşlatabilecek belirli bir ağırlık ekler. Web sitesinin görünümünde küçük bir değişiklik yapmak için bir eklenti kullanmak, performans düşüşüne değmez. Bu nedenle, kodlama konusunda temel bilgiye sahipseniz, CSS kodlarını kullanmak en iyi seçenektir.

Görsel değişiklikleri yaparken site hızını kaybetmemeniz için WordPress sitenizi özelleştirmek için CSS kodlarını kullanmanızı şiddetle tavsiye ederiz. Ayrıca, bazen web sitenizde uygulamak istediğiniz bazı benzersiz tasarımlar olabilir. Ve bunun için oluşturulmuş özel bir eklenti yoksa, tek seçeneğiniz CSS komut dosyalarıdır.

Bir WordPress Web Sitesini Özelleştirmek için En İyi CSS Kodları

Bir WordPress web sitesini özelleştirmek için birçok CSS kodu olsa da, size bulduğumuz en iyi CSS komut dosyalarını sunacağız. Bir WordPress web sitesinin ön ucunda çalışırken her türlü sorunu sıralamak ve olağanüstü tasarımlar elde etmek için en çok kullanılan kodlardan bazılarıdır.

Ancak, aşağıdaki komut listesi listesi tanıtım amaçlıdır, kullanılan seçiciler örnek bir web sitesine göre olduğundan web sitenizde çalışmayabilir. Çoğu durumda seçicileri düzenlemeniz gerekecek, bu yüzden bu komut dosyalarını web sitenize uygulamak için temel bir CSS bilgisine ihtiyacınız olacak. Geliştirici aracını kullanarak bir WP web sitesine CSS komut dosyaları uygulama hakkında daha fazla bilgi edinmek istiyorsanız bu gönderiye göz atın.

Ayrıca, sonunda CSS komut dosyalarınızı WordPress'e üç farklı şekilde uygulamayı öğreneceğiniz fazladan bir bölüm bulacaksınız. Şimdi senaryoları inceleyelim

1. Öğeleri Gizle

Bu muhtemelen en yaygın kullanılan CSS kuralıdır. Ön uçtaki veya arka uçtaki herhangi bir öğeyi çıkarmanız gerektiğinde oldukça kullanışlıdır.

1.1. Başlığı gizle:

 başlık{
    görüntü yok;
}

1.2. "Sepete ekle" düğmesini gizleyin

 .single_add_to_cart_button.button{
    görüntü yok;
}

1.3. Ekmek kırıntılarını gizle

 .woocommerce-ekmek kırıntısı{
    görüntü yok;
}

Not: Gizli bir öğe, tarayıcı konsolunun temel anlayışıyla görünür hale getirilebileceğinden, bazı durumlarda bu önerilmez. Örneğin, kullanıcıların dolduramaması için bir formu kaldırmanız gerekebilir. O zaman, bunu bir CSS betiğiyle yapmak istemezsiniz çünkü onun hakkında temel bilgiye sahip olan herkes onları görünür hale getirebilir ve yine de formu gönderebilir.

Bununla birlikte, stil veya tasarım sorunları için hızlı ve kolay bir çözüm sunar ve yine de sorunsuz bir şekilde kullanabiliriz.

Sepete ekle düğmesinin nasıl gizleneceği ve kaldırılacağı konusunda daha fazla yardım istiyorsanız, bununla ilgili ayrıntılı bir kılavuzumuz da var. Benzer şekilde, gerekirse WordPress'te başlık ve içerik haritalarının nasıl düzenlenebileceği hakkında daha fazla bilgiyi bloglarımızda bulabilirsiniz.

2. Öğeleri Taşı

Bir sayfanın tasarımını ayarlamak için bir öğeyi hareket ettirmeniz gerekiyorsa, aşağıdakine benzer bir şey kullanarak onu herhangi bir yöne kolayca taşıyabilirsiniz:

 #qlwapp{
    alt:45 piksel;
    sol:25 piksel;
    konum:göreceli;
}

Öğe daha önce konumlandırılmışsa, bazı durumlarda position:relative ayarlamanız gerekebilir.

Not: Bu sadece küçük ayarlamalar için kullanışlıdır, elemanlar kaplarının dışına taşınmamalıdır. Üst, sağ, alt, sol kullanabilir ve her birine bir değer verebilirsiniz.

3. Mobil Mod için CSS Kodları

CSS'yi sadece mobil cihazlar için de uygulayabiliyoruz. Medya sorguları kullanılarak yapılabilir.

Koşullu bir ifade gibi çalışırlar. Medya sorgusundaki tüm CSS kuralları, yalnızca ekran boyutu 768 pikselin altındaysa uygulanacaktır.

Verilen ekran genişliği, 768 piksel olan mobil cihazlar için kabul edilen standarttan alınmıştır. Bu değeri daha büyük veya daha küçük ekran boyutuna sahip cihazlarda uygulamak için düzenleyebilirsiniz.

 @media yalnızca ekran ve (maksimum genişlik:768 piksel){
    div.masthead{
        görüntüleme: satır içi blok;
        genişlik: %50;
        kenar boşluğu:otomatik;
    }
}

4. Metni Düzenle

CSS Sözde seçiciler, bir WordPress web sitesini özelleştirmek için harika kaynaklardır. Ve bunları akıllıca kullanarak web sitenizde de birçok değişiklik yapabiliriz. Bu nedenle, bu CSS kodlarını WordPress web sitenizin metnini özelleştirmek için de kullanabiliriz.

:before ve :after sözde seçicileri, herhangi bir HTML öğesinin hemen önüne veya arkasına bir "sözde öğe" eklememize izin verir. Bu şekilde, bir metni gizleyebilir ve başka bir metinle değiştirebiliriz:

 p.metin{
    görünürlük:gizli;
}
p.text::önce{
    görünürlük:görünür;
    içerik:'buraya yeni metin';
    Ekran bloğu;
}

5. CSS Kodlarını Kullanan Çeviriler

:lang() sözde sınıfı, sayfa diline bağlı olarak CSS kurallarını uygulamamıza izin verir. WPML veya Polylang gibi çeviri eklentilerinden biriyle çevrilmiş olsa bile, geçerli lang özelliği her zaman web sitesi HTML çıktısının <html> ana etiketinde olacaktır.

WordPress için En İyi CSS Komut Dosyaları

Bu nedenle, önceki örnek komut dosyasında görüldüğü gibi :before sözde seçicisini :lang() sözde sınıfıyla birlikte kullanırsak, bir web sitesindeki herhangi bir dizeyi çevirebiliriz.

Bu aynı zamanda çok dilli web sitelerinde de çalışacaktır.

 p.text:lang(tr){
    görünürlük:gizli; 
} 
p.text:lang(tr)::önce{ 
    görünürlük:görünür;
    içerik:'çevrilmiş metin';
    Ekran bloğu; 
}

6. Kaydırma Çubuğu Ekleyin

Listeler, resim galerileri veya bölümler gibi bazı büyük içeriğiniz olduğunda, kaydırma çubuğu bir web sitesindeki kullanıcı deneyimini iyileştirebilir. Ayrıca, gönderilerin ve sayfaların aşırı uzunluk olmadan korunmasına yardımcı olurlar.

Bu, özellikle bir kenar çubuğunda veya başka bir widget alanında kullanmak için kullanışlıdır. Ayrıca, yükseklik de mevcut boyutu aştığında eksik veya kesilmiş widget sorunlarını düzeltmeye yardımcı olabilir.

Ayrıca yazılara ve sayfalara bir kaydırma çubuğu da ekleyebiliriz:

Bu komut dosyası, listeye bir kaydırma çubuğu ekleyerek tüm belgeleri çok daha kısa hale getirecektir.

 ul {
    yükseklik:370 piksel;
    taşma-y:kaydırma;
}

WordPress için en iyi CSS komut dosyaları

7. Görüntüleri Simge Olarak Kullanmak için CSS kodları

Bir CSS betiği ile herhangi bir görüntü türü ekleyebilirsiniz ve bu birkaç yolla elde edilebilir. Ancak :before sözde seçicisini kullanarak bir resim ekleyebilir ve onu bir simge gibi gösterebiliriz.
Medya kitaplığına bir görsel yüklediğinizden ve görselin kalıcı url('image-link-here') olarak kullandığınızdan emin olun.

 .entry-content > p:nth-child(3)::önce{
    içerik:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

Veya aynı seçiciyi kullanarak gerçek simgeleri de kullanabiliriz:

 .entry-content > p:nth-child(3)::önce{
	font-family: "Font Awesome 5 Free"; 
        yazı tipi ağırlığı: 400; 
        içerik: "\f0f3";
}

Gerçek simgeleri kullanmak için, örneğimizde simgenin bağlantı HTML etiketi harika yazı tipi 5 Ücretsiz olarak ayarlanmıştır. Web sayfasının <head> bölümüne yüklenmelidir.

8. Yazı Tiplerini Değiştirin

Bir WordPress web sitesinin yazı tiplerini CSS kodlarıyla da özelleştirebilirsiniz. Simgelere benzer şekilde, kullanabilmemiz için yazı tiplerinin de tema başlığına yüklenmesi gerekir. Sayfanın <head> bölümüne bakarak font setinin mevcut olup olmadığını doğrulayabiliriz.

Burada, Google Yazı Tipleri bağlantısı bir PHP betiği yardımıyla zaten eklenmiştir.

WordPress için en iyi CSS komut dosyaları

Kullanmak istediğiniz simge veya yazı tipi setinin <head> HTML bölümünde zaten yüklü olduğunu onayladıktan sonra, web sitesinin tamamında özgürce kullanabilirsiniz.

 h1,h2,h3,p,a,li{
    yazı tipi ailesi: 'Hubballi', bitişik el yazısı;
}

Bonus: CSS'yi bir WordPress web sitesine uygulamanın 3 yolu

WordPress web sitenizi özelleştirmek için size en çok kullanılan CSS kodlarından bazılarını sağladık. Ancak bunları web sitenize nasıl ekleyeceğinizi de bilmeniz gerekir. Bunun için, bu makalede size bonus olarak kısa bir eğitim de göstereceğiz.

İşte CSS'yi bir WordPress web sitesine uygulamanın 3 yaygın yolu.

1. Tema özelleştirici

CSS komut dosyasını tema özelleştirici aracılığıyla eklemek için tek yapmanız gereken CSS komut dosyalarınızı tema özelleştiriciye yapıştırmaktır. Genellikle küçük özelleştirmeler veya düzeltmeler için uygulanabilir.

Stil düzenleyiciyi açmak için Görünüm > Özelleştir > Ek CSS'ye gidin. Ardından CSS komut dosyalarınızı buraya yapıştırın.

wordpress için en iyi css betikleri

Buradaki komut dosyaları “ Yayınla ” düğmesine basıldıktan sonra veritabanına kaydedilecektir. Önizleme yaptıktan sonra web sitenizdeki değişiklikleri görebileceksiniz.

2. Alt tema CSS dosyası

Bu adım için, başlamadan önce web siteniz için programlı olarak veya alt tema eklentilerinden birini kullanarak bir alt tema oluşturmanız gerekecek. Ardından, web sitenizin aktif bir alt teması olduğundan emin olun ve CSS kodlarını style.css dosyasına ekleyin. Web sitenizin hassas çekirdek dosyalarını değiştireceğimiz için tüm web sitenizi de yedeklemeniz daha iyi olur.

Komut dosyalarınızı oraya yapıştırmak için kod düzenleyicinizi açın veya Görünüm > Tema Dosyaları Düzenleyicisi'ndeki WP yerleşik düzenleyiciyi kullanın. Şimdi, alt temanın Stil Sayfasını veya style.css dosyasını açın.

Tüm özel komut dosyalarınızı yapıştırmanız gereken yer burasıdır. CSS kodlarını ekledikten sonra Dosyayı Güncelle seçeneğine tıklayın. Ancak büyük bir dosyaya dönüşürse, yeni bir dosya veya birkaç tane oluşturmak iyi bir fikir olabilir.

3. Bir Alt Temanın functions.php dosyası

PHP işlevini kullanarak da CSS stilleri ekleyebilirsiniz. Bu şekilde uygulanan tüm stiller, ön tarafa satır içi stiller olarak eklenecektir.

Önceki yaklaşımda olduğu gibi, web siteniz için alt temanın etkin olduğundan emin olun. Ardından tema düzenleyiciden function.php dosyasını açın ve aşağıdaki kodları buraya yapıştırın.

 add_action('wp_head','QuadLayers_headlink');
function QuadLayers_headlink(){
	yankı '<stil>
    .entry-content > p:nth-child(3)::önce{
	    font-family: "Font Awesome 5 Free"; 
	    yazı tipi ağırlığı: 400; 
	    içerik: "\f0f3";
    }
    h1,h2,h3,p,a,li{
	    yazı tipi ailesi: "Hubballi", el yazısı;
    }</stil>';
}

Bu yolu kullanmanın en büyük avantajı, WP kancalarının ve işlevlerinin tüm gücünden yararlanarak PHP koşullarını uygulayabilmenizdir.

Web sitenize CSS uygulama hakkında daha fazla bilgi edinmek istiyorsanız, lütfen CSS'yi WordPress'e nasıl uygulayacağınızla ilgili kılavuzumuza bakın.

Çözüm

Bunlar, bir WordPress web sitesini özelleştirmek için en sık kullanılan CSS kodlarıdır . Web sitenizin görsel görünümünü değiştirebileceğiniz ve benzersiz tasarımlar ekleyebileceğiniz tüm popüler scriptleri size gösterdik. Özetlemek gerekirse, CSS komut dosyalarını kullanarak aşağıdaki değişiklikleri ele aldık:

  1. Öğeleri gizle
  2. Öğeleri taşı
  3. Mobil cihazlar için CSS
  4. Metni düzenle
  5. Çeviriler
  6. Kaydırma çubuğu ekleyin
  7. Görüntüleri simge olarak kullanın
  8. Yazı tiplerini değiştir

WordPress web sitenizin bu öğelerini özelleştirmek için CSS kodlarını kolayca kullanabilirsiniz. Bu konuda size yardımcı olmak için, WordPress'te CSS uygulamanın birkaç yolunu bile gösterdik.

Ayrıca, WordPress'te CSS hakkında bilgi edinmek istiyorsanız, belirli sayfalara veya gönderilere CSS uygulamayı da ele aldık. Benzer şekilde, CSS komut dosyaları sayfa oluşturucularla bile kullanılabilir. En yaygın örneklerden biri Divi menüsünü CSS ile özelleştirmek.

Peki bir WP web sitesini düzenlemek için CSS hakkında ne düşünüyorsunuz? Onları hiç kullandın mı? Yardımcı oldular mı? Lütfen yorumlarda bize bildirin.

Bu arada, ilginizi çekebilecek birkaç makale daha:

  • Özel WordPress Eklentisi Nasıl Oluşturulur
  • WordPress Panosu Yüklenmiyor Sorununu Düzeltin
  • WordPress Özel Alanı Programlı Olarak Nasıl Oluşturulur