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ım sağlar.

WordPress alt temalarıyla çalıştıysanız, muhtemelen kendinizi çok fazla stil yaparken ve renk, dolgu vb. şeyleri geçersiz kılarken bulursunuz. Web tasarımında yeniyseniz, düz kullanmanın yanlış bir tarafı 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. Çoğu inşaatçı, daha büyük projeler için özel olarak SASS kullanır ve temel parça olarak CSS Değişkenleri ile birlikte birçok gelişmiş seçenek sunar.

Bununla birlikte, daha önce ön iş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 ve neyse ki güçlü bir tarayıcı desteği vardır. Üretimde CSS Değişkenlerini 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.

CSS Değişkenleri, düz CSS ile çalışmaktan daha etkilidir ancak SASS gibi gelişmiş bir kurulum gerektirmez. Tarayıcı "derlemeyi" yapar ve siz, derlenmiş CSS'yi çıkaran kuruluma ve ortama bağımlı değilsiniz.

Bu yaklaşım, basit WordPress alt temalarını tasarlamak gibi şeylere uygun iyi bir projedir. Bunun gibi projeler için, markalı bir tema oluşturmak için stil güncellemeleri yapma ihtiyacı vardır. CSS Değişkenleri, yönetilebilir bir stil geçersiz kılma listesi sağladıkları ve SASS'ı CSS'ye derlemek için özel bir ortam gerektirmedikleri için yardımcı olabilir.

Genesis Framework ve StudioPress Temalarını Ücretsiz Alın!

WP Engine müşterileri, her planda standart olarak gelen bir dizi premium WordPress temasına erişim kazanır! Ayda sadece 20 ABD doları ödeyerek bir sonraki sitenizi oluşturmaya başlayabilirsiniz! Burada daha fazla bilgi edinin.

CSS Değişkenleri Nasıl Kullanılır?

Markada kalmak için belirli renkleri kullanırken, sık karşılaşılan gereksinimlerden biri, tekrar tekrar kullanılabilecek bir marka renk paletine sahip olmaktır. Her seferinde aynı renk değerini yazmak gereksiz hale gelir. Artı, setteki renk değerlerinden birinde değişiklik yapmak isterseniz ne olur?

Örneğin, belki bir mavinin biraz daha koyu olması gerekiyor. Bu her zaman olur. Evet, elbette güvenilir bul ve değiştir özelliği var. Bununla birlikte, değeri tek bir yerde ayarlamak, bu küresel değişikliği yaparken ve değişkenler yeniden kullanıldığından daha etkilidir.

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

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

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

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

var() İş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ı dahilinde olan bir CSS seçici içinde bildirilmesi gerekir. Birçok durumda, değişkenlerin her şey tarafından erişilebilir olması için küresel kapsamda kullanılabilir olması gerekir. 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 çizgi (-) dahil edilmelidir.

var() sözdizimi oldukça basittir:

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

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

Web denetçisi (bu durumda Chrome), hangi değişkenlerin kullanıldığını incelemenizi ve görmenizi sağlar.

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

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

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

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

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

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

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 çapında değişiklikler yaparken daha verimli çalışmanıza yardımcı olur. Bir önişlemciye ihtiyaç duymadan daha iyi organize edilmiş stil sayfalarına izin verirler.

WP Engine ile Yaratma Özgürlüğünü Güçlendirin

WP Engine, WordPress'te yaratma özgürlüğüne güç verir. Tüm WordPress sağlayıcıları arasında en hızlısı olan şirketin ürünleri, 1,5 milyon dijital deneyime güç veriyor. Dünyanın en iyi 200.000 sitesinden daha fazlası, dijital deneyimlerini güçlendirmek için WordPress'teki herkesten daha fazla WP Engine kullanıyor. Daha fazlasını wpengine.com adresinde bulun veya bugün bir temsilciyle görüşün!