WordPress 6.0'da Blok Tema Kalıpları Nasıl Oluşturulur

Blok desenleriolarak da anılır, bölümler, tanıtıldı WordPress 5.5 kullanıcıların önceden tanımlanmış blok düzenleri oluşturmasına ve paylaşmasına izin vermek için desen dizini. Dizin, WordPress topluluğu tarafından tasarlanan çok çeşitli küratörlü desenlerin evidir. Bu modeller basit kopyala ve yapıştır biçiminde mevcuttur, kodlama bilgisi gerektirmez ve bu nedenle kullanıcılar için büyük bir zaman tasarrufu sağlar.

Kalıplarla ilgili birçok makaleye rağmen, en son geliştirilmiş özellikleri kapsayan kalıp oluşturma hakkında kapsamlı ve güncel makaleler bulunmamaktadır. Bu makale, kayıt olmadan kalıp oluşturma gibi en son geliştirilmiş özelliklere odaklanarak boşluğu doldurmayı ve yeni başlayanlar ve deneyimli yazarlar için bunları blok temalarda oluşturmak ve kullanmak için adım adım güncel bir kılavuz sunmayı amaçlamaktadır.

Lansmanından bu yana WordPress 5.9 ve yirmi yirmi iki (TT2) varsayılan teması, blok temalarında blok kalıplarının kullanımı çoğaldı. büyük bir hayranı oldum blok desenleri ve bunları blok temalarımda oluşturup kullandım.

Yeni WordPress 6.0 babalar gününe özelleştirilmiş ve kişilleştirilmiş üç ana model, yazarlara yönelik geliştirmeler içerir:

• aracılığıyla desen kaydına izin verilmesi /patterns klasör (benzer /parts, /templates, ve /styles kayıt).
• Genel kalıplar dizininden kalıpların kaydedilmesi theme.json.
• Yeni bir sayfa oluştururken kullanıcıya sunulabilecek kalıpları eklemek.

