Erişilebilecek Gutenberg dostu temayı inşa etmekten öğrendiklerimiz
WPMU Dev ekibi, okullar ve üniversiteler için barındırma ve WordPress hizmetleri sunan CampUSPress’in arkasındaki ekiple aynı. Dün, en son ürünümüzü, esnek bir WordPress temasını yayınladık ve okullar ve eğitim için erişilebilir. Bu, ekibimiz tarafından oluşturulan Gutenberg Block Editor tarafından sunulan her şeyi, yeniden kullanılabilecek bir blok, editörün stili, içerik grubu ve varsayılan bloğu ayarlayan ilk temadır. Şekerle kaplamanın bir anlamı yoktur, beklediğimiz proje kadar hızlı veya kolay değildir. Ama sonuç buna değer. Burada neden ve nasıl yaptığımızı paylaşacağımızı düşünüyoruz. Bu, gelecekte yeni bir WordPress teması seçen, tasarlayan veya geliştiren herkes için yararlı olacaktır.
Biraz arka plan
Herkes tarafından yayınlanması, düzenlenmesi ve içerik oluşturması kolay
Tüm erişilebilirlik yönergelerini aşmak
Logolar, renkler, yazı tipleri vb. Gibi marka yönergelerine uyun.
Bu bir veya iki gereksinimi karşılayan temalar yapmak veya bulmak yeterince kolaydır, ancak üçünü sağlayın, bir sonraki seviye zorluktur. Yapacak bazı işlerimiz olmasına rağmen (aşağıda daha fazla), sonuçlardan kesinlikle memnunuz. Gelişimimizin bir yığınını seçmek, geliştirmeye başlamadan önce, dahil etmek istediğimiz belirli özelliklere karar vermek için çok zaman harcıyoruz. İnşa etmek için çeşitli çerçeveler ve araçlardan bakın. Gerçekten sıfırdan başlamak için hiçbir neden yok. Odak noktamız, erişilebilirlik, performans ve kullanıcı dostu hedeflerimizde bize yardımcı olacak en iyi araçları ve çerçeveleri bulmaktır. Temel olarak, Twitter’ın Automattic ve Bootstrap Framework’ün ‘alt çizgileri’ temasına dayanarak understrap yapmaya karar verdik. Bu, oldukça popüler ve nedenini bulmak kolay bir çerçevedir. Understrap ile başlamak geliştirme süresini azalttı ve erişilebilirliğimizin amacına önemli ölçüde yardımcı oldu.
Ayrıca, tüm farklı seçenekler ve tema ayarları için WordPress ayarına çok bağımlı olmak istediğimizi de biliyoruz. Kirki çerçevesine aşık olduk ve sunduğu bazı kontrollerden yararlandık. Temamız, gelişmeyi kolay ve daha hızlı hale getiren CSS değişkenleri kullanır (performansı artırmak için daha az JavaScript ile). Bu, IE11’de (bazı müşterilerimiz tarafından kullanılır) çalışmak için özel bir komut dosyası gerektirir ve tüm özellikler IE11’de kullanılamaz. Harf seçenekleri için, ayarlamalarda birçok ücretsiz Google yazı tipi sağlayarak başlıyoruz. Ancak, yüklenmesi için ağır olabilecek tüm varyantları ve stilleri (kalın, eğik vb.) Yüklememiz gerekir, bu nedenle Google yazı tipini hiç eklememeyi ve yalnızca ücretsiz değişken yazı tipleri eklememeyi seçiyoruz. Modern bir yazı tipi ile seçmek için iyi bir seçim yapmak için modern bir yazı tipi ile oldukça fazla varyasyon var. Son olarak, okul müşterilerimiz gerçekten simgeleri seviyor. Iconmoon, ücretsiz simgeler arasından seçim yapmamızı kolaylaştırır (ancak siteyi yavaşlatmamaya veya kullanıcıyı yüklemememiz için çok fazla girmemeye çalışıyoruz). Sonuç olarak, simgeyi menüye ve içerik bloğuna eklemek ve ayarlamak kolaydır. Bu notta, özelleştiricideki menüye özel simge seçenekleri eklememizi sağlayan WordPress 5.4’teki yeni Hook’tan çok memnunuz. Şimdiye kadar, doğrudan ayarda menü ile başka bir şey yapabilse de, kullanıcıları simgeleri yönetmek istiyorlarsa görünüm> menüleri açmaya zorluyoruz. Bu yeni WordPress Core özelliği kullanım için büyük bir kazanç olacak.
Bu tema ile daha az iyi bilinen favori Gutenberg özelliği, Gutenberg Block Editor ile ekibimizdeki birçok insanın yaşadığı ilk önemli deneyimdir. Tema ile geliştirdiğimiz daha az bilinen bazı özelliklere bağımlı olduk. Yeniden kullanılabilecek blok
Yeniden kullanılabilecek bloklar, tüm sitelerde bir kereden fazla tekrarlanan her blok veya içerik için çok kullanışlıdır. Bir kez yapabilirsiniz ve değişiklik bir sitede blok görünürse uygulanır. Temamızla, yeniden kullanılabilecek bir blok oluşturduktan sonra, WordPress kontrol panelinde de yeniden kullanılabilecek ana menü öğesini görüntülemek için çekirdek WordPress’te bir filtre kullandık.
Müşterilerimiz, altbilgi içeriği, ‘mega menü’ yapmak ve birkaç sayfada önemli bildirimler dahil olmak üzere çeşitli nedenlerle yeniden kullanılabilecek bloklar kullanır. İçerik grubu
Block Editor’daki ‘İçerik Grubu’nu kullanmak, tam sayfa üreticisi özelliklerine gerçekten izin veren şeydir. Kolayca bir ‘çizgi’ oluşturabilir veya blokları birleştirebilir ve daha uyarlanmış ayırma ve görünüm sağlamak için grubun ayrı arka plan renklerini seçebilirsiniz. Editörün Tarzı ‘Gutenberg’in en sevdiğimiz özelliklerinden biri, arka uç düzenleyicinin ön uçla aynı stille içeriği görüntülemesi için yapabileceği tema yapabileceği tema. Arka plan renkleri, yazı tipleri ve düğmelerle ‘True Wysiwyg’ deneyimi, doğrudan siteye bakarken düzenlerken aynı şeyi gösterir.
Ancak, temayı geliştiren herkes için, stili iki kez uygulamamız gerektiğini bulduk çünkü düzenleyicideki HTML ön uçtan farklı. Bu aynı zamanda gelişim sırasında temaları artırdığımızda iki kez değişiklik yapmaya ve değişiklik yapmaya devam etmemiz gerektiği anlamına gelir. Devam eden bir tür savaştı. Düzenleyicinin belgelenmesi ve uygulanmasının, daha fazla tema yazarı kullandıkça artmaya devam edeceğini umuyoruz. Tasarım Erişilebilirliği Çok zaman harcayan özelliklerden biri, kullanıcılara renk seçmede esneklik sağlamak, ancak yine de metin ve arka plan renkleri arasında erişilebilen kontrast oranlarını uygulamaktır. Burada metin. Ayrıca, arka plan, düğmeler, alıntılar vb. İçin blok ayarlarında kullanılabilecek ek vurgu renkleri sağlamak için tercih edilen rengi de kullanırız. Çoğu erişilebilirlik cihazı daha çok erişilebilirlik sorunları bulmakla ilgili olsa da, hedefimiz sorunların ortaya çıkmadan önce önleme ile ilgilidir. Erişilebilirliğin bir süreklilik olduğunu biliyoruz, yani her zaman geliştirilebilir. Bu nedenle, üründeki temamıza erişilebilecek tasarım seçenekleri oluşturmaya devam edeceğiz.Temamız için sırada ne var?Bu temayı gelecekte tüm özel tema projelerimiz için bir ebeveyn olarak inşa ettik.Yeni özel bloklar eklemeye ve müşterilerimiz tarafından kullanılan popüler eklentilerle entegre olmaya devam edeceğiz.Ayrıca, Multisite Networks’teki tüm sitelerde paylaşılabilecek yeniden kullanılabilecek bir blok yapmak için çalışıyoruz.Hala bir istek varsa, umuduyla gerçek dünya testi yapıyoruz, sonunda WordPress.org adresine de göndereceğiz.Bu arada, bir web sitesine ihtiyaç duyan ve bu temayı kullanmak isteyen okulu biliyorsanız, bize gönderin!;) Favori Gutenberg özelliğiniz var mı?Veya özlediğimiz temanız için araçlar veya çerçeveler?Bize aşağıya söyle! Etiket:
Erişilebilirlik-SIAP
kampüs baskısı
Eğitim
Gutenberg
