نحوه ایجاد الگوهای تم بلوکی در وردپرس 6.0

الگوهای بلوک، همچنین اغلب به عنوان بخش، معرفی شدند وردپرس 5.5 به کاربران اجازه می دهد طرح بندی های بلوک از پیش تعریف شده را بسازند و به اشتراک بگذارند دایرکتوری الگو. دایرکتوری خانه طیف گسترده ای از الگوهای انتخاب شده است که توسط جامعه وردپرس طراحی شده است. این الگوها در قالب کپی و چسباندن ساده موجود هستند، نیازی به دانش کدنویسی ندارند و بنابراین صرفه جویی زیادی در زمان برای کاربران دارند.

علیرغم بسیاری از مقالات در مورد الگوها، کمبود مقالات جامع و به روز در مورد ایجاد الگو وجود دارد که آخرین ویژگی های پیشرفته را پوشش دهد. هدف این مقاله پر کردن شکاف با تمرکز بر ویژگی‌های پیشرفته اخیر مانند ایجاد الگوهای بدون ثبت نام و ارائه راهنمای گام به گام به‌روز برای ایجاد و استفاده از آنها در مضامین بلوک برای تازه‌کارها و نویسندگان با تجربه است.

از زمان راه اندازی وردپرس 5.9 و بیست و بیست و دو تم پیش‌فرض (TT2)، استفاده از الگوهای بلوک در تم‌های بلوک زیاد شده است. من از طرفداران پر و پا قرص بوده ام الگوهای بلوک و آنها را در مضامین بلوک من ایجاد و استفاده کرده ام.

جدید وردپرس 6.0 ارائه می دهد سه الگوی اصلی دارای پیشرفت هایی برای نویسندگان هستند:

• اجازه ثبت الگو از طریق /patterns پوشه (مشابه /parts, /templatesو /styles ثبت).
• ثبت الگوها از فهرست الگوهای عمومی با استفاده از theme.json.
• اضافه کردن الگوهای قابل ارائه به کاربر هنگام ایجاد یک صفحه جدید.

در یک مقدمه کاوش ویدیو وردپرس 6.0، رابط محصول Automattic آن مک کتی برخی از ویژگی های الگوهای جدید بهبود یافته را برجسته می کند (از ساعت 15:00 شروع می شود) و برنامه های بهبود الگوهای آینده را مورد بحث قرار می دهد - که شامل الگوها به عنوان عناصر برش، ارائه گزینه هایی برای انتخاب الگو در ایجاد صفحه، یکپارچه سازی جستجوی دایرکتوری الگو و موارد دیگر.

پیش نیازها

این مقاله فرض می‌کند که خوانندگان دانش اولیه از رابط ویرایش کامل سایت وردپرس (FSE) و تم‌های بلوک دارند. این راهنمای ویرایشگر بلوک و ویرایش کامل سایت وب سایت به روزترین راهنماهای آموزشی را برای یادگیری تمام ویژگی های FSE، از جمله تم های بلوک و الگوهای مورد بحث در این مقاله ارائه می دهد.

بخش 1: رویکردهای در حال تحول برای ایجاد الگوهای بلوک

رویکرد اولیه برای ایجاد الگوهای بلوک مستلزم استفاده از API الگوی بلوک یا به عنوان یک افزونه سفارشی یا به طور مستقیم ثبت شده در functions.php فایل به بسته‌بندی با موضوع بلوک. وردپرس 6.0 که به تازگی راه اندازی شده است، چندین ویژگی جدید و پیشرفته را برای کار با الگوها و تم ها معرفی کرده است، از جمله ثبت الگو از طریق یک /patterns پوشه و الف مودال الگوی ایجاد صفحه.

برای پیش‌زمینه، ابتدا به طور خلاصه مرور می‌کنیم که چگونه گردش کار ثبت الگو از استفاده از ثبت الگوی API تا بارگیری مستقیم بدون ثبت تغییر یافته است.

