WordPress Blok Temalarında Stil Düğmeleri

Küçük bir süre önce, Ganesh Dahal, burada CSS-Tricks hakkında bir yazı kaleme aldı WordPress bloklarına ve öğelerine CSS kutusu gölgeleri eklemeyi soran bir tweet'e yanıt vermek. Orada, doğrudan Blok Düzenleyici ve Site Düzenleyici kullanıcı arayüzünde nesnelere gölge uygulamak için kontroller sağlayan WordPress 6.1'de sunulan yeni özelliklerden yararlanan pek çok harika şey var.

Ganesh, bu gönderideki düğme öğelerine kısaca değindi. Bunu almak ve WordPress blok temalarındaki stil düğmelerine yönelik yaklaşımların derinliklerine inmek istiyorum. Spesifik olarak, yeni bir tane açacağız. theme.json şemadaki stil düğmelerine yönelik çeşitli yaklaşımları dosyalayın ve parçalayın.

Neden düğmeler soruyorsun? Bu iyi bir soru, öyleyse bununla başlayalım.

Farklı düğme türleri

WordPress Block Editor bağlamındaki düğmelerden bahsederken, iki farklı tür arasında ayrım yapmalıyız:

1. Buttons bloğunun içindeki alt bloklar
2. Diğer bloğun içine yerleştirilmiş düğmeler (örn. Yorum Gönderme Formu bloğu)

Bu blokların her ikisini de bir şablona eklersek, varsayılan olarak aynı görünüme sahip olurlar.

Ancak işaretleme çok farklı:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Gördüğümüz gibi, HTML etiket adları farklıdır. Bu ortak sınıflar - .wp-block-button ve .wp-element-button — bu, iki düğme arasında tutarlı stil sağlar.

CSS yazıyor olsaydık, bu iki sınıfı hedeflerdik. Ancak bildiğimiz gibi, WordPress blok temalarının stilleri yönetmenin farklı bir yolu vardır ve bu, theme.json dosyası. Ganesh ayrıca bunu çok detaylı bir şekilde ele aldı., ve onun makalesini okusan iyi edersin.

Peki, düğme stillerini nasıl tanımlarız? theme.json gerçek CSS yazmadan? Hadi beraber yapalım.

Temel stilleri oluşturma

theme.json özellik:değer çiftlerinde yazılmış yapılandırılmış bir şema kümesidir. En üst düzey özellikler "bölümler" olarak adlandırılır ve biz styles bölüm. Tüm stil talimatlarının gittiği yer burasıdır.

Özellikle şuna odaklanacağız: elements içinde styles. Bu seçici, bloklar arasında paylaşılan HTML öğelerini hedefler. Bu, birlikte çalıştığımız temel kabuk:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

O halde yapmamız gereken bir tanım yapmaktır. button eleman.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

O button ön uçtaki düğme öğelerini işaretlemek için kullanılan HTML öğelerine karşılık gelir. Bu düğmeler, iki düğme tipimizden biri olabilen HTML etiketleri içerir: bağımsız bir bileşen (yani, Düğme bloğu) veya başka bir blok içinde yuvalanmış bir bileşen (örneğin, Yorum Gönder bloğu).

Her bir bloğa stil vermek yerine paylaşılan stiller yaratıyoruz. Devam edelim ve temamızdaki her iki düğme türü için varsayılan arka plan ve metin rengini değiştirelim. Orada bir color orada sırayla destekleyen nesne background ve text istediğimiz değerleri ayarladığımız özellikler:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Bu, her iki düğme türünün rengini değiştirir:

DevTools'u açın ve WordPress'in düğmeler için oluşturduğu CSS'ye bakın, .wp-element-button sınıf, içinde tanımladığımız stilleri ekler theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Bunlar bizim varsayılan renklerimiz! Ardından, düğmeyle etkileşime geçtiklerinde kullanıcılara görsel geri bildirim vermek istiyoruz.

Etkileşimli düğme stillerini uygulama

Bu tamamen CSS ile ilgili bir site olduğundan, bahse girerim birçoğunuz bağlantıların ve düğmelerin etkileşimli durumlarına zaten aşinadır. Yapabiliriz :hover fare imlecini üzerlerine getirin, içine sekme :focus, yapmak için üzerlerine tıklayın :active. Hele bir de var :visited kullanıcılara bunu daha önce tıkladıklarına dair görsel bir işaret vermek için durum.

Bunlar şunlardır CSS sözde sınıfları ve bunları bir bağlantının veya düğmenin etkileşimlerini hedeflemek için kullanırız.

CSS'de, bir stil oluşturabiliriz :hover böyle devlet:

a:hover { /* Styles */
}

