वर्डप्रेस 6.0 प्लेटोब्लॉकचैन डेटा इंटेलिजेंस में ब्लॉक थीम पैटर्न कैसे बनाएं। लंबवत खोज। ऐ.

वर्डप्रेस 6.0 में ब्लॉक थीम पैटर्न कैसे बनाएं?

समय टिकट: 1 जून, 2022 11:30 बजे

ब्लॉक पैटर्न, जिसे अक्सर के रूप में भी जाना जाता है वर्गों, में पेश किया गया WordPress के 5.5 उपयोगकर्ताओं को पूर्वनिर्धारित ब्लॉक लेआउट बनाने और साझा करने की अनुमति देने के लिए पैटर्न निर्देशिका. निर्देशिका वर्डप्रेस समुदाय द्वारा डिज़ाइन किए गए क्यूरेटेड पैटर्न की एक विस्तृत श्रृंखला का घर है। ये पैटर्न सरल कॉपी और पेस्ट प्रारूप में उपलब्ध हैं, कोडिंग ज्ञान की आवश्यकता नहीं है और इस प्रकार उपयोगकर्ताओं के लिए एक बड़ा समय बचाने वाला है।

पैटर्न पर कई लेखों के बावजूद, नवीनतम उन्नत सुविधाओं को कवर करने वाले पैटर्न निर्माण पर व्यापक और अप-टू-डेट लेखों की कमी है। इस लेख का उद्देश्य हाल ही में उन्नत सुविधाओं पर ध्यान केंद्रित करना है जैसे पंजीकरण के बिना पैटर्न बनाना और नौसिखियों और अनुभवी लेखकों के लिए ब्लॉक थीम में उन्हें बनाने और उनका उपयोग करने के लिए एक अद्यतित चरण-दर-चरण मार्गदर्शिका प्रदान करना।

के शुभारंभ के बाद से WordPress के 5.9 और ट्वेंटी-ट्वेंटी (TT2) डिफ़ॉल्ट थीम, ब्लॉक थीम में ब्लॉक पैटर्न का उपयोग बढ़ गया है। मैं का बहुत बड़ा प्रशंसक रहा हूं ब्लॉक पैटर्न और उन्हें मेरी ब्लॉक थीम में बनाया और इस्तेमाल किया है।

नई WordPress के 6.0 प्रदान करता है तीन प्रमुख पैटर्न लेखकों के लिए संवर्द्धन की सुविधा प्रदान करते हैं:

  • के माध्यम से पैटर्न पंजीकरण की अनुमति /patterns फ़ोल्डर (के समान /parts, /templates, तथा /styles पंजीकरण)।
  • का उपयोग करके सार्वजनिक पैटर्न निर्देशिका से पैटर्न दर्ज करना theme.json.
  • एक नया पृष्ठ बनाते समय उपयोगकर्ता को पेश किए जा सकने वाले पैटर्न जोड़ना।

एक परिचयात्मक में वर्डप्रेस 6.0 वीडियो की खोज, स्वचालित उत्पाद संपर्क ऐन मैककैथी कुछ नई उन्नत पैटर्न सुविधाओं (15:00 से शुरू) पर प्रकाश डालता है और भविष्य के पैटर्न वृद्धि योजनाओं पर चर्चा करता है - जिसमें शामिल हैं सेक्शनिंग तत्वों के रूप में पैटर्न, को विकल्प प्रदान करना पृष्ठ निर्माण पर पैटर्न चुनें, पैटर्न निर्देशिका खोज को एकीकृत करना, और बहुत कुछ।

.. पूर्वापेक्षाएँ

लेख मानता है कि पाठकों को वर्डप्रेस फुल साइट एडिटिंग (एफएसई) इंटरफेस और ब्लॉक थीम का बुनियादी ज्ञान है। ब्लॉक संपादक हैंडबुक और पूरी साइट संपादन वेबसाइट इस लेख में चर्चा की गई ब्लॉक थीम और पैटर्न सहित सभी एफएसई सुविधाओं को सीखने के लिए सबसे अद्यतित ट्यूटोरियल गाइड प्रदान करती है।

खंड 1: ब्लॉक पैटर्न बनाने के लिए दृष्टिकोण विकसित करना