Bir girişte WordPress 6.0 videosunu keşfetme, Otomatik ürün irtibatı Ann McCathy, yeni geliştirilmiş bazı kalıp özelliklerini vurguluyor (15:00'den itibaren) ve gelecekteki kalıp geliştirme planlarını tartışıyor - aşağıdakileri içerir: kesit elemanları olarak desenlerseçenekler sunarak, sayfa oluşturmada desen seç, kalıp dizini aramasını entegre etme ve daha fazlası.

Önkoşullar

Makale, okuyucuların WordPress tam site düzenleme (FSE) arayüzü ve blok temaları hakkında temel bilgilere sahip olduğunu varsayar. bu Blok Düzenleyici El Kitabı ve Tam Site Düzenleme web sitesi, bu makalede tartışılan blok temaları ve kalıpları dahil olmak üzere tüm FSE özelliklerini öğrenmek için en güncel eğitim kılavuzlarını sağlar.

Bölüm 1: Blok kalıpları oluşturmaya yönelik gelişen yaklaşımlar

Blok kalıpları oluşturmaya yönelik ilk yaklaşım, blok kalıbı API'sinin özel bir eklenti olarak veya doğrudan functions.php bir blok temasıyla paketlenecek dosya. Yeni piyasaya sürülen WordPress 6.0, bir şablon aracılığıyla kalıp kaydı da dahil olmak üzere, kalıplar ve temalarla çalışan birkaç yeni ve gelişmiş özellik sundu. /patterns klasör ve bir sayfa oluşturma kalıbı modeli.

Arka plan için, öncelikle kalıp kaydı iş akışının kayıt kalıbı API'sini kullanmaktan kayıt olmadan doğrudan yüklemeye nasıl evrildiğini kısaca gözden geçirelim.

Örnek 1'i kullanın: Yirmi Yirmi Bir

Varsayılan Yirmi Yirmi Bir tema (TT1) ve TT1 Blokları teması (TT1'in bir kardeşi) blok desenlerinin temaya nasıl kaydedilebileceğini gösterir. functions.php. TT1 Blokları deneysel temasında, bu tek blok-pattern.php içeren dosya sekiz blok desenleri eklendi functions.php bir olarak include burada gösterildiği gibi.

Özel bir blok deseni kayıtlı olması gerekiyor ile register_block_pattern iki argüman alan işlev - title (desenlerin adı) ve properties (desenin özelliklerini açıklayan bir dizi).

Burada basit bir "Merhaba Dünya" paragraf kalıbı kaydetme örneği verilmiştir. Tema Şekillendirici makalesi:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

Kayıttan sonra, register_block_pattern() işlev, bağlı bir işleyiciden çağrılmalıdır. init açıklandığı gibi kanca okuyun.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Blok desenleri kaydedildikten sonra blok düzenleyicide görünürler. Daha ayrıntılı belgeler bu Blok Desen Kaydı.

Blok desen özellikleri

gerekli ek olarak title ve content özellikleri, blok düzenleyici el kitabı aşağıdaki isteğe bağlı listeler desen özellikleri:

• title (gereklidir): Desen için insan tarafından okunabilen bir başlık.
• content (gereklidir): Kalıp için HTML İşaretlemesini Engelle.
• description (opsiyonel): Yerleştiricideki deseni açıklamak için kullanılan görsel olarak gizli bir metin. Açıklama isteğe bağlıdır, ancak başlık kalıbın ne yaptığını tam olarak açıklamadığında şiddetle tavsiye edilir. Açıklama, kullanıcıların arama yaparken kalıbı keşfetmelerine yardımcı olacaktır.
• categories (opsiyonel): Blok modellerini gruplamak için kullanılan bir dizi kayıtlı desen kategorisi. Blok desenleri birden fazla kategoride gösterilebilir. Bir kategorinin burada kullanılabilmesi için ayrı olarak kaydedilmesi gerekir.
• keywords (opsiyonel): Kullanıcıların arama yaparken kalıbı keşfetmesine yardımcı olan bir dizi takma ad veya anahtar sözcük.
• viewportWidth (opsiyonel): Yerleştiricide desenin ölçeklenmiş bir önizlemesine izin vermek için desenin amaçlanan genişliğini belirten bir tamsayı.
• blockTypes (opsiyonel): Modelin birlikte kullanılması amaçlanan bir dizi blok türü. Her değerin, beyan edilen bloğun değeri olması gerekir. name.
• inserter (opsiyonel): Varsayılan olarak, tüm desenler yerleştiricide görünecektir. Bir deseni yalnızca programlı olarak eklenebilecek şekilde gizlemek için inserter için false.

Aşağıdaki, alıntı kalıbı eklenti kod parçacıklarının bir örneğidir. WordPress blogu.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Bir şablon dosyasında kalıpları kullanma

Kalıplar oluşturulduktan sonra, aşağıdaki blok işaretlemesi ile bir tema şablon dosyasında kullanılabilirler:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

'Den bir örnek bu GitHub deposu “kullanımını gösterir.footer-with-background"ile desen sümüklü böcek"tt2gopherTT2 Gopher blokları temasında ” öneki.

Blok temaları ve Gutenberg eklentisini ilk benimseyenler, klasik temalardaki kalıplardan da yararlandı. Varsayılan Yirmi yirmi ve en sevdiğim Eksell temaları (bir demo sitesi burada) klasik temalara desen özelliklerinin nasıl eklenebileceğini gösteren iyi örneklerdir.

Örnek 2'yi kullanın: Yirmi Yirmi İki

Bir tema yalnızca birkaç desen içeriyorsa, geliştirme ve bakım oldukça yönetilebilir. Ancak, bir blok teması, TT2 temasındaki gibi birçok kalıp içeriyorsa, o zaman pattern.php dosya çok büyük ve okunması zor hale geliyor. Bir araya getiren varsayılan TT2 teması 60'ten fazla desen, yeniden düzenlenmiş bir kalıp kaydı iş akışını gösterir yapı okuması ve bakımı daha kolaydır.

TT2 temasından örnekler alarak bu basitleştirilmiş iş akışının nasıl çalıştığını kısaca tartışalım.

2.1: Kalıp Kategorilerini Kaydetme

Gösteri amacıyla, bir TT2 alt teması oluşturdum ve onu yerel test sitemde bazı yapay içerikle kurdum. TT2'den sonra kayıt oldum footer-with-background ve aşağıdaki kalıp kategorileri dizi listesine eklendi block-patterns.php dosyası.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

Bu kod örneğinde, listelenen her desen $block_patterns = array() tarafından çağrıldı foreach() hangi işlev requiresa patterns Bir sonraki adımda ekleyeceğimiz dizide listelenen kalıp adına sahip dizin dosyası.

2.2: Bir desen dosyası ekleme /inc/patterns dosya

Ardından, listelenen tüm desen dosyalarına sahip olmalıyız. $block_patterns = array(). İşte kalıp dosyalarından birine bir örnek, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

içindeki kalıba referans verelim footer.html şablon parçası:

<!-- wp:template-part {"slug":"footer"} /-->

Bu, bir şablon dosyasına başlık veya alt bilgi bölümleri eklemeye benzer.

Desenler benzer şekilde eklenebilir parts/footer.html başvurmak için değiştirerek şablon slug temanın desen dosyasının (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Şimdi, blok düzenleyicinin kalıp yerleştiricisini ziyaret edersek, Footer with background kullanımımız için mevcut olmalıdır:

Aşağıdaki ekran görüntüsü, ön uçta arka plan deseni ile yeni oluşturulan alt bilgiyi göstermektedir.

Kalıplar artık blok temasının ayrılmaz bir parçası haline geldiğinden, birçok kalıp blok temalarında bir araya getirilmiştir. Kare, fide, Mayland, Zoolog, Jeolog — yukarıda tartışılan iş akışını izleyerek. İşte Quadrat temasına bir örnek /inc/patterns bir klasörle blok-kalıp kaydı dosya ve dosya listesi içerik kaynağı ve gerekli kalıp başlığı ile içinde return array() işlev.

Bölüm 2: Kayıt olmadan kalıp oluşturma ve yükleme

Lütfen bu özelliğin sitenize WordPress 6.0 veya Gutenberg eklentisi 13.0 veya üzerinin yüklenmesini gerektirdiğini unutmayın.

Bu yeni WordPress 6.0 özelliği standart dosya ve klasörler aracılığıyla desen kaydına izin verir – /patternsgibi benzer sözleşmeler getirerek /parts, /templates, ve /styles.

İşlem, ayrıca tarif edildiği gibi bu WP Tavernası makale, aşağıdaki üç adımı içerir:

• temanın kökünde bir desen klasörü oluşturma
• eklenti stili desen başlığı ekleme
• desen kaynak içeriği

Makaleden alınan tipik bir kalıp başlığı işaretlemesi aşağıda gösterilmiştir:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Önceki bölümde açıklandığı gibi, yalnızca Title ve Slug alanlar zorunludur ve diğer alanlar isteğe bağlıdır.

Yakın zamanda yayınlanan temalardan örneklere atıfta bulunarak, kalıp kaydını yeniden düzenledim. bu TT2 Gopher Blokları için hazırlanan demo teması CSS-Tricks hakkında önceki bir makale.

Aşağıdaki adımlarda, nasıl bir footer-with-background.php model PHP'ye kayıtlı ve kullanılan bir footer.html şablon yeniden düzenlendi.

2.1: Bir /patterns temanın kökündeki klasör

İlk adım, bir /patterns TT2 Gopher temasının kökündeki klasörü ve footer-with-background.php desen dosyası /patterns klasör ve refactor.

2.2: Dosya başlığına desen verisi ekleyin

Ardından, aşağıdaki kalıp başlığı kayıt alanlarını oluşturun.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Bir kalıp dosyası, PHP yorumları olarak yazılmış bir üst başlık alanına sahiptir. tarafından takip edildi blok içerik HTML formatında yazılmıştır.

2.3: Dosyaya Desen İçeriği Ekle

İçerik bölümü için, içindeki kod parçacıklarını kopyalayalım. tek tırnak (Örneğin, '...') içindekiler bölümünden footer-with-background ve değiştirin <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

Tüm kod parçacığının patterns/footer-with-background.php dosya görüntülenebilir burada GitHub'da.

Unutmayın ki /inc/patterns ve block-patterns.php vardır özüt, WordPress 6.0'da gerekli değildir ve yalnızca tanıtım amacıyla dahil edilmiştir.

2.4: Şablondaki desen bilgisine referans verme

Yukarıdaki refactored ekleme footer-with-background.php desen footer.html şablon, önceki bölümde açıklananla tamamen aynıdır (Bölüm 1, 2.2).

Şimdi, sitenin altbilgi bölümünü bir blok düzenleyicide veya sitemizin ön ucunu bir tarayıcıda görüntülersek, altbilgi bölümü görüntülenir.

Desen kategorileri ve türleri Kayıt (isteğe bağlı)

Blok kalıpları kategorize etmek için, kalıp kategorileri ve türleri temanın içinde kaydedilmelidir. functions.php dosyası.

Bir örnek düşünelim blok desen kategorilerini kaydetme TT2 Gopher temasından.

Kayıttan sonra, desenler, ana varsayılan desenlerle birlikte desen yerleştiricide görüntülenir. Kalıp ekleyiciye temaya özel kategori etiketleri eklemek için, tema ad alanı ekleyerek önceki parçacıkları değiştirmeliyiz:

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

The footer-with-background desen, önizlemesiyle eklenen desenlerde görünür (seçiliyse):

Bu süreç, blok temalarında blok desenleri oluşturmayı ve görüntülemeyi büyük ölçüde basitleştirir. Gutenberg eklentisini kullanmadan WordPress 6.0'da mevcuttur.

Kalıp kaydı olmayan tema örnekleri

Erken benimseyenler bu özelliği blok temalarında kullanmaya başladı bile. adresinden erişilebilen temalardan birkaç örnek tema dizini, kayıt olmadan bu yük kalıpları aşağıda listelenmiştir:

• arkeo – 12 desen
• Kolye – 13 desen
• uzak – 11 desen
• Skatepark – 10 desen
• Stewart – 17 desen
• Kitap – 16 desen
• Yenilikçi – 14 desen

Bölüm 3: Düşük kodlu kalıplar oluşturma ve kullanma

The resmi desenler dizini içerik oluşturmak için istenildiği gibi kopyalanabilen ve özelleştirilebilen topluluk katkılı yaratıcı tasarımlar içerir. Blok düzenleyici ile kalıp kullanmak hiç bu kadar kolay olmamıştı!

Sürekli büyüyen dizinden herhangi bir kalıp, temaları engellemek için sadece basit "kopyala ve yapıştır" ile eklenebilir veya theme.json dizinine başvurarak dosya desen sümüklü böcek. Ardından, bunun çok sınırlı kodlama ile ne kadar kolay başarılabileceğine kısaca değineceğim.

Kalıplar dizininden kalıp ekleme ve özelleştirme

3.1: Deseni dizinden bir sayfaya kopyalayın

İşte, kullanıyorum bu altbilgi bölümü deseni desenler dizininden FirstWebGeek tarafından. "Modeli Kopyala" düğmesini seçerek deseni kopyaladı ve doğrudan yeni bir sayfaya yapıştırdı.

3.2: İstenilen özelleştirmeyi yapıns

Yazı tiplerinin renginde ve düğme arka planında yalnızca birkaç değişiklik yaptım. Ardından kodun tamamını kod düzenleyici bir panoya.

Kod düzenleyiciyi kullanmayı bilmiyorsanız, seçeneklere gidin (sağ üstte üç nokta), Kod düzenleyici düğmesini tıklayın ve kodun tamamını buradan kopyalayın.

3.3: /patterns klasöründe yeni bir dosya oluşturun

İlk önce yeni bir tane oluşturalım /patterns/footer-pattern-test.php dosya ve gerekli kalıp başlığı bölümünü ekleyin. Ardından tüm kodu yapıştırın (yukarıdaki 3. adım). Altbilgi alanında kalıp kategorize edilir (satırlar: 5), kalıp ekleyicide yeni eklenenleri görebiliriz.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Yerleştiricideki yeni kalıbı görüntüleyin

Yeni eklenenleri görmek için Footer pattern from patterns library desen, herhangi bir gönderiye veya sayfaya gidin ve yerleştirici simgesini (mavi artı sembol, sol üst) seçin ve ardından “TT2 Gopher – Altbilgi” kategorilerini seçin. Yeni eklenen desen, diğer altbilgi desenleri ve sağda önizlemesi (seçiliyse) ile birlikte sol panelde gösterilir:

Kalıpları doğrudan kaydetme theme.json dosya

WordPress 6.0'da, desen dizininden istenen herhangi bir deseni şu şekilde kaydetmek mümkündür: theme.json aşağıdaki sözdizimine sahip dosya. bu 6.0 geliştirici notu durumları, “desenler alanı bir dizidir [desen sümüklü böcekleri] Desen Dizininden. Kalıp bilgileri, Kalıp Dizininde tek kalıp görünümünde [URL] tarafından çıkarılabilir.

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

Bu kısa WordPress 6.0 özellikleri video kalıpların nasıl kaydedildiğini gösterir. /patterns klasörü (3:53'te) ve desen yöneticisinden istenen desenleri bir theme.json dosya (3:13'te).

Ardından, kayıtlı kalıp, kalıp ekleyici arama kutusunda bulunur ve bu, temayla paketlenmiş kalıp kitaplığı gibi kullanıma hazırdır.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

Bu örnekte, desen bilgisi footer-section-design-with-3-column-description-social-media-contact-and-newsletter itibaren önceki örnek aracılığıyla kayıtlıdır theme.json.

Sayfa oluşturma deseni modeli

Bir parçası olarak "desenlerle bina” girişimleri, WordPress 6.0 bir model mod seçeneği sunar tema yazarlarına blok temasına sayfa düzeni kalıpları eklemek için site kullanıcılarının bir sayfa oluştururken sayfa düzeni kalıplarını (örneğin, hakkında sayfası, iletişim sayfası, ekip sayfası vb.) seçmelerine olanak tanır. Aşağıdakilerden alınan bir örnek geliştirici notu:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Bu özellik şu anda Sayfa Gönderi Türü ile sınırlı yalnızca "Mesaj Gönderi Türü" için değil, henüz.

The sayfa oluşturma kalıbı modeli tüm kalıpların içerik sonrası blok türü kaldırılarak da tamamen devre dışı bırakılabilir. Örnek bir kod burada mevcuttur.

Aşağıdaki kaynak bölümünde listelenen bağlantılardan GitHub'ın tartışmasını takip edebilir ve katılabilirsiniz.

Sayfa oluşturmak için desen dizinini kullanma

Dizindeki kalıplar, sayfa oluşturuculara benzer şekilde, istenen gönderi veya sayfa düzenini oluşturmak için de kullanılabilir. bu GutenbergHub ekip oluşturdu deneysel bir çevrimiçi sayfa oluşturucu uygulaması kalıpları doğrudan dizinden kullanma (tanıtım videosu). Ardından, uygulamadaki kodlar kopyalanıp bir siteye yapıştırılabilir, bu da karmaşık sayfa düzeni sürecini kodlamadan büyük ölçüde basitleştirir.

In bu kısa video, Jamie Marsland (1:30'da) uygulamanın, dizinin istenen sayfa bölümlerini kullanarak sayfa oluşturucuya benzer tam bir sayfa düzeni oluşturmak için nasıl kullanılabileceğini gösteriyor.

Tamamlayan

Kalıplar, kullanıcıların yaygın olarak kullandıkları içerik düzenini (ör. kahraman sayfası, çağrı vb.) herhangi bir sayfada yeniden oluşturmalarına ve daha önce kodlama becerileri olmadan mümkün olmayan stillerde içerik sunmanın önündeki engelleri azaltmalarına olanak tanır. Tıpkı eklentileri ve temalar dizinler, yeni desen dizin, kullanıcılara kalıp dizininden seçtikleri çok çeşitli kalıpları kullanma ve içeriği stilde yazma ve görüntüleme seçenekleri sunar.

Aslında, blok kalıpları her şeyi değiştirecek ve kesinlikle bu bir oyun değiştirici WordPress tema manzarasındaki özellik. tam potansiyeli ne zaman desenlerle bina çaba kullanılabilir hale geldiğinde, bu, blok temaları tasarlama ve düşük kod bilgisiyle bile güzel içerik oluşturma şeklimizi değiştirecek. Birçok yaratıcı tasarımcı için desenler dizini, tasarımlarını sergilemek için uygun bir yol da sağlayabilir. yaratıcılık.

---

Kaynaklar

WordPress 6.0

• WordPress 6.0 Alan Kılavuzu (WordPress Çekirdeği)
• WordPress 6.0'ı Keşfetmek: Stil Varyasyonları, Blok Kilitleme Kullanıcı Arayüzü, Yazma İyileştirmeleri – 22 dakikalık video (Anne McCarthy)
• 6.0 dakikada WordPress 4 özellikleri (Dave Smith)
• WordPress 6.0'daki Yenilikler: Yeni Bloklar, Stil Değiştirme, Şablon Düzenleme, Webfonts API ve Çok Daha Fazlası (Kinsta)

Desen oluşturma

• Blok modellerine giriş (Tam Site Düzenleme)
• Blok Modelleri videosuna giriş, 14 dakika (WordPress öğrenin)
• Blok Desenler (Blok Düzenleyici El Kitabı)
• Blok kalıpları mı yapmak istiyorsunuz? (WordPress Blogu)
• WordPress'te düşük kodlu Blok Kalıpları nasıl oluşturulur ve paylaşılır (GoDaddy)

Desen geliştirme (GitHub)

• Desenlerle Bina #38529
• Kesit Elemanları Olarak Çoğaltmalar #39281
• Ekle: Sayfa oluşturmada bir model seçme seçeneği. #40034
• Sayfa oluşturma için Blok Kalıpları. #38787
• Ekle: Sayfa başlatma seçenekleri (şablonlar ve desenler) #39147

Blog makaleleri

• Gutenberg Kalıpları: WordPress'te Sayfa Oluşturmanın Geleceği (Zengin Tabor)
• WordPress site yapılarını hızlandırmak için Blok Kalıplarını kullanma (GoDaddy)
• Blok Desenleri Her Şeyi Değiştirecek (WP Tavernası)

---

WordPress 6.0'da Blok Tema Kalıpları Nasıl Oluşturulur aslen yayınlandı CSS Hileleri. Malısın bülteni al.

• Akıllı para. Avrupa'nın En İyi Bitcoin ve Kripto Borsası.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. SERBEST ERİŞİM.
• KriptoHawk. Altcoin Radarı. Ücretsiz deneme.
• Kaynak: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/