In theme.json, mevcut düğme bildirimimizi bu sözde sınıflarla genişleteceğiz.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Bunun "yapılandırılmış" doğasına dikkat edin. Temel olarak bir taslağı takip ediyoruz:

Artık düğmemizin varsayılan ve etkileşimli stillerinin tam bir tanımına sahibiz. Ancak, diğer bloklarda iç içe geçmiş belirli düğmeleri stillendirmek istersek ne olur?

Tek tek bloklara yerleştirilmiş stil düğmeleri

Bir istisna dışında tüm düğmelerin temel stillerimize sahip olmasını istediğimizi düşünelim. Yorum Gönderme Formu bloğunun gönder düğmesinin mavi olmasını istiyoruz. Bunu nasıl başaracaktık?

Bu blok, Button bloğundan daha karmaşıktır çünkü daha fazla hareketli parçaya sahiptir: form, girdiler, öğretici metin ve düğme. Bu bloktaki düğmeyi hedeflemek için, düğme için yaptığımızla aynı türde JSON yapısını izlemeliyiz. button öğesi, ancak şuna eşlenen Yorum Gönderme Formu bloğuna uygulanır: core/post-comments-form eleman:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Artık çalışmadığımıza dikkat edin elements artık değil. Bunun yerine, içeride çalışıyoruz blocks gerçek blokları yapılandırmak için ayrılmıştır. Düğmeler, aksine, bağımsız bir blok olarak da mevcut olsalar bile, bloklar halinde iç içe geçebildikleri için küresel bir öğe olarak kabul edilirler.

JSON yapısı, öğeler içindeki öğeleri destekler. Yani, eğer varsa button Yorum Gönderme Formu bloğundaki öğeyi hedefleyebiliriz. core/post-comments-form blok:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Bu seçici, yalnızca belirli bir bloğu değil, aynı zamanda o blokta yer alan belirli bir öğeyi de hedeflediğimiz anlamına gelir. Artık temadaki tüm düğmelere uygulanan varsayılan bir düğme stilleri grubumuz ve Yorum Gönderme Formu bloğunda yer alan belirli düğmelere uygulanan bir dizi stilimiz var.

WordPress tarafından oluşturulan CSS, sonuç olarak daha kesin bir seçiciye sahiptir:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

Yorum Gönderme Formu düğmesi için farklı etkileşimli stiller tanımlamak istersek ne olur? Bu, varsayılan stiller için yaptığımız anlaşmanın aynısıdır, yalnızca bunlar içinde tanımlanır. core/post-comments-form blok:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

Blok halinde olmayan düğmeler ne olacak?

WordPress, bu düğme stillerini çıkarmak için doğru sınıfları otomatik olarak sihirli bir şekilde oluşturur ve uygular. Ancak, blokları ve tam site düzenlemeyi destekleyen, ancak aynı zamanda "klasik" PHP şablonları içeren "karma" bir WordPress teması kullanırsanız ne olur? Veya düğmeleri içeren özel bir blok oluşturduysanız veya eski bir kısa kodunuz varsa ne olur? Bunların hiçbiri idare tarafından ele alınmaz. WordPress Stil Motoru!

Endişelenme. Tüm bu durumlarda, .wp-element-button şablon, blok veya kısa kod işaretlemesinde sınıf. WordPress tarafından oluşturulan stiller daha sonra bu örneklerde uygulanacaktır.

Ve işaretleme üzerinde hiçbir kontrole sahip olmadığınız bazı durumlar olabilir. Örneğin, bazı blok eklentileri biraz fazla düşünceli olabilir ve kendi stilini özgürce uygulayabilir. Burası genellikle bloğun ayarlar panelindeki "Gelişmiş" seçeneğine gidip sınıfı burada uygulayabileceğiniz yerdir:

Tamamlayan

“CSS” yazarken theme.json ilk başta garip gelebilir, bunun ikinci doğaya dönüştüğünü fark ettim. CSS gibi, doğru seçicileri kullanarak geniş veya çok dar olarak uygulayabileceğiniz sınırlı sayıda özellik vardır.

Ve kullanmanın üç ana avantajını da unutmayalım. theme.json:

1. Stiller, hem ön uç görünümde hem de blok düzenleyicide düğmelere uygulanır.
2. CSS'niz gelecekteki WordPress güncellemeleriyle uyumlu olacaktır.
3. Oluşturulan stiller, hem blok temalarla hem de klasik temalarla çalışır — ayrı bir stil sayfasında herhangi bir şeyi çoğaltmaya gerek yoktur.

Kullandıysanız theme.json projelerinizde farklı stiller, lütfen deneyimlerinizi ve düşüncelerinizi paylaşın. Herhangi bir yorum ve geri bildirim okumak için sabırsızlanıyorum!

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/