از مثال 1 استفاده کنید: بیست و بیست و یک

به طور پیش فرض موضوع بیست و بیست و یک (TT1) و تم بلوک TT1 (یکی از برادران TT1) نشان می دهد که چگونه الگوهای بلوک را می توان در طرح زمینه ثبت کرد functions.php. در تم آزمایشی بلوک‌های TT1، این تک‌آهنگ block-pattern.php فایل حاوی هشت الگوهای بلوک به اضافه شده است functions.php عنوان include همانطور که در اینجا نشان داده شده است.

یک الگوی بلوک سفارشی نیاز به ثبت نام دارد با استفاده از register_block_pattern تابعی که دو آرگومان دریافت می کند - title (نام الگوها) و properties (آرایه ای که ویژگی های الگو را توصیف می کند).

در اینجا نمونه ای از ثبت الگوی پاراگراف ساده "Hello World" از این است مقاله شکل دهنده تم:

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” الگوی حلزون حرکت کردن با ”tt2gopher” پیشوند در تم بلوک های TT2 Gopher.

پذیرندگان اولیه تم های بلوک و افزونه گوتنبرگ از الگوها در تم های کلاسیک نیز استفاده کردند. به طور پیش فرض بیست و بیست و تم های مورد علاقه من Eksell (الف سایت آزمایشی در اینجا) نمونه‌های خوبی هستند که نشان می‌دهند چگونه ویژگی‌های الگو را می‌توان به تم‌های کلاسیک اضافه کرد.

از مثال 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() تابعی که requireساعت 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 باید برای استفاده ما در دسترس باشد:

تصویر زیر فوتر جدید ایجاد شده را با الگوی پس‌زمینه در قسمت جلویی نشان می‌دهد.

اکنون که الگوها به بخش جدایی ناپذیر طرح زمینه بلوک تبدیل شده‌اند، بسیاری از الگوها در قالب‌های مضمون بلوک قرار گرفته‌اند - مانند مربع, نهال, میلند, جانور شناس, زمین شناس - پیروی از گردش کار مورد بحث در بالا. در اینجا نمونه ای از تم 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 Gopher Blocks تم دمو، آماده شده برای مقاله قبلی در مورد ترفندهای CSS.

در مراحل زیر، بیایید بررسی کنیم که چگونه a footer-with-background.php الگو با PHP ثبت شده است و در الف استفاده می شود footer.html قالب بازسازی شده است.

2.1: ایجاد یک /patterns پوشه در ریشه تم

اولین قدم ایجاد یک /patterns در ریشه تم TT2 Gopher پوشه کنید و آن را حرکت دهید footer-with-background.php فایل الگو به /patterns پوشه و Refactor

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 نوشته شده است. به دنبال آن بلوک محتوا در قالب HTML نوشته شده است.

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 Gopher.

پس از ثبت نام، الگوها به همراه الگوهای پیش فرض اصلی در درج کننده الگو نمایش داده می شوند. برای افزودن برچسب‌های دسته‌بندی خاص موضوع در درج‌کننده الگوها، باید قطعه‌های قبلی را با افزودن فضای نام تم اصلاح کنیم:

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

La footer-with-background الگو در الگوهای درج شده با پیش نمایش آن قابل مشاهده است (در صورت انتخاب):

این فرآیند ایجاد و نمایش الگوهای بلوک در تم های بلوک را بسیار ساده می کند. این در وردپرس 6.0 بدون استفاده از افزونه گوتنبرگ در دسترس است.

نمونه هایی از تم های بدون ثبت الگو

پذیرندگان اولیه قبلاً استفاده از این ویژگی را در مضامین بلاک خود شروع کرده اند. چند نمونه از تم ها، که در دسترس هستند دایرکتوری تم، که الگوهای بارگذاری بدون ثبت نام در زیر لیست شده است:

