Yirmi Yirmi Bir Tema İncelemesi: Tasarlanan İyi & amp;En sonuncu
Yıl sonunda (ve olağanüstü yıl), diğer yeni varsayılan WordPress temaları bizi karşılamaya geldi. Ve şu anlama geliyor: derinlemesine yirmi bir temayı gözden geçirmenin zamanı geldi. En son güncellemelerle 5.6 ile yayınlandı ve bugün indirilebilir. Çadırın altına bakmaya hazır mısınız? O zaman bunu yapalım! Yirmi yirmi bir: İyi bir resim, bu incelemeye yirmi yirmi birden yeni olanlara bir göz atalım. Minimalist tasarım
Yirmi yirmi bir görünüm ve his oldukça minimalist. Bir sütun düzeni, altbilgi widget ve menü için iki konumla görünür.Selefi Twenty Twenty gibi, yeni varsayılan tema başka bir tema üzerine kuruldu. Yirmi yirmi bir durumda, taban, Automattic tarafından yayınlanan bir tema olan Seedlet tarafından sağlanır. Bu seçim kasıtlıydı çünkü ata temasının web geliştiricilerinin onu değiştirmesini kolaylaştırmak için CSS kullanma şekli. Bunu aşağıda daha ayrıntılı olarak tartışacağız. Temel düzene ek olarak, yirmi yirmi bir pastel renklere dayanan basit bir renk paleti sunuyor çünkü Mel Choyce-Dawn tasarımının lideri tarafından söylediği gibi, “Pastel ve sessiz olan renk şu anda oldukça iyi. ” Varsayılan yeşildir, ancak siyah beyaz dahil ek seçenekleriniz de vardır. Erişilebilirliğe odaklanın Minimalist tasarımına ek olarak, yirmi yirmi bir erişilebilirliğe öncelik verir. Bu temada, sadece yansıma değil, ana özellik olan tüm özelliklere sahip kullanıcılar için kullanılabilir hale getirir. Geliştirici, WCAG 2.1’e uygun olarak yapmayı amaçlamaktadır. Ulaşılması gereken daha ilginç özelliklerden biri karanlık moda desteğidir. Aşağıda da daha fazla bilgi. Gutenberg’den daha önce diğer varsayılan temalar gibi tam olarak yararlanarak, yirmi yirmi bir Gutenberg ile kullanılmak üzere tasarlanmıştır. Bu yalnızca blok editörleri kullanarak ihtiyaçları ile kullanıcılarına ayarlanabilen temel tuval sağlamayı amaçlamaktadır. Bu amaçla, aşağıdakileri içeren blok özellikleri için geniş bir destek ile birlikte gelir:
Özel blok yazı tipi boyutu ve hat yüksekliği
Yazı tipi renkleri, arka plan renkleri (gradyanlar dahil) ve bağlantılar için kontrol
Duyarlı medya gömme
Tema ayrıca bu yazıda bileceğiniz bir dizi blok deseniyle de gönderilir. Kolay Ayarlama Yirmi yirmi bir, tipografisi için performans nedenleri için iyi bir sistem yazı tipi kullanır. Bilmiyorsanız, sistem yazı tipi kullanıcının işletim sistemi tarafından yüklenen bir tipografidir. Özel bir yazı tipinden farklı olarak, sayfanıza koymak için uzun bir mesafeli web sunucusundan indirmeye gerek yoktur. Bunun yerine, tarayıcı hemen yerel bir sabit diskten çekebilir.
Buna ek olarak, Mel Choyce-Dawn, amacın temaların birçok amaç için kullanılabilmesi ve çocuk temalarının oluşturulmasını kolaylaştırmak için nötr yazı tipleri sağlamak olduğunu söyledi. Yukarıda belirtilen işaretleme CSS bu yöne doğru bir adımdır. Şimdiye kadar her şey açık mı? O zaman sunulanların temasına dalalım. Yirmi Yirmi Bir İnceleme: Tema Özelleştirme seçeneği derinlemesine bir incelemenin ilk adımı olarak, yirmi yirmi bir tarafından gönderilen ayar seçeneğini göreceğiz. Her şeyi WordPress Customer’da görünüm altında buldunuz> Özelleştir. Site Kimliği ve Özel Logo Site kimliği altında, özel bir logo, site simgesi (aka favicon) ayarlayabilir ve başlıktaki site ve sloganın başlığını görüntüleyip gösterilmeyeceğini belirleyebilirsiniz. Bu oldukça standarttır. Eklediğiniz logo, site başlığı, slogan ve menünün üstünde ortada görünür.
Ancak, slogan ve site başlığını devre dışı bıraktığınızda, sola doğru hareket eder ve gezinme menüsüyle aynı satırda görünür. Logo görüntüsü için en uygun boyut 300 x 100 pikseldir. En iyi sonuçlar için web sitenizle aynı arka plan veya aynı arka plan rengi kullanmanız gerekir. Koyu Renkler ve Moda Bu panel altında, basit renk seçmenlerinin arka plan rengini seçebilirsiniz. Önceden belirlenmiş renk şeması altta bulunur. Varsayılana tıklamak, ilk pastel yeşil renge dönmenizi sağlar. Yirmi yirmi gibi, yazı tipi rengi okumaya yeterli kontrastı korumak için otomatik olarak arka plan rengindeki değişikliğe ayarlanır. Ancak buradaki en ilginç ayar, Dark Mode desteğini etkinleştirmek için bir onay kutusudur. Etkinleştirildiğinde, koyu bir arka plan ve parlak metinle web sitenize geçmek için sitenizin köşesine bir anahtar düğmesi ekleyecektir. Kullanıcı eğitildiğinde geçiş kaybolur. Ziyaretçi cihazı etkinleştirdiğinde karanlık mod da otomatik olarak etkin olacaktır (nasıl yapılacağını öğrenmek için kablolu bu yazıyı kontrol edin). Bu özelliği kullanmayı planlıyorsanız, sitenizin karanlık modda nasıl göründüğünü kontrol ettiğinizden emin olun. Özellikle logonun görünürlüğünü, kontrast, görüntü parlaklığı vb. Dark Mode’u görmek, 2020 web tasarım trendlerinden biridir, varsayılan WordPress temasında pürüzsüz entegrasyonu görmek harika. Tema gezinme menüsünde iki menü konumu vardır: üstbilgi altında ana gezinme ve altbilgide. İkincisi de sosyal menüleri destekler. Bu, sosyal ağlara bağlantılar eklediğinizde, yirmi yirmi bir kişinin otomatik olarak her simgeye dönüştürdüğü anlamına gelir. Bu, yirmi on dokuzda zaten var olan ancak yeni temanın da onu desteklediğini bilmeyi seven bir şey. Gutenberg’in işlevselliği bu sürümün ana odağından biri olduğu için yirmi yirmi bir editör seçeneği, elbette burada yirmi yirmi bir kişinin sunduklarını da gözden geçiriyoruz. İyi çalışan editör stili, öne çıkan ilk şey, temanın Editör tarzı sayfasını tamamen kullanmasıdır. Düzenleme deneyimi, özel bir arka plan rengi de dahil olmak üzere ön görünümünüzle aynı görünüyor. Bu özelliği ön uçta etkinleştirdiğinizde veya devre dışı bıraktığınızda, Gutenberg için de geçerlidir.
Çeşitli blok desenleri belirtildiği gibi, varsayılan yirmi yirmi bir tema Gutenberg blok desenlerinin kullanımına çok odaklanmıştır. Yeni bir blok eklemek için Sembol Plus’ı tıklayarak bulursunuz, hepsine göz atın, ardından bir desen sürücüsü seçin. Bu ritmin teması: Büyük metin – tam olarak adından da anlaşılacağı gibi. Büyük başlık blokları (varsayılan olarak devasa olarak düzenlenmiş yazı tipi boyutu) içerik alanı boyunca uzanır. Bağlantı Alanı – Başlık/Sosyal Ağlara Bağlantılar veya E -posta Adresleri ile harekete geçme davetiyesi. Medya ve Metin Makaleleri Başlığı – Soldaki resimler, başlık, ayırıcı ve sağdaki paragraf. Üst üste binen görüntüler – Üç örtüşen görüntü dikey olarak hizalanır.
İki görüntü gösteriyor – solda daha büyük medya ve metin blokları, sağdaki daha küçük çerçeveli görüntüler.
Üst üste binen görüntüler ve metinler – üst üste binen dikey öğeler, hem görüntüler hem de metin.
Portföy Listesi – Ayırıcı ile bölünmüş küçük resimler dahil proje listesi.
İletişim bilgileri – İletişim bilgileri ve sosyal medya profilleri için üç sütun.
İşte bir sayfadaki tüm blok desenleri (her şeyin örnek içerikle nasıl geldiğini unutmayın): elbette, her şey tam olarak ayarlanabilir ve düzenleyici ayrıca özelleştiricide görüldüğü gibi aynı renk paletini sunar.Bu şekilde, tüm renklerin birlikte eşleştiğinden emin olabilirsiniz.
Bu arada, kendi blok modelinize katkıda bulunmak istiyorsanız, bunu burada yapabilirsiniz (GitHub’a giriş gerektirir).İncelemenin başlangıcında belirtildiği gibi yirmi yirmi bir geliştirici dostu özelliği, orijinal teması, yirmi yirmi bir de geliştiriciler ve web tasarımcıları için ilginç özellikler sunar.Bu, stil sayfasını açtığınızda hemen görülür.
Gördüğünüz gibi, özel mülkiyet CSS takma adı değişkenleri ile doldurulur. Değişkenlere alışık değilseniz, bu tekrarlanan değerlerin yerine geçer. Örneğin, sitenizin ana rengini aşağıdakiler gibi bir stil sayfasının başında belirleyebilirsiniz: -Global-Color-özel: #28303D; Bu rengi öğeye eklemek istediğinizde, renk bildirimi yerine değişkeni kullanabilirsiniz. . Navigasyon {color: var (-global-color-primary); } Diğer değişkenlere değişkenleri belirlemek de mümkündür: -Global-Color-Sınır: Var (-Global-Color-Private); Avantajlar: Temanızda farklı bir birincil rengi ayarlamak gibi geniş bir değişiklik yapmak istiyorsanız, tüm dosyayı aramak ve değiştirmek yerine yalnızca bir yeri değiştirmeniz gerekir. Bu, çocuğunuzun temasının veya temasının ayarlanmasını çok daha rahat ve daha hızlı hale getirir. Daha önce de belirtildiği gibi, bu yirmi yirmi birincinin arkasındaki ana fikirlerden biridir. Buna ek olarak, CSS değişkeni nispeten yeni bir özellik olmasına rağmen, tarayıcı desteği çok iyi olduğu için değişkenin kullanımı güvenlidir. Pekala, hazır ol. Yirmi yirmi bir blok adı verilen yirmi yirmi bir ikinci geliştirme versiyonu var. Yirmi yirmi yirmi on dokuz için Github’da blokl versiyonu ile birlikte bulabilirsiniz. Gutenberg editör eklentisinin en son sürümüyle birlikte yirmi yirmi bir bloğu indirir, yükler ve etkinleştirirseniz, WordPress kontrol panelinde Site Düzenleyicisi adlı yeni bir seçenek bulacaksınız.
Bir tıklama, Sitenizin ön ucunu Gutenberg editörü gibi bir arayüzle düzenleyebileceğiniz ekrana gönderdi.
Menüye sosyal simgeler eklemek, ara parçayı eklemek ve kaldırmak, öğelerin konumunu değiştirmek ve daha fazlasını yapmak gibi şeyler yapabilirsiniz.Daha önce bir WordPress sayfa yapımcısı ile çalıştıysanız, bu çok tanıdık görünecektir.Ayrıca sayfa şablonlarına göre değişiklik yapabilirsiniz.Bu şekilde, tek bir yayın, sayfalar, kategori arşivleri veya 404 hata sayfanızı düzenleyebilirsiniz.Başlığınız ve altbilginiz gibi şablon bölümü için de aynı şey mümkündür. Ayrıca, mevcut bloklar için renkler, yazı tipleri ve hatta varsayılan stiller gibi global stilleri değiştirebilirsiniz.
