نحوه ساخت الگوهای بلوک وردپرس (Block Patterns)

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

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

در این مقاله، نحوه ساخت الگوهای وردپرس را بررسی خواهیم کرد. Block Patterns برای اولین بار با وردپرس 5.5 معرفی شد تا به مدیران سایت و سازندگان محتوا اجازه دهند تا ساختارهای پیچیده آماده برای استفاده از بلوک‌های تودرتو را تنها با چند کلیک در محتوای خود بگنجانند.

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

• Call to action
• Default Footer
• Hidden 404
• Hidden Comments
• Hidden No Results Content
• Post Meta

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

علاوه بر این، می‌توانید تعداد نامحدودی از الگوهای بلوک وردپرس سفارشی را با استفاده از Patterns API یا ابزارهای ویرایش موجود در ویرایشگر بلوک ایجاد کنید. می‌توانید از الگوهای بلوک وردپرس سفارشی به صورت داخلی در وب سایت خود استفاده کنید، آن‎‌ها را به وب سایت های دیگر صادر کنید یا آن‌ها را به صورت عمومی در فهرست الگوها (Patterns) به اشتراک بگذارید.

• 5 روش برای مخفی کردن صفحات وردپرس از نتایج گوگل
• ساخت فرم چند مرحله ای در وردپرس با افزونه Gravity Forms
• معرفی 11 افزونه صفحه ساز وردپرس

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

• الگوهای بلوک از پیش ساخته شده
• الگوهای بلوک سفارشی
• قطعات قالب
• تفاوت بین الگوهای از پیش ساخته شده، الگوهای سفارشی و قطعات الگو

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

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

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

می‌توانید الگوهای بلوک وردپرس از پیش ساخته شده را از زبانه الگوها در Block Inserter مرور و وارد کنید، به بخش مدیریت الگوها در ویرایشگر سایت یا دایرکتوری الگوها از طریق دکمه Explore all patterns در Block Inserter بروید.

تعداد زیادی الگو را در برگه block inserter (الگوهای درج کننده بلوک) یا Block Pattern library را مستقیماً از رابط ویرایشگر پیدا خواهید کرد.

همچنین می‌توانید از وب سایت Block Pattern استفاده کنید ابتدا باید یک الگو را انتخاب کنید و روی Copy کلیک کنید.

هنگامی که یک الگو را کپی کردید، آن را در محتوای سایت خود قرار دهید تا کارتان تمام شود.

شما می‌توانید گروه بلوک‌های موجود در الگو را بدون تأثیر بر الگوی ثبت شده یا هر نمونه اضافی از آن در وب سایت خود سفارشی سازی کنید.

همانطور که ابتدای مقاله ذکر شد، با وردپرس 6.3 سیستم الگوهای بلوک کارآمدتر و سازگارتر شده است. اکنون برای کاربر آسان‌تر است که الگوهای بلوک وردپرس سفارشی را مستقیماً از ویرایشگر بلاک ایجاد کند و آن‌ها را از داشبورد وردپرس بدون نیاز به کار با کد مدیریت کند. اکنون می‌توانید الگوهای بلوک وردپرس زیر را بسازید:

• الگوهای بلوک وردپرس همگام‌سازی شده
• الگوهای بلوک وردپرس استاندارد

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

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

از دیدگاه توسعه‌دهنده، الگوهای بلوک وردپرس سفارشی در پایگاه داده وردپرس به‌عنوان انواع پست سفارشی wp_block ثبت می‌شوند و یک فیلد متا wp_block_sync_status وضعیت همگام‌سازی یک الگو را ذخیره می‌کند.

به لطف سیستم جدید مدیریت الگو، اکنون می‌توانید الگوهای بلوک وردپرس همگام سازی شده و همگام نشده را مستقیماً از سایت یا ویرایشگر پست ایجاد کنید. شما فقط باید طرح بندی بلوک خود را طراحی کنید، بلوک ها را انتخاب کنید و روی نماد سه نقطه در نوار ابزار بلوک کلیک کنید. سپس از منوی کشویی Create pattern/reusable block را انتخاب کنید. در مثال زیر، یک الگوی همگام‌سازی شده از یک بلوک گروه، یک عنوان، یک پاراگراف، یک دکمه و چند فاصله ایجاد می‌کنیم.