• آرکئو – 12 الگو
• آویز – 13 الگو
• دور – 11 الگو
• پارک اسکیت – 10 الگو
• استوارت – 17 الگو
• کتاب – 16 الگو
• آوانگارد – 14 الگو

بخش 3: ایجاد و استفاده از الگوهای با کد پایین

La دایرکتوری رسمی الگوها شامل طرح‌های خلاقانه جامعه است که می‌توان آن‌ها را کپی و سفارشی کرد تا محتوا ایجاد شود. استفاده از الگوها با ویرایشگر بلوک هرگز به این آسانی نبوده است!

هر الگوی از فهرستی که همیشه در حال رشد است را می‌توان فقط با «کپی و چسباندن» ساده برای مسدود کردن مضامین اضافه کرد یا در فهرست قرار داد. theme.json با مراجعه به دایرکتوری آنها فایل کنید اسلگ الگو. در مرحله بعد، به طور خلاصه توضیح خواهم داد که چگونه می توان این کار را با کدنویسی بسیار محدود به راحتی انجام داد.

اضافه کردن و سفارشی کردن الگوها از فهرست الگوها

3.1: الگوی را از دایرکتوری در یک صفحه کپی کنید

اینجا، من استفاده می کنم این الگوی بخش پاورقی توسط FirstWebGeek از فهرست الگوها. الگو را با انتخاب دکمه "Copy Pattern" کپی کرده و مستقیماً آن را در صفحه جدید قرار دهید.

3.2: سفارشی سازی دلخواه را انجام دهیدs

من فقط چند تغییر در رنگ فونت ها و پس زمینه دکمه انجام دادم. سپس کل کد را از قسمت کپی کنید ویرایشگر کد به کلیپ بورد

اگر با استفاده از ویرایشگر کد آشنایی ندارید، به گزینه ها (با سه نقطه، بالا سمت راست) بروید، روی دکمه ویرایشگر کد کلیک کنید و کل کد را از اینجا کپی کنید.

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 الگو، به هر پست یا صفحه ای بروید و نماد درج کننده (نماد آبی به اضافه، بالا سمت چپ) را انتخاب کنید، و سپس دسته بندی "TT2 Gopher – Footer" را انتخاب کنید. الگوی جدید اضافه شده در پانل سمت چپ همراه با سایر الگوهای پاورقی و پیش نمایش آن در سمت راست (در صورت انتخاب) نشان داده شده است:

ثبت الگوها به طور مستقیم در theme.json پرونده

در وردپرس 6.0 امکان ثبت هر الگوی دلخواه از دایرکتوری الگو با آن وجود دارد theme.json فایل با نحو زیر را 6.0 حالات یادداشت توسعه دهنده، "فیلد الگوها آرایه ای از [راب های الگو] از فهرست الگوها. Slugs الگو را می توان توسط [URL] در نمای تک الگوی در فهرست الگوها استخراج کرد."

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

این ویدیوی کوتاه ویژگی های وردپرس 6.0 نشان می دهد که چگونه الگوها در آن ثبت می شوند /patterns پوشه (در ساعت 3:53) و ثبت الگوهای مورد نظر از مدیر الگو در الف 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 -->', )
);

این ویژگی در حال حاضر است محدود به نوع پست صفحه فقط و نه برای «نوع پست پست»، هنوز.

La مودال الگوی ایجاد صفحه همچنین می‌توان با حذف نوع بلوک پست محتوای همه الگوها، آن را به طور کامل غیرفعال کرد. نمونه کد نمونه در اینجا در دسترس است.

شما می توانید بحث GitHub را از لینک های فهرست شده در بخش منابع زیر دنبال کنید و در آن شرکت کنید.

استفاده از دایرکتوری الگوها برای ساخت صفحه

از الگوهای دایرکتوری نیز می توان برای ایجاد پست یا طرح بندی صفحه مورد نظر، مشابه سازندگان صفحه استفاده کرد. این گوتنبرگ هاب تیم ایجاد کرده است یک برنامه آزمایشی صفحه ساز آنلاین با استفاده از الگوها به طور مستقیم از دایرکتوری (ویدئو مقدماتی). سپس کدهای برنامه را می توان در یک سایت کپی و جایگذاری کرد، که فرآیند طرح بندی صفحه پیچیده ساختمان را بدون کدنویسی بسیار ساده می کند.