ब्लॉक पैटर्न बनाने के लिए प्रारंभिक दृष्टिकोण के लिए ब्लॉक पैटर्न एपीआई के उपयोग को कस्टम प्लगइन के रूप में या सीधे पंजीकृत करने की आवश्यकता थी functions.php एक ब्लॉक थीम के साथ बंडल करने के लिए फ़ाइल। नए लॉन्च किए गए वर्डप्रेस 6.0 ने पैटर्न और थीम के साथ काम करने वाली कई नई और उन्नत सुविधाओं को पेश किया, जिसमें ए . के माध्यम से पैटर्न पंजीकरण भी शामिल है /patterns फ़ोल्डर और एक पृष्ठ निर्माण पैटर्न मोडल.

पृष्ठभूमि के लिए, आइए पहले संक्षेप में देखें कि पैटर्न पंजीकरण वर्कफ़्लो कैसे रजिस्टर पैटर्न एपीआई के उपयोग से बिना पंजीकरण के सीधे लोड होने तक विकसित हुआ।

उदाहरण उदाहरण 1 का प्रयोग करें: इक्कीसवीं

डिफ़ॉल्ट इक्कीसवीं थीम (TT1) और TT1 ब्लॉक थीम (TT1 का एक भाई) यह प्रदर्शित करता है कि थीम में ब्लॉक पैटर्न को कैसे पंजीकृत किया जा सकता है functions.php. TT1 ब्लॉक प्रायोगिक-विषय में, यह एकल ब्लॉक-पैटर्न.php फ़ाइल युक्त आठ ब्लॉक पैटर्न में जोड़ा जाता है functions.php एक के रूप में include जैसा कि यहाँ दिखाया गया है.

एक कस्टम ब्लॉक पैटर्न पंजीकृत होने की आवश्यकता है का उपयोग register_block_pattern फ़ंक्शन, जो दो तर्क प्राप्त करता है - title (पैटर्न का नाम) और properties (पैटर्न के गुणों का वर्णन करने वाला एक सरणी)।

यहां से एक सरल "हैलो वर्ल्ड" पैराग्राफ पैटर्न दर्ज करने का एक उदाहरण दिया गया है थीम शेपर लेख:

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

पंजीकरण के बाद, register_block_pattern() से जुड़े हैंडलर से फ़ंक्शन को कॉल किया जाना चाहिए init वर्णित के रूप में हुक यहाँ उत्पन्न करें.

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

एक बार ब्लॉक पैटर्न पंजीकृत हो जाने के बाद वे ब्लॉक संपादक में दिखाई देते हैं। अधिक विस्तृत दस्तावेज इसमें पाए जाते हैं ब्लॉक पैटर्न पंजीकरण।

ब्लॉक पैटर्न गुण

आवश्यकता के अलावा title और content गुण, ब्लॉक संपादक हैंडबुक निम्नलिखित वैकल्पिक सूचीबद्ध करता है पैटर्न गुण:

  • title () की आवश्यकता: पैटर्न के लिए एक मानव-पठनीय शीर्षक।
  • content () की आवश्यकता: पैटर्न के लिए HTML मार्कअप को ब्लॉक करें।
  • description (वैकल्पिक): इन्सटर में पैटर्न का वर्णन करने के लिए उपयोग किया जाने वाला एक नेत्रहीन छिपा हुआ पाठ। एक विवरण वैकल्पिक है लेकिन इसे दृढ़ता से प्रोत्साहित किया जाता है जब शीर्षक पूरी तरह से वर्णन नहीं करता है कि पैटर्न क्या करता है। विवरण उपयोगकर्ताओं को खोज करते समय पैटर्न खोजने में मदद करेगा।
  • categories (वैकल्पिक): ब्लॉक पैटर्न को समूहबद्ध करने के लिए उपयोग की जाने वाली पंजीकृत पैटर्न श्रेणियों की एक सरणी। ब्लॉक पैटर्न को कई श्रेणियों में दिखाया जा सकता है। यहां उपयोग करने के लिए एक श्रेणी को अलग से पंजीकृत किया जाना चाहिए।
  • keywords (वैकल्पिक): उपनाम या कीवर्ड की एक सरणी जो उपयोगकर्ताओं को खोज करते समय पैटर्न खोजने में मदद करती है।
  • viewportWidth (वैकल्पिक): इंसर्टर में पैटर्न के स्केल किए गए पूर्वावलोकन की अनुमति देने के लिए पैटर्न की इच्छित चौड़ाई निर्दिष्ट करने वाला एक पूर्णांक।
  • blockTypes (वैकल्पिक): ब्लॉक प्रकारों की एक सरणी जिसके साथ पैटर्न का उपयोग करने का इरादा है। प्रत्येक मान को घोषित ब्लॉक का होना चाहिए name.
  • inserter (वैकल्पिक): डिफ़ॉल्ट रूप से, सभी पैटर्न इन्सटर में दिखाई देंगे। एक पैटर्न को छिपाने के लिए ताकि इसे केवल प्रोग्रामेटिक रूप से सम्मिलित किया जा सके, सेट करें inserter सेवा मेरे false.