وقتی روی Create pattern/reusable block کلیک کنید، از شما خواسته می‌شود که یک نام برای الگوی خود وارد کنید و تصمیم بگیرید که آیا الگوی همگام‌سازی شده است یا نه.
اکنون الگوی همگام‌سازی شده شما در بخش مدیریت Patterns در ویرایشگر سایت در زیر My Patterns فهرست شده است.

در اینجا می‌توانید الگوهای خود را پیش‌نمایش کنید و وضعیت همگام‌سازی الگو را بررسی کنید.

سپس می‌توانید ویرایشگر الگو را راه اندازی کنید و الگوی بلوک خود را سفارشی سازی کنید.

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

سپس به ویرایشگر کد بروید و کد را بررسی کنید. بلوک همگام‌سازی شده توسط کد زیر ایجاد می‌شود:

<!-- wp:block {"ref":94} /-->

وردپرس پست را با شناسه 94 واکشی می کند تا HTML را برای رندر روی صفحه ایجاد کند. بلوک استاندارد (همگام‌سازی نشده) با شناسه شناسایی نمی‌شود. در این حالت، ویرایشگر کد کل نشانه گذاری بلوک‌های تشکیل دهنده الگو را نگه می‌دارد.

الگوهای همگام‌سازی شده به ویژه برای ساختن عناصری که ممکن است بخواهید در چندین صفحه وب‌سایت خود و یا در وب‌سایت‌های مختلف قرار دهید مانند فراخوان‌ها، بنرهای تبلیغاتی، جداول قیمت و غیره مفید هستند. در Block inserter، الگوهای بلوک وردپرس سفارشی در دو زبانه جداگانه فهرست شده است. الگوهای استاندارد در برگه Patterns در دسته My patterns فهرست شده‌اند.

الگوهای همگام‌سازی شده در برگه Synced patterns (بلوک‌های قابل استفاده مجدد قبلی) فهرست شده‌اند.

همانطور که اشاره کردیم، وردپرس الگوهای بلاک وردپرس سفارشی را به عنوان انواع پست wp_block در نظر می‌گیرد و به این ترتیب، آن‌ها را در جدول wp_posts ذخیره می‌کند.

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

• افزودن /wp-admin/edit.php?post_type=wp_block به URL وردپرس وب سایت.
• با کلیک بر روی دکمه Manage My patterns در Block inserter.
• با کلیک بر روی دکمه Manage All of my patterns در ویرایشگر سایت.

در ادامه می‌توانید:

• الگوی خود را به‌عنوان JSON ویرایش، حذف کنید یا صادر کنید،
• وارد کردن الگوها از JSON،
• الگوهای جدید ایجاد کنید.

تمام تغییرات در یک الگوی همگام‌سازی شده برای هر اتفاقی از آن الگو در کل وب‌سایت شما اعمال می‌شود، صرف نظر از صفحه مدیریتی که در آن تغییرات ایجاد شده است.

قبل از استفاده گوتنبرگ، قالب‌های وردپرس عمدتاً با PHP ساخته می‌شدند. دانش کامل در مورد مضامین کودک، سلسله مراتب قالب و زبان‌های اصلی توسعه front-end الزامات اساسی برای ایجاد یا سفارشی کردن قالب‌ها بود، اما همه چیز با معرفی تم‌های بلوکی تغییر کرد. در تم‌ها و بولک‌های کلاسیکی که این ویژگی را دارندف می‌توانید به راحتی یک الگو یا بخش الگو را به راحتی در رابط ویرایشگر سایت ایجاد یا سفارشی کنید. قالب بلوک لیستی از موارد بلوک است. نمونه‌هایی از موارد بلوک عبارتند از:

• عنوان سایت
• لوگو
• ناوبری

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

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

به طور خلاصه، در اینجا تفاوت‌های مهمی بین این سه مورد وجود دارد:

• الگوهای بلوک وردپرس از پیش ساخته شده، طرح‌بندی بلوک‌های از پیش تعریف‌شده‌ای هستند که می‌توانید آن‌ها را به محتوای خود اضافه کنید و با استفاده از ابزارهای مشابه بلوک‌های موجود، آن‌ها را سفارشی کنید. تغییراتی که در یک الگوی بلوک ایجاد می‌شود، تنها بر آن نمونه از الگوی بلوک تأثیر می‌گذارد.
• می توانید الگوهای بلوک وردپرس از پیش ساخته شده را از دایرکتوری Pattern کپی و جایگذاری کنید.
• می‌توانید الگوهای جدیدی ایجاد کنید و آن‌ها را در فهرست الگوها منتشر کنید.

