Karşı karşıya geldim Ana Segota'dan bu tweet CSS eklemenin bir yolunu arıyorum box-shadow WordPress'te bir düğmenin üzerine gelme durumuna theme.json dosyası.

soruyor çünkü theme.json WordPress'in blok temalar için temel stilleri taşımaya başlamamızı istediği yer burasıdır. Geleneksel olarak, her türlü stili yapardık. style.css "klasik" bir temada çalışırken. Ancak, son zamanlarda WordPress 3 ile birlikte gelen varsayılan Yirmi Yirmi Üç (TT6.1) temasıyla, tüm stillerini theme.json, aynı şeyi kendi temalarımızla da yapabilmeye gittikçe yaklaşıyoruz. Bunu yakın tarihli bir makalede ayrıntılı olarak ele aldım.

"Daha yakın ve daha yakın" diyorum çünkü hala desteklenmeyen birçok CSS özelliği ve seçici var. theme.json. Örneğin, bir şeye like ile stil vermeyi umuyorsanız perspective-origin in theme.json, bu olmayacak - en azından bugün bunu yazdığım için.

anan bakıyor box-shadow ve şans eseri, bu CSS özelliği tarafından destekleniyor theme.json WordPress 6.1'den itibaren. Tweet'i 1 Kasım tarihli, 6.1'in piyasaya sürüldüğü aynı gün. Mülk için destek, sürümde bir manşet özelliği değildi. Daha büyük başlıklar, bloklar ve blok temaları için boşluk bırakma ve düzen teknikleriyle daha ilgiliydi.

İşte nasıl uygulayabileceğimiz box-shadow belirli bir bloğa — Öne Çıkan Resim bloğunu söyleyin — içinde theme.json:

{ "version": 2, "settings": {}, // etc. "styles": { "blocks" :{ "core/post-featured-image": { "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)" } } }
}

merak ediyorum yeni renk sözdizimi İşler? Ben de! Ama denediğimde - rgb(0 0 0 / 0.66) - Hiçbirşeyim yok. Belki de bu zaten üzerinde çalışılmaktadır veya bir çekme isteği kullanılabilir.

Kolay değil mi? Elbette, normal CSS yazmaktan çok farklı style.css ve alışmak biraz zaman alıyor. Ancak en son WordPress sürümünden itibaren bu gerçekten mümkün.

Ve hey, aynı şeyi bir düğme gibi bireysel "öğelere" de yapabiliriz. Düğme kendi başına bir bloktur, ancak başka bir blok içinde iç içe geçmiş bir blok da olabilir. Yani, uygulamak için box-shadow global olarak tüm düğmelere, bunun gibi bir şey yapardık theme.json:

{ "version": 2, "settings": {}, // etc. "styles": { "elements": { "button": { "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)" } } }
}

Ama Ana düğmenin gölgesini eklemek istiyor. :hover durum. Neyse ki, Etkileşimli durumları şekillendirme desteği sözde sınıflar kullanan düğmeler ve bağlantılar gibi belirli öğeler için — dahil :hover, :focus, :active, ve :visited - ayrıca kazandı theme.json WordPress 6.1'de destek.

{ "version": 2, "settings": {}, // etc. "styles": { "elements": { "button": { ":hover": { "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)" } } } }
}

Bir ana tema kullanıyorsanız, bir alt temada kesinlikle bir temanın stillerini geçersiz kılabilirsiniz. Burada, TT3'ün düğme stillerini tamamen geçersiz kılıyorum.

{ "version": 2, "settings": {}, // etc. "styles": { "elements": { "button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--tertiary)", "text": "var(--wp--preset--color--contrast)" }, "outline": { "offset": "3px", "width": "3px", "style": "dashed", "color": "red" }, "typography": { "fontSize": "var(--wp--preset--font-size--medium)" }, "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)", ":hover": { "color": { "background": "var(--wp--preset--color--contrast)", "text": "var(--wp--preset--color--base)" }, "outline": { "offset": "3px", "width": "3px", "style": "solid", "color": "blue" } }, ":focus": { "color": { "background": "var(--wp--preset--color--contrast)", "text": "var(--wp--preset--color--base)" } }, ":active": { "color": { "background": "var(--wp--preset--color--secondary)", "text": "var(--wp--preset--color--base)" } } } } }
}