निम्नलिखित से लिए गए कोट पैटर्न प्लगइन कोड स्निपेट का एक उदाहरण है वर्डप्रेस ब्लॉग.

/*
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 -->', )
);

टेम्पलेट फ़ाइल में पैटर्न का उपयोग करना

एक बार पैटर्न बन जाने के बाद, उनका उपयोग निम्नलिखित ब्लॉक मार्कअप के साथ थीम टेम्प्लेट फ़ाइल में किया जा सकता है:

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

से एक उदाहरण इस GitHub भंडार का उपयोग दिखाता है "footer-with-background"पैटर्न स्लग" के साथtt2gopherTT2 गोफर ब्लॉक थीम में उपसर्ग।

ब्लॉक थीम और गुटेनबर्ग प्लगइन के शुरुआती अपनाने वालों ने क्लासिक थीम में भी पैटर्न का लाभ उठाया। डिफ़ॉल्ट बीस बीस और मेरी पसंदीदा एक्सेल थीम (a डेमो साइट यहां) अच्छे उदाहरण हैं जो दिखाते हैं कि क्लासिक थीम में पैटर्न सुविधाओं को कैसे जोड़ा जा सकता है।

केस उदाहरण 2 का प्रयोग करें: ट्वेंटी-ट्वेंटी

यदि किसी विषय में केवल कुछ पैटर्न शामिल हैं, तो विकास और रखरखाव काफी प्रबंधनीय हैं। हालांकि, यदि किसी ब्लॉक थीम में कई पैटर्न शामिल हैं, जैसे TT2 थीम में, तो pattern.php फ़ाइल बहुत बड़ी और पढ़ने में कठिन हो जाती है। डिफ़ॉल्ट TT2 थीम, जो बंडल करती है 60 से अधिक पैटर्न, एक रिफैक्टेड पैटर्न पंजीकरण वर्कफ़्लो दिखाता है संरचना जिसे पढ़ना और बनाए रखना आसान है।

TT2 थीम से उदाहरण लेते हुए, आइए संक्षेप में चर्चा करें कि यह सरलीकृत वर्कफ़्लो कैसे काम करता है।

2.1: पंजीकरण पैटर्न श्रेणियाँ

प्रदर्शन उद्देश्यों के लिए, मैंने एक TT2 चाइल्ड थीम बनाई और इसे कुछ डमी सामग्री के साथ अपनी स्थानीय परीक्षण साइट पर स्थापित किया। TT2 के बाद, मैंने पंजीकृत किया footer-with-background और इसके में निम्नलिखित पैटर्न श्रेणियों सरणी सूची में जोड़ा गया block-patterns.php फ़ाइल.

/**
* 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 );

इस कोड उदाहरण में, प्रत्येक पैटर्न में सूचीबद्ध है $block_patterns = array() द्वारा बुलाया जाता है foreach() समारोह जो requires एक patterns सरणी में सूचीबद्ध पैटर्न नाम के साथ निर्देशिका फ़ाइल जिसे हम अगले चरण में जोड़ेंगे।

2.2: में एक पैटर्न फ़ाइल जोड़ना /inc/patterns फोल्डर

इसके बाद, हमारे पास सभी सूचीबद्ध पैटर्न फ़ाइलें होनी चाहिए $block_patterns = array(). यहाँ पैटर्न फ़ाइलों में से एक का एक उदाहरण है, 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 -->',
);

आइए में पैटर्न का संदर्भ लें footer.html टेम्पलेट भाग:

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

यह एक टेम्प्लेट फ़ाइल में शीर्षक या पाद लेख भागों को जोड़ने के समान है।

पैटर्न को इसी तरह जोड़ा जा सकता है parts/footer.html इसे संदर्भित करने के लिए संशोधित करके टेम्पलेट slug विषय की पैटर्न फ़ाइल (footer-with-background):

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

अब, यदि हम ब्लॉक संपादक के पैटर्न इंसर्टर पर जाएँ, तो Footer with background हमारे उपयोग के लिए उपलब्ध होना चाहिए:

पृष्ठभूमि के साथ पाद लेख के पैटर्न का स्क्रीनशॉट।
वर्डप्रेस 6.0 में ब्लॉक थीम पैटर्न कैसे बनाएं?

निम्न स्क्रीनशॉट नए बनाए गए फ़ुटर को सामने के छोर पर पृष्ठभूमि पैटर्न के साथ दिखाता है।

पाद लेख पृष्ठभूमि का स्क्रीनशॉट जैसा कि यह साइट पर प्रदान किया गया प्रतीत होता है।
वर्डप्रेस 6.0 में ब्लॉक थीम पैटर्न कैसे बनाएं?

अब जब पैटर्न ब्लॉक थीम का अभिन्न अंग बन गए हैं, तो कई पैटर्न ब्लॉक थीम में बंडल किए गए हैं - जैसे वर्ग, बीजपत्र, मायलैंड, जीव विज्ञानी, भूविज्ञानी - ऊपर चर्चा किए गए कार्यप्रवाह के बाद। यहाँ Quadrat विषय का एक उदाहरण है /inc/patterns a . के साथ फ़ोल्डर ब्लॉक-पैटर्न पंजीकरण फ़ाइल और फाइलों की सूची सामग्री स्रोत और आवश्यक पैटर्न हेडर के साथ अंदर return array() समारोह.

धारा 2: पंजीकरण के बिना पैटर्न बनाना और लोड करना

कृपया ध्यान दें कि इस सुविधा के लिए आपकी साइट में वर्डप्रेस 6.0 या गुटेनबर्ग प्लगइन 13.0 या इसके बाद के संस्करण की स्थापना की आवश्यकता है।

इस नया वर्डप्रेस 6.0 फीचर मानक फ़ाइलों और फ़ोल्डरों के माध्यम से पैटर्न पंजीकरण की अनुमति देता है - /patterns, इसी तरह के सम्मेलनों को लाना /parts, /templates, तथा /styles.

प्रक्रिया, जैसा कि में भी वर्णित है यह WP मधुशाला लेख में निम्नलिखित तीन चरण शामिल हैं:

  • विषय के मूल में एक पैटर्न फ़ोल्डर बनाना
  • प्लगइन स्टाइल पैटर्न हेडर जोड़ना
  • पैटर्न स्रोत सामग्री

लेख से लिया गया एक विशिष्ट पैटर्न हेडर मार्कअप नीचे दिखाया गया है:

<?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
*/
?>