• الگوهای بلوک وردپرس سفارشی گروه‌هایی از بلوک‌های همگام‌سازی یا همگام‌نشده هستند که می‌توانید در هر پست یا صفحه وب‌سایت خود استفاده کنید.
• الگوهای بلوک سفارشی در جدول wp_posts به عنوان نوع پست wp_block ذخیره می‌شوند.
• می‌توانید الگوهای بلوک وردپرس سفارشی را از وب سایت‌های دیگر وارد و صادر کنید.

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

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

همراه با ویژگی الگوهای بلوک وردپرس، وردپرس 5.5 یک API جدید برای توسعه دهندگان معرفی کرد تا «بلوک‌های از پیش طراحی‌شده محتوایی را ایجاد کنند که به راحتی در پست‌ها، صفحات، انواع پست‌های سفارشی و قالب‌ها درج شوند». API جدید توابع register_block_pattern و register_block_pattern_category را برای ثبت الگوهای بلوک وردپرس و دسته بندی الگوها فراهم می‌کند. با شروع وردپرس 6.0، می‌توانید الگوهای بلوک را با یک فایل PHP نیز ثبت کنید. بنابراین، می‌توان گفت شما دو راه برای ایجاد الگوهای بلوک وردپرس دارید.

• با استفاده از تابع helper register_block_pattern
• افزودن یک فایل PHP به تم خود در پوشه الگوها

روش اول عمدتاً برای توسعه دهندگان وردپرس در نظر گرفته شده است اما به اندازه کافی ساده است که توسط توسعه دهندگان غیر پیشرفته نیز استفاده شود.

اگر تصمیم دارید از روش اول برای ساخت الگوهای بلوک وردپرس استفاده کنید، می‌توانید با استفاده از دو تابع جدید register_block_pattern و register_block_pattern_category در فایل PHP یک افزونه یا functions.php موضوع خود، یک الگوی بلوک ایجاد کنید.

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

• برجسته (featured)
• پست ها (posts)
• متن (text)
• گالری (gallery)
• فراخوانی برای اقدام (Call-to-Action)
• بنرها (banner)
• سربرگ (header)
• پاورقی (footer)
• تیم (team)
• گواهینامه ها (testimonials)
• خدمات (services)
• نمونه کارها (portfolio)
• رسانه (media)

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

• $category_name: نام دسته الگو شامل فضای نام.
• $category_properties: آرایه ای از ویژگی های دسته.