In این فیلم کوتاه، جیمی مارسلند (در ساعت 1:30) نشان می دهد که چگونه می توان از برنامه برای ایجاد یک صفحه آرایی کامل مشابه صفحه ساز با استفاده از بخش های صفحه دلخواه دایرکتوری استفاده کرد.

پسگفتار

الگوها به کاربران این امکان را می‌دهند که طرح‌بندی محتوایی که معمولاً مورد استفاده قرار می‌گیرند (مثلاً صفحه قهرمان، فراخوانی و غیره) را در هر صفحه‌ای بازسازی کنند و موانع ارائه محتوا به سبک‌هایی را که قبلاً بدون مهارت‌های کدنویسی امکان‌پذیر نبودند، کاهش دهند. درست مثل پلاگین ها و تم دایرکتوری ها، جدید الگوهای فهرست گزینه هایی را به کاربران ارائه می دهد تا از طیف گسترده ای از الگوهای انتخابی خود از دایرکتوری الگو استفاده کنند و محتوا را به سبک بنویسند و نمایش دهند.

در واقع، الگوهای بلوک همه چیز را تغییر خواهند داد و مطمئنا این یک است تعویض بازی ویژگی در چشم انداز قالب وردپرس. زمانی که پتانسیل کامل از ساختمان با الگوها تلاش در دسترس قرار می‌گیرد، این روشی را که ما طرح‌های بلاک را طراحی می‌کنیم تغییر می‌دهد و محتوای زیبا را حتی با دانش کم‌کد ایجاد می‌کنیم. برای بسیاری از طراحان خلاق، دایرکتوری الگوها همچنین ممکن است راه مناسبی برای نمایش آنها فراهم کند خلاقیت.

---

منابع

وردپرس 6.0

• راهنمای فیلد وردپرس 6.0 (هسته وردپرس)
• بررسی وردپرس 6.0: تغییرات سبک، رابط کاربری مسدود کردن قفل، بهبود نوشتن – ویدیوی ۲۲ دقیقه ای (آن مک کارتی)
• ویژگی های وردپرس 6.0 در 4 دقیقه (دیو اسمیت)
• ویژگی های جدید وردپرس 6.0: بلوک های جدید، تغییر سبک، ویرایش قالب، Webfonts API و بسیاری موارد دیگر (Kinsta)

ایجاد الگوها

• مقدمه ای بر الگوهای بلوک (ویرایش کامل سایت)
• ویدیوی آشنایی با الگوهای بلوک, 14 دقیقه (یادگیری وردپرس)
• بلوک الگوها (راهنمای ویرایشگر بلوک)
• بنابراین می خواهید الگوهای بلوکی بسازید؟ (وبلاگ وردپرس)
• نحوه ایجاد و اشتراک گذاری الگوهای بلاک کم کد در وردپرس (بابا خدا)

بهبود الگوها (GitHub)

• ساختمان با الگوهای #38529
• الگوها به عنوان عناصر بخش بندی #39281
• افزودن: گزینه ای برای انتخاب الگو در ایجاد صفحه. #40034
• بلوک الگوها برای ایجاد صفحه #38787
• افزودن: گزینه های شروع صفحه (الگوها و الگوها) #39147

مقالات وبلاگ

• الگوهای گوتنبرگ: آینده صفحه سازی در وردپرس (ریچ تابور)
• استفاده از Block Pattern ها برای سرعت بخشیدن به ساخت سایت وردپرس (بابا خدا)
• الگوهای بلوک همه چیز را تغییر خواهند داد (میخانه WP)

---

نحوه ایجاد الگوهای تم بلوکی در وردپرس 6.0 در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/