जैसा कि पिछले खंड में वर्णित है, केवल Title और Slug फ़ील्ड आवश्यक हैं और अन्य फ़ील्ड वैकल्पिक हैं।

हाल ही में जारी किए गए विषयों के उदाहरणों का संदर्भ देते हुए, मैंने पैटर्न पंजीकरण को फिर से तैयार किया यह TT2 गोफर ब्लॉक डेमो थीम, के लिए तैयार सीएसएस-ट्रिक्स पर पिछला लेख.

निम्नलिखित चरणों में, आइए जानें कि कैसे a footer-with-background.php पैटर्न पीएचपी के साथ पंजीकृत और a . में उपयोग किया जाता है footer.html टेम्पलेट रिफैक्टर किया गया है।

2.1: एक बनाएँ /patterns विषय के मूल में फ़ोल्डर

पहला कदम a . बनाना है /patterns TT2 गोफर विषय के मूल में फ़ोल्डर और स्थानांतरित करें footer-with-background.php करने के लिए पैटर्न फ़ाइल /patterns फ़ोल्डर और रिफैक्टर।

2.2: फ़ाइल हेडर में पैटर्न डेटा जोड़ें

इसके बाद, निम्न पैटर्न हैडर पंजीकरण फ़ील्ड बनाएँ।

<?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 /-->

एक पैटर्न फ़ाइल में एक शीर्ष शीर्षक फ़ील्ड होता है जिसे PHP टिप्पणियों के रूप में लिखा जाता है। द्वारा पीछा किया ब्लॉक-सामग्री एचटीएमएल प्रारूप में लिखा गया है।

2.3: फ़ाइल में पैटर्न सामग्री जोड़ें

