Yirmi Yirmi -One: Yeni Varsayılan WordPress temasına derinlemesine dalmak
Yirmi Yirmi Bir, WordPress 5.6 ile birlikte gelen yeni varsayılan WordPress temasıdır. Tam bir WordPress temasının eksiksiz bir özelliğe sahip olmasını bekliyorsanız, biraz hayal kırıklığına uğrayabilirsiniz.
Ücretsiz demoyu deneyin
Yirmi yirmi bir, görünür olan ve çok ayarlanmış boş bir tuval olarak işlev gören minimalist bir temadır. Selefi gibi, yeni varsayılan temaların çoğu sayfalar için blok düzenleyicisine bağlı olacaktır. Bu yazıda, yirmi yirmi bir temanın en ilginç özelliklerini tartışacağız ve WordPress web sitesinin görünümünü ve hissini basit bir yirmi yirmi bir çocuk temasıyla nasıl ayarlayacağınızı göstereceğiz.
Hazır? Bölünelim!
Yirmi Yirmi -One temasının önizlemesi (Görüntü Kaynağı: WordPress Core’u Makin)
Yirmi yirmi bir WordPress temasında yirmi yirmi gibi ilk ekran, WordPress 5.6 ile birlikte gelen yeni varsayılan tema başlangıçtan yapılmaz, ancak topluluktan kaynaklanan temalara dayanır. Temiz ve iyi organize edilmiş özel bir CSS özellik yapısı sağlayan yeni bir otomatik teması olan yirmi yirmi bir tane geliştirildi. CSS mülkünün tema stili sayfasındaki birçok kullanımı nedeniyle, yirmi yirmi bir hızlı ve kolay bir çocuk teması haline getirir.
Yirmi yirmi bir WordPress temasında yirmi yirmi gibi ilk ekran, WordPress 5.6 ile birlikte gelen yeni varsayılan tema başlangıçtan yapılmaz, ancak topluluktan kaynaklanan temalara dayanır. Temiz ve iyi organize edilmiş özel bir CSS özellik yapısı sağlayan yeni bir otomatik teması olan yirmi yirmi bir tane geliştirildi. CSS mülkünün tema stili sayfasındaki birçok kullanımı nedeniyle, yirmi yirmi bir hızlı ve kolay bir çocuk teması haline getirir.
WordPress Seedlet teması
Yirmi yirmi bir, tek bir sütun düzeni, altbilgi yan bıçakları ve iki menü konumu ile çok kolay erişilebilen minimalist bir WordPress temasıdır: ana navigasyon ve navigasyon altbilgisi. Yeni temalar bir yığın sistem yazı tipi kullanır. Bunun kullanıcılar ve geliştiriciler için birkaç faydası olmalıdır:
İlk ve en önemlisi, bir sistem yazı tipi yığını kullanmak, orijinal yazı tipi çoğu işletim sistemi tarafından desteklendiğinden ve ek yükleme süresi gerektirmediğinden ux ve performansa fayda sağlar. İkincisi, nötr görünüyorlar, böylece herhangi bir türde sorunsuz bir şekilde birleştirilebilirler tasarım.
Üçüncüsü, yüklemek için ek yazı tipi dosyalarına ihtiyaç duymadıkları için, kullanıcıların ve geliştiricilerin yirmi yirmi bir tane kullanarak web sitesinin düzenini ayarlamaları daha kolaydır.
Yirmi yirmi bir tema, yeşil pastel yeşilin arka plan rengine ve ön arka plan rengi olarak iki gri renk temelinde minimum bir renk paleti kullanır. Bu tema birkaç ek pastel renk palet sağlar.
Bu noktada, varsayılan tema tasarımı kurşun olan Mel Choyse-Dwan açıkladı: Temaları beyaz ve siyah şemalar da dahil olmak üzere birkaç ek renk paletiyle birleştireceğiz. Neden yeşil pastel? Pastel ve şimdi oldukça iyi sessiz renkler
Yirmi Yirmi -One Renk (Görüntü Kaynağı: WordPress Çekirdeği Yapın)
Yirmi yirmi bir, tek bir sütun düzeni, altbilgi yan bıçakları ve iki menü konumu ile çok kolay erişilebilen minimalist bir WordPress temasıdır: ana navigasyon ve navigasyon altbilgisi. Yeni temalar bir yığın sistem yazı tipi kullanır. Bunun kullanıcılar ve geliştiriciler için birkaç faydası olmalıdır:
İlk ve en önemlisi, bir sistem yazı tipi yığını kullanmak, orijinal yazı tipi çoğu işletim sistemi tarafından desteklendiğinden ve ek yükleme süresi gerektirmediğinden ux ve performansa fayda sağlar. İkincisi, nötr görünüyorlar, böylece herhangi bir türde sorunsuz bir şekilde birleştirilebilirler tasarım.
Üçüncüsü, yüklemek için ek yazı tipi dosyalarına ihtiyaç duymadıkları için, kullanıcıların ve geliştiricilerin yirmi yirmi bir tane kullanarak web sitesinin düzenini ayarlamaları daha kolaydır.
Yirmi yirmi bir tema, yeşil pastel yeşilin arka plan rengine ve ön arka plan rengi olarak iki gri renk temelinde minimum bir renk paleti kullanır. Bu tema birkaç ek pastel renk palet sağlar.
Bu noktada, varsayılan tema tasarımı kurşun olan Mel Choyse-Dwan açıkladı: Temaları beyaz ve siyah şemalar da dahil olmak üzere birkaç ek renk paletiyle birleştireceğiz. Neden yeşil pastel? Pastel ve şimdi oldukça iyi sessiz renkler
Yirmi Yirmi -One Renk (Görüntü Kaynağı: WordPress Çekirdeği Yapın)
Yirmi Yirmi Bir, WordPress 5.6 ile birlikte gelen yeni varsayılan WordPress temasıdır! Bu derinlikli kılavuzdaki tüm ana özellikleri öğrenin! Bu yazı yazıldığı sırada yirmi yirmi birin nasıl yükleneceğini tweet’e tıklayın, yirmi yirmi bir aktif geliştirme içindedir ve henüz WordPress tema dizininden indirilemeyecektir. Ancak GitHub’da devam eden tema sürümünü alabilirsiniz.
Github’ın deposu, tema çekirdeğe birleştirildikten sonra tekrar kullanılmayacak ve tema dizininde bulacaksınız. Yirmi Yirmi Bir WordPress 5.6 sürüm programını takip ettiğinden, aşağıdaki tarihi kaydetmek isteyebilirsiniz:
20 Ekim 2020: Beta 1
27 Ekim 2020: Beta 2
2 Kasım 2020: Beta 312 Kasım 2020: Beta 4
17 Kasım 2020: RC 1
1 Aralık 2020: RC 2
7 Aralık 2020: WordPress 5.6’nın piyasaya sürülmesi için kuru koşu
8 Aralık 2020: WordPress Sürüm 5.6 için hedef tarih
Yirmi yirmi bir temayı etkinleştirmek ve çalıştırmak için aşağıdaki adımları izleyin:
GitHub’dan bir zip paketi alın.
Paketinizi WordPress kontrol panelinden veya SFTP üzerinden geliştirme kurulumunuza yükleyin.
Görünüm → temaları keşfedin ve tema önizleme resmindeki Etkinleştir düğmesini tıklayın.
Görünümü açın → Yirmi Yirmi -Birikim’i yapılandırmak için ayarlayın.
Artık sahneleme web sitesinde veya yerel ortamınızda test etmeye başlayabilirsiniz.
Önemli
Yirmi yirmi bir kişinin hala aktif gelişimde olduğunu, birçok sorunun iyileştirilmediğini ve gelecekte bazı özelliklerin değişebileceğini lütfen unutmayın.
Github’da Yirmi Yirmi -One Edition #620
Testinizi çalıştırmaya hazır değil misiniz? Endişelenme, temayı inceledik ve size yirmi yirmi birden neler bekleyebileceğinizi göstereceğiz. Yirmi yirmi tema ve blok özelliği yirmi yirmi ile aynıdır, yeni varsayılan WordPress teması tam bir sigorta teması değil, sayfaların blok düzenleyicisine bağlı olan minimalist bir temadır. Bu tema aynı zamanda iyi erişilebilirlik sağlamayı da amaçlamaktadır. Mel Choyce-Dwan sözleriyle:
Github’ın deposu, tema çekirdeğe birleştirildikten sonra tekrar kullanılmayacak ve tema dizininde bulacaksınız. Yirmi Yirmi Bir WordPress 5.6 sürüm programını takip ettiğinden, aşağıdaki tarihi kaydetmek isteyebilirsiniz:
20 Ekim 2020: Beta 1
27 Ekim 2020: Beta 2
2 Kasım 2020: Beta 312 Kasım 2020: Beta 4
17 Kasım 2020: RC 1
1 Aralık 2020: RC 2
7 Aralık 2020: WordPress 5.6’nın piyasaya sürülmesi için kuru koşu
8 Aralık 2020: WordPress Sürüm 5.6 için hedef tarih
Yirmi yirmi bir temayı etkinleştirmek ve çalıştırmak için aşağıdaki adımları izleyin:
GitHub’dan bir zip paketi alın.
Paketinizi WordPress kontrol panelinden veya SFTP üzerinden geliştirme kurulumunuza yükleyin.
Görünüm → temaları keşfedin ve tema önizleme resmindeki Etkinleştir düğmesini tıklayın.
Görünümü açın → Yirmi Yirmi -Birikim’i yapılandırmak için ayarlayın.
Artık sahneleme web sitesinde veya yerel ortamınızda test etmeye başlayabilirsiniz.
Önemli
Yirmi yirmi bir kişinin hala aktif gelişimde olduğunu, birçok sorunun iyileştirilmediğini ve gelecekte bazı özelliklerin değişebileceğini lütfen unutmayın.
Github’da Yirmi Yirmi -One Edition #620
Testinizi çalıştırmaya hazır değil misiniz? Endişelenme, temayı inceledik ve size yirmi yirmi birden neler bekleyebileceğinizi göstereceğiz. Yirmi yirmi tema ve blok özelliği yirmi yirmi ile aynıdır, yeni varsayılan WordPress teması tam bir sigorta teması değil, sayfaların blok düzenleyicisine bağlı olan minimalist bir temadır. Bu tema aynı zamanda iyi erişilebilirlik sağlamayı da amaçlamaktadır. Mel Choyce-Dwan sözleriyle:
Son olarak, WCAG 2.1 seviye AAA’nın ilgili yönergelerini karşılamak için bir tema yapmak istiyoruz. +Make.wordpress.org/ Erişilebilirlik/ Getirdiğinde fikirleri seviyoruz ve bunu gerçekleştirmeye yardımcı olmak için topluluğumuzun ve uzmanlarımızın tüm rehberliklerini takdir edeceğiz. Temalar, aşağıdakileri içeren bir dizi iyi temayı ve blok özelliğini desteklemektedir: Tema Özellikleri: Otomatik Yem Bağlantıları
Başlık etiketi
Post formatı
Küçük Resim Posta
HTML5 Elemanı
özel logo
Widget’lar için seçici ferahlık
Özel arka plan
İki navigasyon menüleri
Bir yan çubuk
Blok Özelliği:
Varsayılan blok kuvveti
Editör tarzı
Karanlık Editör Stili (Karanlık Arka Plan)
Genişliği hizalayın
Blok Yazı Tipi Boyutu
Renk paleti bloğu
Blok Gradyan Ön Ayar
Yeni Başlayan İçerik
Sematan Duyarlı
Özel hat yüksekliği
Deneysel bağlantı rengi
Özel deneysel alanlar
Özel Birim (WordPress 5.6’da silindi)
Aşağıdaki liste, yirmi yirmi bire dayalı bir web sitesi oluştururken daha alakalı olabilecek özellikleri içerir.
Yirmi Yirmi Navigasyon Menüsü, başlığın sağ üst köşesinde bulunan ana navigasyon olmak üzere iki menü konumunu ve navigasyon altbilgisini destekler.
Menü Yirmi Yirmi -One
Altbilgi menüsüne eklenirse, sosyal bağlantılar otomatik olarak algılanır ve desteklenen sosyal medya için SVG simgelerine dönüştürülür.
Yirmi Yirmi -Bir Sosyal Menü
Başlık etiketi
Post formatı
Küçük Resim Posta
HTML5 Elemanı
özel logo
Widget’lar için seçici ferahlık
Özel arka plan
İki navigasyon menüleri
Bir yan çubuk
Blok Özelliği:
Varsayılan blok kuvveti
Editör tarzı
Karanlık Editör Stili (Karanlık Arka Plan)
Genişliği hizalayın
Blok Yazı Tipi Boyutu
Renk paleti bloğu
Blok Gradyan Ön Ayar
Yeni Başlayan İçerik
Sematan Duyarlı
Özel hat yüksekliği
Deneysel bağlantı rengi
Özel deneysel alanlar
Özel Birim (WordPress 5.6’da silindi)
Aşağıdaki liste, yirmi yirmi bire dayalı bir web sitesi oluştururken daha alakalı olabilecek özellikleri içerir.
Yirmi Yirmi Navigasyon Menüsü, başlığın sağ üst köşesinde bulunan ana navigasyon olmak üzere iki menü konumunu ve navigasyon altbilgisini destekler.
Menü Yirmi Yirmi -One
Altbilgi menüsüne eklenirse, sosyal bağlantılar otomatik olarak algılanır ve desteklenen sosyal medya için SVG simgelerine dönüştürülür.
Yirmi Yirmi -Bir Sosyal Menü
Yirmi Yirmi -One Post formatı dokuz post formatı destekler: bağlantılar, yan, galeri, görüntüler, alıntılar, durum, video, ses, sohbet. Durum ayarlarında Durum ve Görünürlük panelinde yayın biçiminizi seçebilirsiniz.
Yirmi Yirmi -One dokuz post formatı destekler
Yirmi Yirmi -One dokuz post formatı destekler
Yirmi yirmi bir temanın posta biçimini nasıl ele aldığını görmek için şablon parçalarına/alıntı klasörüne gidin ve şablonu seçin. Örneğin, favori kod düzenleyicinize Excerpt-image.php dosyasını açın. Bu dosyada aşağıdaki kodu göreceksiniz: /*** Resim Post formatı için uygun içeriği gösterin. * * @link https://deceloper.wordpress.org/themes/basics/template-hiererarchy/ * @package wordpress * @subpackage twenty_twenty_one * @since 1.0.0 * /// hiçbir özellikli-image, yazdırıyorsa İlk görüntü bloğu bulundu. if (! yirmi_twenty_one_can_show_post_thumbnail () && has_block (‘çekirdek/image’, get_the_content ()))) {yirmi_twenty_of_oof_ofock (‘çekirdek/image’, get_the_content ()); } the_excerpt (); Bu kod oldukça açıktır, ancak daha yakından bakalım: Has_block, bir yazı veya dize belirli blok türleri içerip içermediğini belirler (bu örnekte çekirdek çizim blokları).
Yirmi_twenty_one_print_first_instance_of_block, bir bloğun ilk örneğini içerikte yazdıran ve sonra ayrılan yirmi yirmi bir şablon işlevidir.
Yirmi_twenty_one_print_first_instance_of_block, bir bloğun ilk örneğini içerikte yazdıran ve sonra ayrılan yirmi yirmi bir şablon işlevidir.
Bu nedenle, site sanatçısı ‘resim’ biçiminde bir gönderim arşivi gerektiriyorsa, WordPress arşivdeki her yazı için en üstteki görüntüleri görüntüler. Aynı mantığı takiben, şablonun uygun bölümünü kontrol ederek herhangi bir yazı biçimine dalabilirsiniz. Yirmi bir özel site ve özel logo kimliği 300 × 100 piksel özel logo için destek sağlar. Özel logo ayarlarını site kimlik panelinde bulabilirsiniz.
Yirmi yirmi bir site kimliği
Bu ekran şunları içerir:
özel logo
Site Başlığı
Yirmi yirmi bir site kimliği
Bu ekran şunları içerir:
özel logo
Site Başlığı
Slogan
Site simgesi
Yirmi Yirmi Yazı Tipi Editör Boyutu aşağıdaki yazı tipi boyutunu destekler: Ekstra Küçük – 16
Küçük – 18
Normal/Orta – 20
Büyük – 24
Ekstra Büyük – 40
Büyük – 96
Dev – 144
Tema doyumu ile boyut fren ünitesinde düzenlenmiştir.
Yirmi Yirmi -One yedi yazı tipi boyutunu destekler
Temanın renk ayarları, iki seçenek içeren bir renk paneli ve koyu moda sağlar:
Önceden belirlenmiş 10 renk paleti ile basit renk seçmenleri.
Karanlık modu etkinleştirmek/devre dışı bırakmak için onay kutusu.
Aşağıdaki resim, koyu gri bir metne sahip açık sarı bir arka planın rengini göstermektedir.
Site simgesi
Yirmi Yirmi Yazı Tipi Editör Boyutu aşağıdaki yazı tipi boyutunu destekler: Ekstra Küçük – 16
Küçük – 18
Normal/Orta – 20
Büyük – 24
Ekstra Büyük – 40
Büyük – 96
Dev – 144
Tema doyumu ile boyut fren ünitesinde düzenlenmiştir.
Yirmi Yirmi -One yedi yazı tipi boyutunu destekler
Temanın renk ayarları, iki seçenek içeren bir renk paneli ve koyu moda sağlar:
Önceden belirlenmiş 10 renk paleti ile basit renk seçmenleri.
Karanlık modu etkinleştirmek/devre dışı bırakmak için onay kutusu.
Aşağıdaki resim, koyu gri bir metne sahip açık sarı bir arka planın rengini göstermektedir.
Yirmi Yirmi -One’da Koyu Renk ve Mod Ayarları
Varsayılanın yeşil pastelin arka plan rengi (‘#d1e4dd’), ancak site yöneticisi aşağıdaki alternatif arka plan renkleri arasında kolayca geçiş yapabilir:
Siyah = ‘#000000’;
Koyu gri = ‘#28303d’;
Gri = ‘#39414D’;
Varsayılanın yeşil pastelin arka plan rengi (‘#d1e4dd’), ancak site yöneticisi aşağıdaki alternatif arka plan renkleri arasında kolayca geçiş yapabilir:
Siyah = ‘#000000’;
Koyu gri = ‘#28303d’;
Gri = ‘#39414D’;
Yeşil = ‘#d1e4dd’;
Mavi = ‘#d1dfe4’;
Mor = ‘#d1d1e4’;
Kırmızı = ‘#e4d1d1’;
Turuncu = ‘#e4dad1’;
Sarı = ‘#eeeadd’;
Beyaz = ‘#ffffff’;
Aynı renk, blok düzenleyici ayarlarında blok renk paleti olarak mevcuttur. Buna ek olarak, yirmi yirmi bir, bu özelliği destekleyen bloklar için bazı gradyan ön ayarlarını destekler. Aşağıdaki görüntü, sütun bloğu ayarlarındaki varsayılan gradyanı gösterir.
Blok renk ayarlarında sekiz gradyan prenti
Erişilebilirlik açısından, karanlık moda desteği varsayılan tema için mutlak yeni bir şeydir. Biraz daha derine dalalım! #Core-Themes Slack kanalıyla ilgili tartışmalardan sonra yirmi yirmi bir temada karanlık moda desteği olan Mel Choyce-Dwan, MacOS’ta Karanlık Modu etkinleştirme koyu modanın desteğini sunar.
Başlangıçta, bir tema özelliği olarak veya bir eklentide ayrı bir proje teslimatı olarak eklenirse, bu özelliğin yirmi yirmi bire nasıl uygulanabileceği belirsizdir. Aralarından seçim yapabileceğiniz beş olası seçenek vardır:
Site sahiplerinin karanlık moda desteğini devre dışı bırakmasına izin vermek ve site ziyaretçileri, siteyi görüntülerken karanlık modları etkinleştirir/devre dışı bırakır.
Site sahiplerinin sadece karanlık moda desteğini devre dışı bırakmasına izin vermek (site ziyaretçilerinin karanlık modları etkinleştirmesi/devre dışı bırakması için seçenek yoktur).
Mavi = ‘#d1dfe4’;
Mor = ‘#d1d1e4’;
Kırmızı = ‘#e4d1d1’;
Turuncu = ‘#e4dad1’;
Sarı = ‘#eeeadd’;
Beyaz = ‘#ffffff’;
Aynı renk, blok düzenleyici ayarlarında blok renk paleti olarak mevcuttur. Buna ek olarak, yirmi yirmi bir, bu özelliği destekleyen bloklar için bazı gradyan ön ayarlarını destekler. Aşağıdaki görüntü, sütun bloğu ayarlarındaki varsayılan gradyanı gösterir.
Blok renk ayarlarında sekiz gradyan prenti
Erişilebilirlik açısından, karanlık moda desteği varsayılan tema için mutlak yeni bir şeydir. Biraz daha derine dalalım! #Core-Themes Slack kanalıyla ilgili tartışmalardan sonra yirmi yirmi bir temada karanlık moda desteği olan Mel Choyce-Dwan, MacOS’ta Karanlık Modu etkinleştirme koyu modanın desteğini sunar.
Başlangıçta, bir tema özelliği olarak veya bir eklentide ayrı bir proje teslimatı olarak eklenirse, bu özelliğin yirmi yirmi bire nasıl uygulanabileceği belirsizdir. Aralarından seçim yapabileceğiniz beş olası seçenek vardır:
Site sahiplerinin karanlık moda desteğini devre dışı bırakmasına izin vermek ve site ziyaretçileri, siteyi görüntülerken karanlık modları etkinleştirir/devre dışı bırakır.
Site sahiplerinin sadece karanlık moda desteğini devre dışı bırakmasına izin vermek (site ziyaretçilerinin karanlık modları etkinleştirmesi/devre dışı bırakması için seçenek yoktur).
Site ziyaretçilerinin siteyi görüntülerken etkinleştirmelerine izin verirken karanlık modanın desteğini “her zaman aktif” olarak etkinleştirme.
Karanlık modanın desteğini “her zaman aktif” olarak etkinleştirmek ve site ziyaretçilerinin karanlık modu etkinleştirmesini/devre dışı bırakmasını önleyin.
Karanlık modanın desteğini “her zaman aktif” olarak etkinleştirmek ve site ziyaretçilerinin karanlık modu etkinleştirmesini/devre dışı bırakmasını önleyin.
Karanlık modu hiç desteklemiyor
Derin bir tartışmadan sonra, temaya karanlık mod eklenir. Şimdi:
Dark moda desteği, site sahipleri için bir katılım özelliği olarak mevcuttur.
Anahtar düğmesi düzenleyici arayüzünden silindi ve yalnızca ayarlamada kullanılabilir.
Karanlık Mod Anahtar düğmesi sağ alt köşede (RTL’de sol) bulunur ve site sanatçısı sayfadan aşağı kaydırdığında kaybolur.
Karanlık modu etkinleştirerek, site görüntüleyenler, kişisel tercihlerine ve işletim sistemi/tarayıcı ayarlarına bakılmaksızın bunları etkinleştirebilir/devre dışı bırakabilir.
Dark mod özelleştiricide etkinleştirilir ve karanlık mod erişilebilirlikte bir artış olarak kabul edilmesine rağmen ön alanda devre dışı bırakılır, site sayfalarınızın her bağlamda daha kolay erişilebilir olacağı açık değildir. En büyük endişeler karanlık logo ve şeffaf görüntülerle ilgilidir. Varsayılan parlak şablondan koyu bir arka plan rengine geçiş, web sitenizin kullanımını azaltabilecek ve hasar verebilecek okunabilirlik sorunlarına neden olabilir. Örneğin, okuyucunuz yanlarındaki karanlık modu etkinleştirirse, parlak arka plana sahip karanlık bir logo tamamen kaybolabilir. Benzer endişeler, görüntü ve sınır opaklığı, bölücü ve ayırıcı parlaklığı ve kontrastı ile ilgilidir. Bu nedenle, web siteniz için karanlık moda desteği sağlamayı planlıyorsanız, web sitenizin karanlık bir arka planla nasıl görüleceğini de düşünmelisiniz.
Kara mod özelleştirici üzerinde etkinleştirilir ve ön alanda etkinleştirilir
Tema katkısı bu sorunun farkındadır ve tartışma GitHub’da devam eder. Karanlık moda kullanımı ve tartışmaya dahil olma fırsatına daha yakından bakmak için GitHub’daki sorunların tam listesini kontrol edin. Koyu moda tercihleri yerel depoda saklanır ve bir tarayıcı geliştiricisinde görülebilir. Google Chrome’da Chrome WebTools’u başlatın ve Uygulama sekmesini tıklayın. Depolama bölümünü bulun ve yerel depolama menüsünü genişletin.
Yerel cesur tarayıcı deposunda koyu moda kullanıcı tercihleri
Dürüst olmak gerekirse, karanlık mod bugün web sitesi bağlamında yaygın değildir. Ancak, yeni WordPress varsayılan teması artık Dark Mode’u desteklediğinden, WordPress en yaygın kullanılan CMS yazılımı olduğundan bu özel erişilebilirlik alanında değişiklikler bekleyebiliriz. Teknik şeyleri keşfetmek isteyen geliştiriciler, bu web sitesinde karanlık modada derinlemesine yönergeleri kaçırmamalıdır. CSS Özel Tarzı ve Mülkiyet Bu nedenle, tema geliştiricileri için yirmi yirmi birin en ilginç özelliklerini keşfetme zamanı. CSS Özel Özellikleri ile başlayalım. Yukarıda belirtildiği gibi, yirmi yirmi bir, kenar çubuğu altbilgisi ve üç menü konumu ile tohumlara, iki sütunun temasına dayanmaktadır. Tohum düzenlemesi tamamen CSS Custom özelliğine dayanmaktadır ve bu, gelişmiş tema geliştiricilerinin ve kullanıcılarının otomatik temanın üzerinde çocuk temaları oluşturmasını kolaylaştırır. Aynı şey yirmi yirmi bir için de geçerlidir. Yeni varsayılan tema, tek bir sütun düzeni, altbilgi yan bıçakları ve iki menü konumu ile birlikte gelir. Styles sayfası, tohumlar tarafından sağlanan yuvalama özel mülkiyet sistemini yansıtır ve bu, bir çocuğun yüksek düzeyde ayarlanmış temaları ve web sitelerini inşa etmek için mükemmel yirmi yirmi bir tuval yapar. Özel CSS özelliği (CSS değişkeni olarak da bilinir), stil sayfanızda herhangi bir yerde yeniden kullanılabilen belirli değerler içeren özel bir varlıktır. Bu nedenle, belgenizdeki belirli renk aksanlarını değiştirmeniz gerekiyorsa, stil sayfası boyunca bu rengin görünümünü bulmak için küresel bir arama yapmanız gerekmez. Yalnızca blokta farklı özellik değerleri ayarlamanız gerekir.
Örneğin basit özelleştirme, özel arka plan rengini ayarlamak istediğinizi varsayalım. Bunun için bir çocuğun teması yapmanıza gerek yok. CSS Panel Kod Düzenleyicisine yalnızca iki CSS bildirimi girmeniz gerekir Ek :: Root {-Global-Color-Beige: #E6D7C1; } Gövde {arka plan-color: var (-Global-Color-Beige); } Css yirmi yirmi bir özelleştiricide özel
Derin bir tartışmadan sonra, temaya karanlık mod eklenir. Şimdi:
Dark moda desteği, site sahipleri için bir katılım özelliği olarak mevcuttur.
Anahtar düğmesi düzenleyici arayüzünden silindi ve yalnızca ayarlamada kullanılabilir.
Karanlık Mod Anahtar düğmesi sağ alt köşede (RTL’de sol) bulunur ve site sanatçısı sayfadan aşağı kaydırdığında kaybolur.
Karanlık modu etkinleştirerek, site görüntüleyenler, kişisel tercihlerine ve işletim sistemi/tarayıcı ayarlarına bakılmaksızın bunları etkinleştirebilir/devre dışı bırakabilir.
Dark mod özelleştiricide etkinleştirilir ve karanlık mod erişilebilirlikte bir artış olarak kabul edilmesine rağmen ön alanda devre dışı bırakılır, site sayfalarınızın her bağlamda daha kolay erişilebilir olacağı açık değildir. En büyük endişeler karanlık logo ve şeffaf görüntülerle ilgilidir. Varsayılan parlak şablondan koyu bir arka plan rengine geçiş, web sitenizin kullanımını azaltabilecek ve hasar verebilecek okunabilirlik sorunlarına neden olabilir. Örneğin, okuyucunuz yanlarındaki karanlık modu etkinleştirirse, parlak arka plana sahip karanlık bir logo tamamen kaybolabilir. Benzer endişeler, görüntü ve sınır opaklığı, bölücü ve ayırıcı parlaklığı ve kontrastı ile ilgilidir. Bu nedenle, web siteniz için karanlık moda desteği sağlamayı planlıyorsanız, web sitenizin karanlık bir arka planla nasıl görüleceğini de düşünmelisiniz.
Kara mod özelleştirici üzerinde etkinleştirilir ve ön alanda etkinleştirilir
Tema katkısı bu sorunun farkındadır ve tartışma GitHub’da devam eder. Karanlık moda kullanımı ve tartışmaya dahil olma fırsatına daha yakından bakmak için GitHub’daki sorunların tam listesini kontrol edin. Koyu moda tercihleri yerel depoda saklanır ve bir tarayıcı geliştiricisinde görülebilir. Google Chrome’da Chrome WebTools’u başlatın ve Uygulama sekmesini tıklayın. Depolama bölümünü bulun ve yerel depolama menüsünü genişletin.
Yerel cesur tarayıcı deposunda koyu moda kullanıcı tercihleri
Dürüst olmak gerekirse, karanlık mod bugün web sitesi bağlamında yaygın değildir. Ancak, yeni WordPress varsayılan teması artık Dark Mode’u desteklediğinden, WordPress en yaygın kullanılan CMS yazılımı olduğundan bu özel erişilebilirlik alanında değişiklikler bekleyebiliriz. Teknik şeyleri keşfetmek isteyen geliştiriciler, bu web sitesinde karanlık modada derinlemesine yönergeleri kaçırmamalıdır. CSS Özel Tarzı ve Mülkiyet Bu nedenle, tema geliştiricileri için yirmi yirmi birin en ilginç özelliklerini keşfetme zamanı. CSS Özel Özellikleri ile başlayalım. Yukarıda belirtildiği gibi, yirmi yirmi bir, kenar çubuğu altbilgisi ve üç menü konumu ile tohumlara, iki sütunun temasına dayanmaktadır. Tohum düzenlemesi tamamen CSS Custom özelliğine dayanmaktadır ve bu, gelişmiş tema geliştiricilerinin ve kullanıcılarının otomatik temanın üzerinde çocuk temaları oluşturmasını kolaylaştırır. Aynı şey yirmi yirmi bir için de geçerlidir. Yeni varsayılan tema, tek bir sütun düzeni, altbilgi yan bıçakları ve iki menü konumu ile birlikte gelir. Styles sayfası, tohumlar tarafından sağlanan yuvalama özel mülkiyet sistemini yansıtır ve bu, bir çocuğun yüksek düzeyde ayarlanmış temaları ve web sitelerini inşa etmek için mükemmel yirmi yirmi bir tuval yapar. Özel CSS özelliği (CSS değişkeni olarak da bilinir), stil sayfanızda herhangi bir yerde yeniden kullanılabilen belirli değerler içeren özel bir varlıktır. Bu nedenle, belgenizdeki belirli renk aksanlarını değiştirmeniz gerekiyorsa, stil sayfası boyunca bu rengin görünümünü bulmak için küresel bir arama yapmanız gerekmez. Yalnızca blokta farklı özellik değerleri ayarlamanız gerekir.
Örneğin basit özelleştirme, özel arka plan rengini ayarlamak istediğinizi varsayalım. Bunun için bir çocuğun teması yapmanıza gerek yok. CSS Panel Kod Düzenleyicisine yalnızca iki CSS bildirimi girmeniz gerekir Ek :: Root {-Global-Color-Beige: #E6D7C1; } Gövde {arka plan-color: var (-Global-Color-Beige); } Css yirmi yirmi bir özelleştiricide özel
CSS özel özelliğinin kullanımı güvenlidir, çünkü aşağıdaki resimde gösterildiği gibi tüm büyük tarayıcılar tarafından desteklenir miyim:
Bültenlere Kaydolun
Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun
Şimdi abone olun
Özel CSS özelliği çoğu modern web tarayıcısı tarafından desteklenmektedir
CSS Custom özelliğine daha derine dalmak istiyorsanız, bkz. MDN belgeleri. Yirmi -Twenty -Bir Desen Blok Yirmi Yirmi -One blok editörleri için birkaç desen sağlar. Önceki blog girişinde, blok desenini, kullanıcıların sayfalarına yuva için bir blok karmaşık yapısı eklemelerini sağlayan önceden belirlenmiş bir blok düzeni olarak tanımlıyoruz. WordPress 5.5 çeşitli blok desenleri ve daha fazlası WordPress 5.6 ile birlikte gelmelidir. Buna ek olarak, yirmi yirmi bir kişi kendi blok deseni ile birlikte gelir. Yirmi yirmi birde, blok deseni Inc/Block-Pattern.php dosyasında tanımlanır. Yirmi yirmi bir desen, tek H2 öğeleri içeren büyük metin desenleri gibi basit desenlerden üst üste binen görüntüler ve metin ve medya başlıkları gibi daha karmaşık desenlere kadar değişir.
CSS Custom özelliğine daha derine dalmak istiyorsanız, bkz. MDN belgeleri. Yirmi -Twenty -Bir Desen Blok Yirmi Yirmi -One blok editörleri için birkaç desen sağlar. Önceki blog girişinde, blok desenini, kullanıcıların sayfalarına yuva için bir blok karmaşık yapısı eklemelerini sağlayan önceden belirlenmiş bir blok düzeni olarak tanımlıyoruz. WordPress 5.5 çeşitli blok desenleri ve daha fazlası WordPress 5.6 ile birlikte gelmelidir. Buna ek olarak, yirmi yirmi bir kişi kendi blok deseni ile birlikte gelir. Yirmi yirmi birde, blok deseni Inc/Block-Pattern.php dosyasında tanımlanır. Yirmi yirmi bir desen, tek H2 öğeleri içeren büyük metin desenleri gibi basit desenlerden üst üste binen görüntüler ve metin ve medya başlıkları gibi daha karmaşık desenlere kadar değişir.
Blok Medya ve Metin Makalesi Başlığı Yirmi Yirmi Weasaat’ta Temalar aşağıdaki kalıpları sağlar:
Büyük metin
Büyük metin
Bağlantı alanı: Büyük metin ve ardından sosyal ağlar ve e -posta adresi bağlantıları.
Medya ve Metin Makalesi Başlık: Solda büyük resimler ve sağda başlık bulunan medya ve metin bloğu.Başlığı, Bölüm ve Paragraf Açıklaması izler.
Üst üste binen görüntüler: Üst üste binen sütun bloğunda üç resim.
İki resim sergileyin: Solda büyük görüntüler ve sağda çerçeveler bulunan medya ve metin blokları.
Üst üste binen görüntüler ve metin: İki resim ve metin açıklamaları ile örtüşen sütun blokları.
Medya ve Metin Makalesi Başlık: Solda büyük resimler ve sağda başlık bulunan medya ve metin bloğu.Başlığı, Bölüm ve Paragraf Açıklaması izler.
Üst üste binen görüntüler: Üst üste binen sütun bloğunda üç resim.
İki resim sergileyin: Solda büyük görüntüler ve sağda çerçeveler bulunan medya ve metin blokları.
Üst üste binen görüntüler ve metin: İki resim ve metin açıklamaları ile örtüşen sütun blokları.
Portföy listesi: Mini görüntülerle proje listesi.
İletişim bilgileri: İletişim bilgilerini ve sosyal medya bağlantılarını görüntüleyen 3 sütunla blok.
Yirmi yirmi bir blok deseninin üst üste binen görüntüleri
Pek çok blok modelinin mevcudiyeti kullanıcılar ve geliştiriciler için çok iyidir. Kullanıcıların yayınlarına ve sayfalarına hızlı ve kolay bir şekilde karmaşık kod blokları eklemelerine izin verilecek, geliştiriciler bu deseni kendilerini kodlarken oluşturmak için yararlı bir şablon olarak kullanabilirler. Yirmi yirmi bir deney yirmi yirmi -twenty -bir blok, yirmi yirmi bir temadan ayrı olarak blok tabanlı bir deneysel versiyondur. Amaç, tüm site düzenleme deneyinde neler olduğu hakkında herkesi paylaşmak ve güncellemektir ve herkese WordPress çekirdeğinin bir parçası haline gelmeden önce yeni FSE özelliklerine dalma fırsatı vermektir. Görünüşe göre bu deneysel sürümün WordPress 5.6 ile çekirdeğe birleştirildiğini görmeyeceğiz. Carolina Nymark’a göre, tema Gutenberg ve tam bir site düzenleme deneyinin etkinleştirilmesini gerektirecek. Bu çekirdeğin bir parçası olmayacak, ancak tamamlandıktan sonra tema dizininde mevcut olacak. Bu yazma zamanında, yirmi -yirmi bir blok Gutenberg eklentisini gerektirir. Hem temalar hem de eklentiler yüklendikten ve etkinleştirildikten sonra, Site Düzenleyici menü öğesi WordPress yönetici menünüzde görünür (Site Düzenleme Deneyinin tamamını etkinleştirmeniz gerekmez).
Şimdi, tam bir site düzenleme arabirimini açmak için yeni Site Düzenleyici menü öğesini tıklayın ve Block Düzenleyicisi’ni kullanarak sayfadaki tüm öğeleri düzenlemeye başlayın.
Tam site düzenleme yirmi yirmi blok
Burada teknik konulara dalmayacağız.Klasik temaların ve yapısal blok bazlı temaların farklı olduğunu söylemek yeterlidir.Aşağıdaki resim, yirmi yirmi bir blok klasörünün içeriğini göstermektedir: yirmi yirmi bir blok klasör
Deneysel-nheme.json ve blok testleri ve blok-testler-parçaları dosyalarını göreceksiniz. Geleneksel WordPress temaları ve blok tabanlı temalar arasındaki temel fark, blok tabanlı temaların tüm bloklardan oluşan bir şablon içermesidir. Örneğin, Kod Düzenleyicinizdeki Block-Tumplate-Parts/Header.html’yi açın. Aşağıdaki kodu göreceksiniz:
Pek çok blok modelinin mevcudiyeti kullanıcılar ve geliştiriciler için çok iyidir. Kullanıcıların yayınlarına ve sayfalarına hızlı ve kolay bir şekilde karmaşık kod blokları eklemelerine izin verilecek, geliştiriciler bu deseni kendilerini kodlarken oluşturmak için yararlı bir şablon olarak kullanabilirler. Yirmi yirmi bir deney yirmi yirmi -twenty -bir blok, yirmi yirmi bir temadan ayrı olarak blok tabanlı bir deneysel versiyondur. Amaç, tüm site düzenleme deneyinde neler olduğu hakkında herkesi paylaşmak ve güncellemektir ve herkese WordPress çekirdeğinin bir parçası haline gelmeden önce yeni FSE özelliklerine dalma fırsatı vermektir. Görünüşe göre bu deneysel sürümün WordPress 5.6 ile çekirdeğe birleştirildiğini görmeyeceğiz. Carolina Nymark’a göre, tema Gutenberg ve tam bir site düzenleme deneyinin etkinleştirilmesini gerektirecek. Bu çekirdeğin bir parçası olmayacak, ancak tamamlandıktan sonra tema dizininde mevcut olacak. Bu yazma zamanında, yirmi -yirmi bir blok Gutenberg eklentisini gerektirir. Hem temalar hem de eklentiler yüklendikten ve etkinleştirildikten sonra, Site Düzenleyici menü öğesi WordPress yönetici menünüzde görünür (Site Düzenleme Deneyinin tamamını etkinleştirmeniz gerekmez).
Şimdi, tam bir site düzenleme arabirimini açmak için yeni Site Düzenleyici menü öğesini tıklayın ve Block Düzenleyicisi’ni kullanarak sayfadaki tüm öğeleri düzenlemeye başlayın.
Tam site düzenleme yirmi yirmi blok
Burada teknik konulara dalmayacağız.Klasik temaların ve yapısal blok bazlı temaların farklı olduğunu söylemek yeterlidir.Aşağıdaki resim, yirmi yirmi bir blok klasörünün içeriğini göstermektedir: yirmi yirmi bir blok klasör
Deneysel-nheme.json ve blok testleri ve blok-testler-parçaları dosyalarını göreceksiniz. Geleneksel WordPress temaları ve blok tabanlı temalar arasındaki temel fark, blok tabanlı temaların tüm bloklardan oluşan bir şablon içermesidir. Örneğin, Kod Düzenleyicinizdeki Block-Tumplate-Parts/Header.html’yi açın. Aşağıdaki kodu göreceksiniz:
>
Gördüğünüz gibi, Classic Header.php şablon dosyası, birkaç blok içeren .html dosyası ile değiştirildi. GitHub’daki tema deney projesi sürecinde yirmi yirmi bir blok temasını alabilirsiniz. Bir tema geliştiricisiyseniz, resmi belgeler blok bazlı temalar hakkında bilmeniz gereken her şeyi sağlar. Tam site düzenleme deneyine katkıda bulunmak istiyorsanız, geri bildirimlerinizi buraya gönderin.
Yirmi -yirmi -bir blok deneysel temalardır ve üretimde kullanılmamalıdır! Performans ortamında onunla oynamak.
Yirmi Yirmi Bir Tema WordPress Varsayılan bir çocuk teması nasıl yapılır temalar geliştirmenin temellerini öğrenmek ve özel çocuk temaları oluşturarak başlamanıza yardımcı olmak için iyi bir başlangıç noktasıdır. Varsayılan tema, resmi WordPress kodlama standart yönergelerini takip eder ve web standartlarına uygun olarak. Kodlamayı öğrenmek için daha iyi bir yer var mı?
Müşteri siteniz için çok hızlı, güvenli ve dost canlısı bir geliştirici olan barındırmaya mı ihtiyacınız var? Kinsta, WordPress geliştiricileri dikkate alınarak ve birçok güçlü araç ve gösterge tabloları sağlayarak inşa edildi. Planımıza bakın
Çocuk teması, sayfanızın düzenini, işlevini ve yapısını ayarlamanızı sağlayan harika bir WordPress özelliğidir. Aşağıdaki örnekle, tema ayarının her yönüne dalacağız.
Çocuğunuzun WordPress Çocuk Teması oluşturma temasını hazırlamak 3 adımlı bir süreçtir: 1. WP-Concent/Temalarında yeni bir klasör için bir çocuk tema klasörü oluşturun ve istendiği gibi ad. Ancak bunun benzersiz bir isim olması gerektiğini unutmayın. Çocuğun Tema El Kitabı, ana tema ile aynı adı kullanmanızı önerir ve -çocukların sonunda eklenir. Böylece yeni klasörü yirmi twentyone-child adlandırabiliriz. 2. Dosya Style.css Oluşturma Şimdi çocuğunuzun tema dizinine taşıyın ve aşağıdaki kod içeren yeni style.css dosyaları oluşturun:/* Tema Adı: Yirmi Yirmi Bir Çocuk Tema Tema Uri: https://example.com Açıklama: A Yirmi yirmi bir çocuk teması. Yazar: Adınız Yazar URI: https://example.com/ Şablon: Twentytwentyone Sürüm: 1.0 Lisans: GNU Genel Lisans V2 veya daha sonra Lisans URI: https://www.gnu.org/licens/gpl-2.0. html */ başlık bilgileri, WordPress’in çocuğunuzun temasını doğru bir şekilde ele almasına izin verir. Ad teması: temalar için benzersiz ad.
Çocuğunuzun WordPress Çocuk Teması oluşturma temasını hazırlamak 3 adımlı bir süreçtir: 1. WP-Concent/Temalarında yeni bir klasör için bir çocuk tema klasörü oluşturun ve istendiği gibi ad. Ancak bunun benzersiz bir isim olması gerektiğini unutmayın. Çocuğun Tema El Kitabı, ana tema ile aynı adı kullanmanızı önerir ve -çocukların sonunda eklenir. Böylece yeni klasörü yirmi twentyone-child adlandırabiliriz. 2. Dosya Style.css Oluşturma Şimdi çocuğunuzun tema dizinine taşıyın ve aşağıdaki kod içeren yeni style.css dosyaları oluşturun:/* Tema Adı: Yirmi Yirmi Bir Çocuk Tema Tema Uri: https://example.com Açıklama: A Yirmi yirmi bir çocuk teması. Yazar: Adınız Yazar URI: https://example.com/ Şablon: Twentytwentyone Sürüm: 1.0 Lisans: GNU Genel Lisans V2 veya daha sonra Lisans URI: https://www.gnu.org/licens/gpl-2.0. html */ başlık bilgileri, WordPress’in çocuğunuzun temasını doğru bir şekilde ele almasına izin verir. Ad teması: temalar için benzersiz ad.
URI teması: Kullanıcıların tema için kodlar veya belgeler bulabileceği yerler.
Açıklama: Kullanıcıların tema işlevlerini anlamalarına yardımcı olacak tanımlayıcı metin.
Açıklama: Kullanıcıların tema işlevlerini anlamalarına yardımcı olacak tanımlayıcı metin.
Yazar: Adınız
URI Yazar: Yazarın web sitesi.
URI Yazar: Yazarın web sitesi.
Şablon: Klasör Üst temanın nerede saklanacağı. Temanın adını değil, klasörün adını kullanın. Bu satır olmadan, temanız bir çocuk teması olarak işlev görmez.
Sürüm: Sürüm Numarası
Lisans: GNU olması gereken lisans.
URI Lisansı: Lisanslarla ilgili bilgilere bağlantı.
Bu metnin altında, yakında göstereceğim gibi CSS bildirim bloğunuzu ekleyebilirsiniz.3. Yirmi yirmi bir ile bir function.php dosyası oluşturun, ayrıca bir function.php dosyasına da ihtiyacınız var.Bu nedenle, çocuk teması dizininde kendiniz oluşturun, kod düzenleyicinize açın ve aşağıdaki kodu ekleyin: get (‘sürüm’));} Add_action (‘wp_enqueue_scripts’, ‘yirmitwentyone_styles’);Stil sayfasını yüklemek için yirmi yirmi bir tema get_template_directory () kullandığından, wp_enqueue_scripts’in eylemlerini kullanarak wp_enqueue_scripts styles sayfası çocuk temalarına ihtiyacınız vardır.Bundan sonra, dosyanızı kaydedin, WordPress kontrol panelinizi açın, görünüşe göz atın ->
Temalar ve yirmi bir çocuk temanızı etkinleştirin. Şimdi özelleştirmemizi ekleyelim. Özel Stil Nasıl Eklenir WordPress web sitenizin düzenini ayarlamak için özel CSS kodunuzu eklemek için birkaç seçeneğiniz vardır. Küçük değişiklikler için ek CSS ayarlama panelleri yeterli olabilir. Ancak gelişmiş ayarlamalar yapmanız gerekiyorsa veya kodunuzu farklı bir WordPress web sitesine aktarmanız gerekiyorsa, çocuğun teması daha iyi bir seçim olacaktır. Basit bir ayarla deneyelim: Varsayılan yazı tipi yığınını değiştirin. Diyelim ki farklı bir yazı tipi yığını yüklemek veya en sevdiğiniz yazı tiplerini yirmi bir varsayılan yirmi bir yazı tipi ailesine eklemek isteyin. Bunu nasıl yapıyorsun? Burada size H1 başlığı için varsayılan yazı tipini nasıl değiştireceğinizi göstereceğim, ancak web sitenizdeki herhangi bir metin öğesi için yazı tipi ailesini değiştirebilirsiniz. İlk olarak, Style.css thenty yirmi bir dosyayı açın ve aşağıdaki CSS bloğunu bulun: H1, .h1, H2, .h2, H3, .h3, H4, .h4, H5, .H5, H6, .H6 {Clear : Her ikisi de; yazı tipi ailesi: var (-Heading-Font-Family); yazı tipi-weight: var (-Heading-Font-weight); } Gördüğünüz gibi, başlık için yazı tipi ailesi başlık-family’de düzenlenmiştir. Şimdi bloğu girin: root {} ve aşağıdaki bildirimi bulun: -Heading-Font-Family: var (-global-font-primary); -Heading- yazı tipi-ailesi, bloğun en üstünde tanımlanan global-değerli yazı tipi-primerine bağlıdır :: root {} :: root { / * font ailesi * / -global-font-primary: var (var ( -Font-Headings, -Aple-System, BlinkmacsytemFont, “Sego UI”, Roboto, Oksijen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif);
…} Şimdi neyi değiştireceğimizi biliyoruz! Salin-Global-Bildiri Yazı Tipi Ana Stil Sayfası’ndan ve çocuğunuzun stiline yapıştırın. Ardından, aşağıda gösterildiği gibi özelliğin adını ve değerini değiştirin :: root { / * font ailesi * / -global-font-primary-child: var (-font-başlıklar, ubuntu, -ple-system, blinkmacsemfont, “segoe Ui “, roboto, oksijen-sanslar, Cantarell,” Helvetica Neue “, sans-serif); -Global-Font-Family-Child: var (-Global-Font-Crimary-Child); } Özel yazı tipi yığınınızı bildirdikten sonra, stil sayfanızda istediğiniz yerde kullanabilirsiniz. H1 başlığı örneğimizde: H1, .H1 {font-ailesi: var (-global-font-familya-çocuk); } Çocuk stilini kaydedin.css ve sayfayı yeniden yükleyin. Ubuntu’yu sayfa başlığınız için yeni bir varsayılan yazı tipi ailesi olarak göreceksiniz. Varsayılan Font Family Vs. Yirmi Yirmi Birde Özel Yazı Tipi Ailesi
Artık yirmi yirmi bir stili çocuk temasıyla nasıl ayarlayacağınızı bildikten sonra, daha sofistike özellikleri keşfedebiliriz. Yeni Bir Blok Deseni Nasıl Eklenir Bu örnekte, solda yuvarlak görüntüler, H4 başlığı ve sağdaki paragraflar içeren iki sütun bloğu da dahil olmak üzere özel bir blok deseni oluşturacağız. Deseninizi doğrudan blok düzenleyiciye oluşturabilir veya kodu mevcut blok deseninden ayarlayabilirsiniz. Deseninizi blok düzenleyiciye oluşturmayı seçerseniz, yalnızca gönderme veya sayfa taslağına gerekli bloğu eklemeniz, ardından uygun kod düzenleyicisine geçmeniz ve kodu kopyalamanız gerekir.
Kod Düzenleyicisi’nde iki sütunu engelleyin
Artık desenimizi function.php dosyasına çocuk temasına kaydedebiliriz. -Child ‘))); register_block_patern (‘ yirmitwentyone-child/custom-bio-desen ‘, dizi (‘ başlık ‘=> __ (‘ yazar bio ‘,’ yirmitwentyone-child ‘),’ açıklama ‘=> _x (‘ Avatar görüntüsü, bir başlık ve paragraf görüntüleyen 2 sütuna sahip bir blok. ‘,’ Blok Desen Tanımı ‘,’ Twentytwentyone-Child ‘),’ İçerik ‘=>’
Sürüm: Sürüm Numarası
Lisans: GNU olması gereken lisans.
URI Lisansı: Lisanslarla ilgili bilgilere bağlantı.
Bu metnin altında, yakında göstereceğim gibi CSS bildirim bloğunuzu ekleyebilirsiniz.3. Yirmi yirmi bir ile bir function.php dosyası oluşturun, ayrıca bir function.php dosyasına da ihtiyacınız var.Bu nedenle, çocuk teması dizininde kendiniz oluşturun, kod düzenleyicinize açın ve aşağıdaki kodu ekleyin: get (‘sürüm’));} Add_action (‘wp_enqueue_scripts’, ‘yirmitwentyone_styles’);Stil sayfasını yüklemek için yirmi yirmi bir tema get_template_directory () kullandığından, wp_enqueue_scripts’in eylemlerini kullanarak wp_enqueue_scripts styles sayfası çocuk temalarına ihtiyacınız vardır.Bundan sonra, dosyanızı kaydedin, WordPress kontrol panelinizi açın, görünüşe göz atın ->
Temalar ve yirmi bir çocuk temanızı etkinleştirin. Şimdi özelleştirmemizi ekleyelim. Özel Stil Nasıl Eklenir WordPress web sitenizin düzenini ayarlamak için özel CSS kodunuzu eklemek için birkaç seçeneğiniz vardır. Küçük değişiklikler için ek CSS ayarlama panelleri yeterli olabilir. Ancak gelişmiş ayarlamalar yapmanız gerekiyorsa veya kodunuzu farklı bir WordPress web sitesine aktarmanız gerekiyorsa, çocuğun teması daha iyi bir seçim olacaktır. Basit bir ayarla deneyelim: Varsayılan yazı tipi yığınını değiştirin. Diyelim ki farklı bir yazı tipi yığını yüklemek veya en sevdiğiniz yazı tiplerini yirmi bir varsayılan yirmi bir yazı tipi ailesine eklemek isteyin. Bunu nasıl yapıyorsun? Burada size H1 başlığı için varsayılan yazı tipini nasıl değiştireceğinizi göstereceğim, ancak web sitenizdeki herhangi bir metin öğesi için yazı tipi ailesini değiştirebilirsiniz. İlk olarak, Style.css thenty yirmi bir dosyayı açın ve aşağıdaki CSS bloğunu bulun: H1, .h1, H2, .h2, H3, .h3, H4, .h4, H5, .H5, H6, .H6 {Clear : Her ikisi de; yazı tipi ailesi: var (-Heading-Font-Family); yazı tipi-weight: var (-Heading-Font-weight); } Gördüğünüz gibi, başlık için yazı tipi ailesi başlık-family’de düzenlenmiştir. Şimdi bloğu girin: root {} ve aşağıdaki bildirimi bulun: -Heading-Font-Family: var (-global-font-primary); -Heading- yazı tipi-ailesi, bloğun en üstünde tanımlanan global-değerli yazı tipi-primerine bağlıdır :: root {} :: root { / * font ailesi * / -global-font-primary: var (var ( -Font-Headings, -Aple-System, BlinkmacsytemFont, “Sego UI”, Roboto, Oksijen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif);
…} Şimdi neyi değiştireceğimizi biliyoruz! Salin-Global-Bildiri Yazı Tipi Ana Stil Sayfası’ndan ve çocuğunuzun stiline yapıştırın. Ardından, aşağıda gösterildiği gibi özelliğin adını ve değerini değiştirin :: root { / * font ailesi * / -global-font-primary-child: var (-font-başlıklar, ubuntu, -ple-system, blinkmacsemfont, “segoe Ui “, roboto, oksijen-sanslar, Cantarell,” Helvetica Neue “, sans-serif); -Global-Font-Family-Child: var (-Global-Font-Crimary-Child); } Özel yazı tipi yığınınızı bildirdikten sonra, stil sayfanızda istediğiniz yerde kullanabilirsiniz. H1 başlığı örneğimizde: H1, .H1 {font-ailesi: var (-global-font-familya-çocuk); } Çocuk stilini kaydedin.css ve sayfayı yeniden yükleyin. Ubuntu’yu sayfa başlığınız için yeni bir varsayılan yazı tipi ailesi olarak göreceksiniz. Varsayılan Font Family Vs. Yirmi Yirmi Birde Özel Yazı Tipi Ailesi
Artık yirmi yirmi bir stili çocuk temasıyla nasıl ayarlayacağınızı bildikten sonra, daha sofistike özellikleri keşfedebiliriz. Yeni Bir Blok Deseni Nasıl Eklenir Bu örnekte, solda yuvarlak görüntüler, H4 başlığı ve sağdaki paragraflar içeren iki sütun bloğu da dahil olmak üzere özel bir blok deseni oluşturacağız. Deseninizi doğrudan blok düzenleyiciye oluşturabilir veya kodu mevcut blok deseninden ayarlayabilirsiniz. Deseninizi blok düzenleyiciye oluşturmayı seçerseniz, yalnızca gönderme veya sayfa taslağına gerekli bloğu eklemeniz, ardından uygun kod düzenleyicisine geçmeniz ve kodu kopyalamanız gerekir.
Kod Düzenleyicisi’nde iki sütunu engelleyin
Artık desenimizi function.php dosyasına çocuk temasına kaydedebiliriz. -Child ‘))); register_block_patern (‘ yirmitwentyone-child/custom-bio-desen ‘, dizi (‘ başlık ‘=> __ (‘ yazar bio ‘,’ yirmitwentyone-child ‘),’ açıklama ‘=> _x (‘ Avatar görüntüsü, bir başlık ve paragraf görüntüleyen 2 sütuna sahip bir blok. ‘,’ Blok Desen Tanımı ‘,’ Twentytwentyone-Child ‘),’ İçerik ‘=>’
Kinsta hakkında
Kinsta 2013 yılında statükoyu değiştirme arzusuyla kuruldu.Dünyanın en iyi WordPress barındırma platformunu oluşturmak için yola çıktık ve bu bizim sözümüz.Yerleşmiyoruz ve burada kalmak için buradayız. (‘özel desenler’),);});Yukarıdaki kod, özel desen kategorisini ve yazarın biyo desenini kaydetti.Bir IMG öğesi oluşturmak için kullandığımız koda dikkat edin: <div class = "'. Esc_url (get_stylesheet_directory_uri (). URI dizin () çocuk temaları sağlar (Önceki Görüntüler Çocukların Tema Varlık Klasörüne eklenmiştir).Değişikliklerinizi kaydedin ve yeni bir gönderi veya sayfa yapın.Şimdi bloğun eklenmesinde yeni bir desen bulmalısınız. Yirmi yirmi bire özel blok deseni eklenir
Şablon dosyasını ayarlayın Belirli bir arşiv veya bir yazı/sayfa için yeni bir şablon dosyası oluşturmak istiyorsanız, WordPress şablonu hiyerarşisine göre yeni bir .php şablonu oluşturmanız gerekir. Ancak yalnızca mevcut şablonu (veya şablon bölümünü) düzenlemek istiyorsanız, orijinal şablonu yalnızca ana temadan kopyalamanız ve çocuğunuzun temasına göre konuma eklemeniz gerekir (tam bu konu hakkında daha fazla bilgi edinin. çocuk teması için rehber). "WordPress tarafından gururla güçlendirilmiş" metnini ayarlamak istediğinizi varsayalım. Hattı silmek veya ayarlamak için birkaç seçeneğiniz var. Örneğimiz için manuel olarak değiştirelim. Bunu yapmak için, footer.php şablon dosyasını üst klasörden kopyalayın ve çocuk temanızın köküne yapıştırın. Bittiğinde, alt footer.php çocuk temanız kod düzenleyicinizde bulun ve aşağıdaki kodu bulun:
Şimdi değişikliklerinizi yapabilirsiniz. Web ana bilgisayarınıza kredi vermek istediğinizi söyleyin, sadece aşağıda gösterildiği gibi A öğesini değiştirin:
<? PHP printf (ESC_HTML __ ('Gururla %s tarafından güçlendirilir.', 'Twentytwentyone') , ' kinsta ‘); ?>
<!-