یک مثال به شما در درک بهتر نحوه ثبت یک دسته الگوی جدید کمک می کند:

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', 
			array(
				'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
				'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

هنگامی که دسته الگو ثبت شد، مرحله بعدی ثبت خود الگوی بلوک است. الگوی بلوک را با استفاده از تابع helper register_block_pattern به صورت زیر ثبت خواهید کرد:

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

این تابع دو آرگومان می‌گیرد:

1. $pattern_name: یک نام قابل خواندن توسط ماشین به شکل namespace/pattern-name.
2. $pattern_properties: آرایه ای از خواص برای الگو.

در ادامه لیستی از ویژگی های الگوی موجود در حال حاضر را آوردیم:

• title (الزامی): عنوان قابل خواندن برای انسان برای الگو.
• content (الزامی): نشانه گذاری HTML برای الگو.
• description: متنی که الگوی درج کننده را توصیف می‌کند. این توضیحات اختیاری بوده اما توصیه می‌شود، زیرا به کاربران کمک می‌کند الگو را پیدا کنند.
• categories: آرایه‌ای از یک یا چند دسته الگوی ثبت شده. قبل از اینکه بتوانید از آن در اینجا استفاده کنید، باید یک دسته را ثبت کنید (به بخش قبلی مراجعه کنید).
• keywords: مجموعه‌ای از کلمات کلیدی که به کاربران کمک می‌کند الگو را پیدا کنند.
• viewportWidth: یک عدد صحیح که عرض الگو را در پیش نمایش مشخص می‌کند.
• blockTypes: آرایه اختیاری از انواع بلوک که با الگو استفاده می‌شود.
• postTypes: آرایه‌ای از انواع پست که مجاز به استفاده از الگو هستند.
• templateTypes: آرایه‌ای از انواع قالب که الگوی آن منطقی است (از وردپرس 6.2 موجود است).
• inserter: یک بولی برای تعیین اینکه آیا الگو باید در بلوک درج کننده قابل مشاهده باشد یا خیر. برای پنهان کردن الگو، مقدار را روی false قرار دهید. به طور پیش فرض، تمام الگوها در درج کننده بلوک ظاهر می‌شوند.

در اینجا نمونه‌ای از استفاده از register_block_pattern آورده شده است:

if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', 
			array(
				'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
				'categories'	=> array( 'my-pattern-category' ),
				'postTypes'		=> array( 'post' ),
				'content'		=> '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

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

'postTypes' => array( 'product' ),

اکنون یک پست جدید (یا نوع پست سفارشی) ایجاد کنید، درج کننده بلوک را باز کنید و روی برچسب Patterns کلیک کنید. شما باید یک دسته الگوی جدید (دسته الگوی من) با الگوی بلوک سفارشی خود پیدا کنید. برای سفارشی کردن الگوهای بلوک خود به راحتی با ویژگی های الگو بازی کنید. حالا بیایید یک الگوی بلاک در دنیای واقعی بسازیم.

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

برای مثال می‌توان به کد زیر اشاره کرد:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

اکنون می‌توانید این کد را بهینه کنید. اگر الگوی بلوک را با یک افزونه ثبت می‌کنید، باید URL تصویر را به صورت زیر تغییر دهید:

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

به این ترتیب، وردپرس تصویر را در آپلودها جستجو نمی‌کند، بلکه در پوشه تصاویر افزونه شما جستجو می‌کند. سپس می‌توانید از ویژگی viewportWidth برای ارائه پیش‌نمایش بهتری از الگوی درج کننده بلوک استفاده کنید:

'viewportWidth' => 800,

گزینه دیگری برای کمک به کاربران برای یافتن بلوک در جستجوها، افزودن آرایه ای از انواع بلوک است:

'blockTypes' => array( 'core/button' ),

کاربر یکی از بلوک‌های مشخص شده را جستجو می‌کند، الگوی بلوک در پیشنهادات ظاهر می‌شود. ویژگی postTypes به شما امکان می‌دهد الگوی بلوک را فقط برای انواع پست‌های خاص در دسترس قرار دهید. به عنوان مثال، می‌توانید الگو را فقط برای نوع پست product (محصول) قابل مشاهده کنید:

'postTypes' => array( 'product' ),

در نهایت، می‌توانید یک کلاس CSS را به پوشش الگوی بلوک خود اضافه کنید. برای انجام این کار، باید یک گروه جدید با ویژگی className ایجاد کنید:

<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
	<!-- Your blocks -->
</div>
<!-- /wp:group -->

توجه داشته باشید که باید همان نام کلاس را به عنصر div زیر اضافه کنید. برای مشاهده دقیق‌تر الگوهای بلوک و نمونه‌های کد بیشتر، الگوهای مسدود کردن را در کتابچه راهنمای قالب WordPress.org نیز ببینید.

همانطور که در بالا ذکر شد، وردپرس 6.0 یک راه جدید و ساده‌تر برای اضافه کردن الگوهای بلاک به قالب های وردپرس شما معرفی کرد. اکنون می‌توانید به طور ضمنی الگوهای بلوک را با اعلام آن‌ها به عنوان فایل PHP در پوشه /patterns در ریشه تم خود ثبت کنید.

فرض کنید می‌خواهید به طور ضمنی همان الگوی بلوک ساخته شده در بخش قبلی را در موضوع بلوک خود ثبت کنید. در این مثال از تم بیست و سه استفاده خواهیم کرد.

می‌توانید پارامترهای مشابه روش قبلی را تنظیم کنید، اما آن‌ها را در یک نظر در هدر فایل قرار دهید. علاوه بر این، به جای استفاده از نام پارامترها در camelCase، کلمات را با فاصله جدا می‌کنید و به جای آرایه‌ها، از آیتم‌های لیست جدا شده با کاما استفاده می‌کنید.

ابتدا افزونه‌ای را که در مثال قبل برای ثبت الگو استفاده کردید غیرفعال کنید. سپس یک فایل my-block-pattern.php جدید ایجاد کنید و هدر زیر را وارد کنید:

<?php
/**
 * Title: My awesome pattern
 * Slug: twentytwentythree/my-block-pattern
 * Post Types: post
 * Categories: featured, banner
 * Viewport Width: 800
 * Keywords: Call to action, Kinsta
 * Block Types: core/buttons
 */
?>

در مرحله بعد، محتوا را به الگوی بلوک خود اضافه می‌کنید. می‌توانید از همان نشانه‌گذاری مثال قبلی ما استفاده کنید، اما ابتدا باید آن را کمی تغییر دهید:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

URL تصویر مکان‌نما اکنون توسط تابع get_theme_file_uri تولید می‌شود:

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

البته ابتدا باید تصویر placeholder.jpg را در پوشه /assets/images تم خود قرار دهید. دستورالعمل زیر متنی را که می‌خواهید ترجمه کنید تولید می‌کند:

<?php echo __( 'View plans', 'text-domain' ); ?>

حالا فایل خود را ذخیره کنید و یک پست جدید ایجاد کنید. الگوی بلوک شما باید در دسته‌های ویژه و بنرها ظاهر شود.

توجه داشته باشید که کد PHP که به الگوی خود اضافه می‌کنید تنها زمانی اجرا می‌شود که الگو به محتوای شما اضافه شود. پس از قرار گرفتن در پست، الگوهای بلوک مانند بلوک‌های ایستا رفتار می‎‌کنند.

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

ابتدا، توسعه دهندگان تم می‌توانند پشتیبانی از الگوهای بلوک اصلی را حذف کنند و مجموعه ای از الگوهای خود را ارائه دهند. برای حذف پشتیبانی الگوی اصلی، می‌توانید از تابع remove_theme_support به این روش استفاده کنید:

remove_theme_support( 'core-block-patterns' );

توصیه می‌شود تابع remove_theme_support را به قلاب after_setup_theme متصل کنید.

در صورتی که می‌خواهید می‌توانید یک جایگزین سفارشی ارائه دهید و یا اگر نمی‌خواهید با طرح زمینه‌تان استفاده شود، الگوی بلوک خاصی را لغو ثبت کنید. الگوهای API تابع unregister_block_pattern را برای آن فراهم می‌کند:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

در صورتی که بتوانید الگوی بلوک اصلی را نیز لغو ثبت کنید، از موارد زیر استفاده خواهید کرد:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

شما از unregister_block_pattern با قلاب init استفاده خواهید کرد.

همچنین می‌توانید با متصل کردن تابع unregister_block_pattern_category به init، یک دسته الگو را لغو ثبت کنید:

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

همچنین می‌توانید الگوهای بلوک وردپرس خود را ایجاد کرده و با یک ابزار آنلاین رایگان مانند The Pattern Creator آن را به اشتراک بگذارید. اگر یک حساب WordPress.org دارید، می‌توانید از دایرکتوری Pattern به Pattern Creator دسترسی داشته باشید.

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

همچنین می‌توانید از تصاویر رایگان میزبانی شده توسط کتابخانه Openverse استفاده کنید.

هنگامی که از تغییرات خود راضی هستید، می‌توانید پیش نویس را ذخیره کنید یا الگو را برای بازبینی ارسال کنید.

سپس می‌توانید به فهرست الگوها برگردید و  My patterns را انتخاب کنید. در آنجا همه الگوهای خود را در سه صفحه‌ی زیر پیدا خواهید کرد:

• همه (All)
• پیش‌نویس‌ها (Drafts)
• بازبینی در انتظار (Pending Review)

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

• 0 تا 100 تنظیمات و نحوه استفاده از افزونه Yoast SEO در وردپرس
• نحوه جلوگیری از سرقت محتوا در وردپرس (5 روش)

همانطور که می‌دانید، وردپرس یک ابزار انتشار عالی است که توسط هزاران حرفه ای، توسعه دهنده و وبلاگ نویس ساده در سراسر جهان استفاده می شود. اختصاص زمان و منابع برای کسب مهارت‌های جدید در توسعه وردپرس و یادگیری در مورد ویژگی‌های پیشرفته مانند بلوک‌های سفارشی و الگوهای بلوک وردپرس می‌تواند یک سرمایه گذاری عالی برای حرفه شما به عنوان یک بازاریاب، طراح وب یا ناشر باشد. آیا قبلاً الگوهای بلوک ایجاد کرده‌اید؟ آیا چیزی را با جامعه به اشتراک گذاشته‌اید؟ ما دوست داریم خلاقیت‌های شما را ببینیم. نظر خود را با پیوند یا نظرات خود در مورد الگوهای بلوک بنویسید.