सामग्री अनुभाग के लिए, आइए कोड स्निपेट को कॉपी करें एकल कोट (जैसे, '...') के सामग्री अनुभाग से footer-with-background और बदलें <!-- 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 -->

का संपूर्ण कोड स्निपेट patterns/footer-with-background.php फ़ाइल देखी जा सकती है यहाँ GitHub पर.

कृपया ध्यान दें कि /inc/patterns और block-patterns.php रहे उद्धरण, वर्डप्रेस 6.0 में आवश्यक नहीं है, और केवल डेमो उद्देश्यों के लिए शामिल है।

2.4: टेम्प्लेट में पैटर्न स्लग को संदर्भित करना

उपरोक्त रिफैक्टर जोड़ना footer-with-background.php करने के लिए पैटर्न footer.html टेम्पलेट बिल्कुल वैसा ही है जैसा कि पिछले अनुभाग (धारा 1, 2.2) में वर्णित है।

अब, यदि हम किसी ब्राउज़र में साइट के पाद लेख भाग को किसी ब्लॉक संपादक या हमारी साइट के सामने के छोर में देखते हैं, तो पाद लेख अनुभाग प्रदर्शित होता है।

पैटर्न श्रेणियां और प्रकार पंजीकरण (वैकल्पिक)

ब्लॉक पैटर्न को वर्गीकृत करने के लिए, पैटर्न श्रेणियों और प्रकारों को थीम में पंजीकृत किया जाना चाहिए functions.php फ़ाइल.

आइए एक उदाहरण पर विचार करें ब्लॉक पैटर्न श्रेणियों का पंजीकरण TT2 गोफर थीम से।

पंजीकरण के बाद, पैटर्न को कोर डिफॉल्ट पैटर्न के साथ पैटर्न इंसर्टर में प्रदर्शित किया जाता है। पैटर्न इंसर्टर में थीम विशिष्ट श्रेणी के लेबल जोड़ने के लिए, हमें थीम नेमस्पेस जोड़कर पिछले स्निपेट्स को संशोधित करना चाहिए:

