WordPress alt temalarını özelleştirmek için CSS değişkenleri nasıl eklenir

CSS özel özellikleri olarak da adlandırılan CSS değişkenleri, CSS stil sayfalarınızda kolayca yeniden kullanıma izin verir. WordPress alt temaları ile çalıştıysanız, muhtemelen kendinizi renk, dolgu vb. gibi şeyler üzerinde çok fazla stil ve geçersiz kılma yaparken buluyorsunuz. Web tasarımında yeniyseniz, sade kullanmanın yanlış bir şey olmadığını belirtmekte fayda var. CSS. CSS değişkenleri isteğe bağlıdır ve ilerledikçe, değişkenlerin size nasıl fayda sağlayacağını görmeye başlayacaksınız.

Bunların en popüleri SASS olan CSS ön işlemcilerinin yerini alması amaçlanmamıştır. SASS'ı özellikle daha büyük projeler için kullanıyorum ve temel parça olarak CSS değişkenleriyle birlikte herhangi bir gelişmiş seçenek sunuyor. Ancak daha önce önişlemcilerle çalıştıysanız, CSS çıktısı almak için bunların derlenmesi gerektiğini bilirsiniz. Bu nedenle, bu eğitimde CSS Değişkenlerine odaklanılacak ve ön işlemciler hakkında ayrıntılara girilmeyecektir.

CSS değişkenleri mutlu bir ortamdır. Neyse ki, güçlü tarayıcı desteği var. Bunları üretimde kullanmayı taahhüt etmeden önce, ihtiyacınız olan desteğe sahip olduklarından emin olmak için Kullanabilir miyim'i kontrol ettiğinizden emin olun. Düz CSS ile çalışmaktan daha verimlidirler ancak SASS gibi gelişmiş bir kurulum gerektirmezler. Tarayıcı "derlemeyi" yapar ve derlenmiş CSS'yi çıkaran ayar ve ortama bağımlı değilsiniz.

Bu yaklaşım, basit WordPress alt temaları tasarlamak gibi şeyler için uygun bir projedir. Bunun gibi projelerde, markalı bir tema oluşturmak için stil güncellemeleri yapma ihtiyacı olma eğilimindedir. Yönetilebilir bir stil geçersiz kılma listesine sahip olduğum ve SASS'ı CSS'ye derleyen bir ortam kurma gereği duymadığım gerçeğini seviyorum.

Genesis Framework ve StudioPress temalarını ücretsiz edinin!

Sitelerinizi Flywheel'de barındırdığınızda, doğrudan keyifli panomuzdan 30'dan fazla premium WordPress temasına (Genesis dahil!) erişebileceksiniz. Bu, ayda sadece 15$'a başlayabileceğiniz 2.000$'ın üzerinde bir değer! Daha fazlasını buradan öğrenin.

CSS değişkenleri nasıl kullanılır

Markayı korumak için belirli renkleri kullanırken, tekrar tekrar kullanılabilen bir marka renk paletine sahip olmak ortak bir gereksinimdir. Her seferinde aynı renk değerini yazmak gereksiz hale geliyor. Ayrıca, setteki renk değerlerinden birinde değişiklik yapmak isterseniz ne olur? Örneğin, belki bir mavinin biraz daha koyu olması gerekir. Bu her zaman olur. Evet, elbette, güvenilir bul ve değiştir seçeneği var. Ancak değeri tek bir yerde ayarlamak, bu genel değişikliği yaparken ve değişkenler yeniden kullanıldığından daha verimlidir.

Bir CSS değişkeni şöyle görünür:

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

Bir WordPress alt temasını şekillendirmek için iş akışını düzenlerken, değişkenleri styles.css ekledim. Bu sadece "kısa liste"dir ve daha fazlası eklendikçe, her değişkeni verimli bir şekilde adlandırmak önem kazanır.

:root {
--white: #ffffff;
--black: #232525;
--mid-gray: #eeeeee;
--brand-red: #e50000;
}

var() işlevi

Değişkenler gerçekte nasıl kullanılır? Oldukça basit. İlk olarak, değişken bildirilir ve ardından gerekli CSS kural setinde kullanılır. Kapsam, bilinmesi gereken önemli bir şeydir. Değişkenlerin, amaçlanan kapsamı içinde olan bir CSS seçicisinde bildirilmesi gerekir. Çoğu durumda, küresel kapsamda kullanılabilir olmaları için değişkenlere ihtiyacınız olacak, bu şekilde her şey için erişilebilir olacaklar. Genel kapsam için :root veya body seçiciyi kullanabilirsiniz. Ancak kapsamı sınırlamanız gereken ve yerel kapsamlı bir değişkenle çalışmak istediğiniz durumlar olabilir.

Değişkenleri tespit etmek kolaydır; önlerinde iki çizgi var. İki tire (-) eklenmelidir.

var() sözdizimi oldukça basittir:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

Rengi birden çok yerde ayarlamak yerine, değişken değeri bir yerde ayarlanır.

Web denetçisi (bu durumda Chrome), hangi değişkenlerin kullanıldığını incelemenize ve görmenize olanak tanır.

Aşağıdaki örnek önce --light-gray ve --text-black adlı genel özel özellikleri tanımlar. Özel özelliklerin değerini daha sonra stil sayfasına ekleyen var() işlevi çağrılır:

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

CSS kesme noktalarıyla çalışırken değişkenlerin çok yararlı olabileceğini belirtmekte fayda var. Global kapsamlı değişkenleri farklı kesme noktalarında kullanarak, dolgu ve diğer kullanışlı stiller gibi şeyler çeşitli boyutlar için özelleştirilebilir.

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

İşte yerel kapsamda bulunabilecek değişkenlere bir örnek. Şimdiye kadar yalnızca küresel kapsama değindik, bu nedenle şeylerin kökte olmadığını fark edeceksiniz. Bunlar bir uyarı mesajı için stiller. Burada yalnızca bu sınıf için yararlı olan bir uyarı metni rengi bildirilmiştir. Ayrıca, calc da kullanılabileceğini belirtmekte fayda var.

.warning {
--warning-text: #ff0000;
--gap: 20;
color: var(--warning-text);
margin-top: calc(var(--gap) * 1px);
}

Yukarıdaki örnekler, CSS değişkenlerinin temellerini kapsar. Bu kavramlar, özel WordPress temalarına veya yazdığınız diğer herhangi bir özel CSS'ye uygulanabilir. Değişkenlerin sade CSS'ye göre avantajları vardır ve site genelinde değişiklikler yaparken daha verimli çalışmanıza yardımcı olur. Bir ön işlemciye ihtiyaç duymadan daha iyi organize edilmiş stil sayfalarına izin verirler.

Sırada ne var: Eklentiler

Geliştiriciler için en çok önerilen eklentilerimizin listesi için bu e-kitabı indirin! Tüm bu eklentilerin kullanımının basit olduğunu, sitenizde çok fazla performans gerektirmediğini ve tamamen güvenilir olduğunu gördük.

Bu makaleyi sevdiniz mi? Şunlardan birini deneyin:

• CSS Izgara Düzeni kullanarak bir kart düzeni nasıl oluşturulur
• Verimli düzenler için Flexbox ve CSS ızgaraları nasıl birleştirilir
• Genesis alt temanız için basit özelleştirmeler