İşte bunun nasıl oluşturulduğu:

Bunu yapmanın başka bir yolu: özel stiller

Yakın zamanda piyasaya sürüldü pixl blok teması, gerçek dünya kullanımının başka bir örneğini sunar. box-shadow mülkiyet theme.json alternatif bir yöntem kullanarak özel değerleri tanımlar. Temada, özel bir box-shadow özellik olarak tanımlanır .settings.custom.shadow:

{ "version": 2, "settings": { // etc. "custom": { // etc. "shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)" }, // etc. }
}

Ardından, dosyanın ilerleyen kısımlarında, özel shadow özelliği bir düğme öğesinde çağrılır:

{ "version": 2, "settings": { // etc. }, "styles": { "elements": { "button": { // etc. "shadow": "var(--wp--custom--shadow) !important", // etc. ":active": { // etc. "shadow": "2px 2px var(--wp--preset--color--primary) !important" } }, // etc. }
}

kullanımından tam olarak emin değilim. !important bu içerikte. Önsezim, Site Düzenleyici'de tanımlanan stillerden daha yüksek özgüllüğe sahip olan Global Stiller Kullanıcı Arayüzünü kullanarak bu stillerin geçersiz kılınmasını önleme girişimidir. theme.json. İşte daha fazla bilgi için bağlantılı bir bağlantı blok tema stillerini yönetme hakkındaki önceki makalemden.

Güncelleme: Bu konuda bütün bir tartışma olduğu ortaya çıktı Çekme İsteği #34689, WordPress 5.9'da ele alındığını not eder.

Ve dahası var…

Gölgelere ek olarak, CSS outline mülk de kazandı theme.json WordPress 6.1'de desteklenir ve düğmelere ve bunların etkileşimli durumlarına uygulanabilir. Bu GitHub Halkla İlişkiler iyi bir örnek gösterir.

"elements": { "button": { "outline": { "offset": "3px", "width": "3px", "style": "dashed", "color": "red" }, ":hover": { "outline": { "offset": "3px", "width": "3px", "style": "solid", "color": "blue" } } }
}

Ayrıca nasıl yapıldığına dair gerçek örnekleri de bulabilirsiniz. outline özellik dahil olmak üzere diğer temalarda çalışır gürültü, Blok Tuval, ve blok tabanı.

Tamamlayan

WordPress 6.1'de temayı engelleme söz konusu olduğunda, tek bir CSS özelliğiyle ilgili konuşulacak bu kadar çok şey olduğunu kim bilebilirdi? Ayarlamak için resmi olarak desteklenen yöntemleri gördük. box-shadow bir düğme öğesinin etkileşimli durumları da dahil olmak üzere bloklar ve bireysel öğeler üzerinde. Ayrıca bir alt temada gölgeleri nasıl geçersiz kılabileceğimizi de kontrol ettik. Ve son olarak, özel bir özellikte gölgeleri tanımlayan ve ayarlayan gerçek dünyadan bir örnek açtık.

WordPress hakkında daha ayrıntılı derinlemesine tartışmalar bulabilirsiniz ve box-shadow bu konuda uygulama GitHub Halkla İlişkiler. Orada bir de GitHub teklifi bloklarda gölge değerleri ayarlamak için doğrudan WordPress'e kullanıcı arayüzü eklemek için - şunları yapabilirsiniz: doğrudan animasyonlu bir GIF'e atlayın bunun nasıl işe yarayacağını gösteriyor.

Bundan bahsetmek, justin iribaş geçenlerde bir ilerleme çubuğu oluşturan bir blok geliştirdi ve içine entegre kutu gölge kontrolleri. Bunu şu videoda gösteriyor:

Daha fazla bilgi

daha derine inmek istiyorsanız box-shadow ve tarafından desteklenen diğer CSS özellikleri theme.json dosya, kullanabileceğiniz birkaç kaynak şunlardır:

• 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/adding-box-shadows-to-wordpress-blocks-and-elements/