/**
* 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 );

RSI footer-with-background पैटर्न इसके पूर्वावलोकन के साथ डाले गए पैटर्न में दिखाई देता है (यदि चयनित हो):

पैटर्न इंसर्टर (बाएं पैनल) में प्रदर्शित पैटर्न श्रेणी दिखाने वाला स्क्रीनशॉट और संपादक (दाएं पैनल) में प्रदर्शित संबंधित डिफ़ॉल्ट पाद लेख पैटर्न।
वर्डप्रेस 6.0 में ब्लॉक थीम पैटर्न कैसे बनाएं?

यह प्रक्रिया ब्लॉक थीम में ब्लॉक पैटर्न बनाने और प्रदर्शित करने को बहुत सरल बनाती है। यह गुटेनबर्ग प्लगइन का उपयोग किए बिना वर्डप्रेस 6.0 में उपलब्ध है।

पैटर्न पंजीकरण के बिना विषयों के उदाहरण

शुरुआती अपनाने वालों ने अपने ब्लॉक थीम में इस सुविधा का उपयोग करना शुरू कर दिया है। विषयों के कुछ उदाहरण, जो से उपलब्ध हैं विषय निर्देशिका, बिना पंजीकरण के लोड पैटर्न नीचे सूचीबद्ध हैं:

धारा 3: निम्न-कोड वाले पैटर्न बनाना और उनका उपयोग करना

RSI आधिकारिक पैटर्न निर्देशिका इसमें समुदाय द्वारा योगदान किए गए रचनात्मक डिज़ाइन शामिल हैं, जिन्हें सामग्री बनाने के लिए वांछित के रूप में कॉपी और अनुकूलित किया जा सकता है। ब्लॉक संपादक के साथ पैटर्न का उपयोग करना इतना आसान कभी नहीं रहा!

लगातार बढ़ने वाली निर्देशिका से किसी भी पैटर्न को केवल सरल "कॉपी और पेस्ट" द्वारा ब्लॉक थीम में जोड़ा जा सकता है या इसमें शामिल किया जा सकता है theme.json उनकी निर्देशिका का हवाला देते हुए फ़ाइल पैटर्न स्लग. इसके बाद, मैं संक्षेप में बताऊंगा कि इसे बहुत सीमित कोडिंग के साथ कितनी आसानी से पूरा किया जा सकता है।

पैटर्न निर्देशिका से पैटर्न जोड़ना और अनुकूलित करना

3.1: निर्देशिका से प्रतिमान को एक पृष्ठ में कॉपी करें

यहाँ, मैं उपयोग कर रहा हूँ यह पाद लेख अनुभाग पैटर्न FirstWebGeek द्वारा पैटर्न निर्देशिका से। "प्रतिमान कॉपी करें" बटन का चयन करके पैटर्न की प्रतिलिपि बनाई और इसे सीधे एक नए पृष्ठ में चिपकाया।

3.2: वांछित अनुकूलन करेंs

मैंने फोंट और बटन पृष्ठभूमि के रंग में केवल कुछ बदलाव किए हैं। फिर से पूरे कोड को कॉपी किया कोड संपादक एक क्लिपबोर्ड पर।

स्क्रीनशॉट संशोधित पैटर्न (बाएं पैनल) और कोड संपादक (दाएं पैनल) में संबंधित कोड दिखा रहा है
वर्डप्रेस 6.0 में ब्लॉक थीम पैटर्न कैसे बनाएं?

यदि आप कोड संपादक का उपयोग करने से परिचित नहीं हैं, तो विकल्पों पर जाएं (तीन बिंदुओं के साथ, शीर्ष दाएं), कोड संपादक बटन पर क्लिक करें, और यहां से पूरे कोड को कॉपी करें।

3.3: /patterns फ़ोल्डर में एक नई फ़ाइल बनाएँ

सबसे पहले, आइए एक नया बनाएं /patterns/footer-pattern-test.php फ़ाइल और आवश्यक पैटर्न हैडर अनुभाग जोड़ें। फिर पूरा कोड पेस्ट करें (चरण 3, ऊपर)। पैटर्न को पाद लेख क्षेत्र में वर्गीकृत किया गया है (पंक्तियाँ: 5), हम पैटर्न डालने वाले में नए जोड़े गए देख सकते हैं।

<?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: इंसर्टर में नया पैटर्न देखें

नए जोड़े को देखने के लिए Footer pattern from patterns library पैटर्न, किसी भी पोस्ट या पेज पर जाएं और इंसर्टर आइकन (नीला प्लस प्रतीक, ऊपर बाएं) का चयन करें, और फिर "टीटी 2 गोफर - पाद लेख" श्रेणियों का चयन करें। नया जोड़ा पैटर्न बाएं पैनल पर दिखाया गया है, साथ में अन्य पाद लेख पैटर्न और दाईं ओर इसका पूर्वावलोकन (यदि चयनित है):

नया पादलेख पैटर्न (बाएं पैनल) और उसका पूर्वावलोकन (दायां पैनल) दिखाने वाला स्क्रीनशॉट।
वर्डप्रेस 6.0 में ब्लॉक थीम पैटर्न कैसे बनाएं?

पंजीकरण पैटर्न सीधे theme.json पट्टिका

वर्डप्रेस 6.0 में, पैटर्न निर्देशिका से किसी भी वांछित पैटर्न को पंजीकृत करना संभव है theme.json निम्नलिखित सिंटैक्स के साथ फ़ाइल। 6.0 देव नोट की स्थिति, "पैटर्न फ़ील्ड की एक सरणी है [पैटर्न स्लग] पैटर्न निर्देशिका से। पैटर्न निर्देशिका में एकल पैटर्न दृश्य में [URL] द्वारा पैटर्न स्लग निकाले जा सकते हैं।"

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

इस लघु वर्डप्रेस 6.0 वीडियो सुविधाएँ दर्शाता है कि कैसे पैटर्न दर्ज किए जाते हैं /patterns फोल्डर (3:53 पर) और पैटर्न डायरेक्टर से वांछित पैटर्न को a . में रजिस्टर करना theme.json फ़ाइल (3:13 पर)।

फिर, पंजीकृत पैटर्न पैटर्न इंसर्टर सर्च बॉक्स में उपलब्ध होता है, जो तब थीम-बंडल पैटर्न लाइब्रेरी की तरह उपयोग के लिए उपलब्ध होता है।

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

इस उदाहरण में, पैटर्न स्लग footer-section-design-with-3-column-description-social-media-contact-and-newsletter से पहले का उदाहरण के माध्यम से पंजीकृत है theme.json.

पृष्ठ निर्माण पैटर्न मॉडल

के हिस्से के रूप में "पैटर्न के साथ निर्माण"पहल, वर्डप्रेस 6.0 एक पैटर्न मोडल विकल्प प्रदान करता है थीम लेखकों को ब्लॉक थीम में पेज लेआउट पैटर्न जोड़ने के लिए, साइट उपयोगकर्ताओं को पेज बनाते समय पेज लेआउट पैटर्न (जैसे, एक पेज के बारे में, एक संपर्क पेज, एक टीम पेज, आदि) का चयन करने की अनुमति देता है। निम्नलिखित से लिया गया एक उदाहरण है: देव नोट:

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 -->', )
);

यह सुविधा वर्तमान में है पेज पोस्ट प्रकार तक सीमित केवल और "पोस्ट पोस्ट प्रकार" के लिए नहीं, अभी तक।

RSI पृष्ठ निर्माण पैटर्न मोडल सभी पैटर्न के पोस्ट-कंटेंट ब्लॉक प्रकार को हटाकर भी पूरी तरह से अक्षम किया जा सकता है। एक उदाहरण नमूना कोड यहाँ उपलब्ध है.

आप नीचे दिए गए संसाधन अनुभाग के तहत सूचीबद्ध लिंक से गिटहब की चर्चा का अनुसरण कर सकते हैं और उसमें भाग ले सकते हैं।

पेज बनाने के लिए पैटर्न निर्देशिका का उपयोग करना

पेज बिल्डरों के समान, वांछित पोस्ट या पेज लेआउट बनाने के लिए निर्देशिका से पैटर्न का भी उपयोग किया जा सकता है। गुटेनबर्ग हब टीम ने बनाया है एक प्रयोगात्मक ऑनलाइन पेज बिल्डर ऐप निर्देशिका से सीधे पैटर्न का उपयोग करना (परिचयात्मक वीडियो) फिर ऐप से कोड को एक साइट में कॉपी और पेस्ट किया जा सकता है, जो बिना कोडिंग के बिल्डिंग कॉम्प्लेक्स पेज लेआउट प्रक्रिया को बहुत सरल करता है।

In यह लघु वीडियो, जेमी मार्सलैंड प्रदर्शित करता है (1:30 बजे) कैसे ऐप का उपयोग निर्देशिका के वांछित पृष्ठ अनुभागों का उपयोग करके पेज बिल्डर के समान एक संपूर्ण पृष्ठ लेआउट बनाने के लिए किया जा सकता है।

ऊपर लपेटकर

पैटर्न उपयोगकर्ताओं को किसी भी पृष्ठ में अपने सामान्य रूप से उपयोग की जाने वाली सामग्री लेआउट (जैसे, हीरो पेज, कॉल आउट, आदि) को फिर से बनाने की अनुमति देते हैं और शैलियों में सामग्री प्रस्तुत करने के लिए बाधाओं को कम करते हैं, जो पहले कोडिंग कौशल के बिना संभव नहीं थे। बिल्कुल की तरह plugins और विषयों निर्देशिका, नया पैटर्न उपयोग करें निर्देशिका उपयोगकर्ताओं को पैटर्न निर्देशिका से अपनी पसंद के पैटर्न की एक विस्तृत श्रृंखला का उपयोग करने और शैली में सामग्री लिखने और प्रदर्शित करने के विकल्प प्रदान करती है।

दरअसल, ब्लॉक पैटर्न सब कुछ बदल देगा और निश्चित रूप से यह एक है खेल परिवर्तक वर्डप्रेस थीम परिदृश्य में सुविधा। जब की पूरी क्षमता पैटर्न के साथ निर्माण प्रयास उपलब्ध हो जाता है, यह हमारे ब्लॉक थीम को डिजाइन करने और कम-कोड ज्ञान के साथ भी सुंदर सामग्री बनाने के तरीके को बदलने वाला है। कई रचनात्मक डिजाइनरों के लिए, पैटर्न निर्देशिका उनके प्रदर्शन के लिए उपयुक्त अवसर भी प्रदान कर सकती है रचनात्मकता.

उपयुक्त संसाधन चुनें

WordPress के 6.0

पैटर्न बनाना

पैटर्न एन्हांसमेंट (GitHub)

ब्लॉग लेख

वर्डप्रेस 6.0 में ब्लॉक थीम पैटर्न कैसे बनाएं? मूल रूप से प्रकाशित सीएसएस-ट्रिक्स। तुम्हे करना चाहिए समाचार पत्र प्राप्त करें.

समय टिकट:

से अधिक सीएसएस ट्रिक्स