نحوه ساخت قالب های بلوک وردپرس

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

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

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

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

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

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

لازم به ذکر است که قالب های بلوک وردپرس با فایل های قالب متفاوت است. فایل‌های قالب به فایل‌های PHP مانند index.php، page.php و single.php گفته شده که طبق سلسله مراتب قالب وردپرس، هم با تم‌های کلاسیک و هم با تم‌های بلوکی کار می‌کنند. در تم‌های کلاسیک، این فایل‌ها با PHP و HTML نوشته می‌شوند. در تم‌های بلوک، این فایل‌ها کاملاً از بلوک ساخته شده‌اند. توجه داشته باشید که قالب های بلوک وردپرس با الگوهای بلاک وردپرس متفاوت است.

ساخت قالب های بلوک وردپرس با استفاده از PHP

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

<?php
/*
 * Plugin Name:       My Block Templates
 * Plugin URI:        https://example.com/
 * Description:       An example plugin
 * Version:           1.0
 * Requires at least: 5.5
 * Requires PHP:      8.0
 * Author:            Your name
 * Author URI:        https://author.example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Update URI:        https://example.com/my-plugin/
 */

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

در کد بالا، get_post_type_object یک نوع پست را بر اساس اسم آن بازیابی می‌کند. برای ساخت قالب های بلوک وردپرس ابتدا فایل خود را در پوشه wp-content/plugins ذخیره کنید، به صفحه Plugins در داشبورد وردپرس خود بروید و افزونه My Block Templates را فعال کنید. هنگامی که یک پست جدید ایجاد می‌کنید، ویرایشگر به طور خودکار قالب های بلوک وردپرس شما را با یک بلوک تصویر، یک عنوان و یک پاراگراف راه اندازی می‌کند.

ساخت قالب های بلوک وردپرس با استفاده از PHP

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

function myplugin_register_my_block_template() {

	$block_template = array(
		array( 'core/image' ),
		array( 'core/heading', array(
			'placeholder'	=> 'Add H2...',
			'level'			=> 2
		) ),
		array( 'core/paragraph', array(
			'placeholder'	=> 'Add paragraph...'
			
		) ),
		array( 'core/columns', 
			array(), 
			array( 
				array( 'core/column',
					array(),
					array(
						array( 'core/image' )
					)
				), 
				array( 'core/column',
					array(),
					array(
						array( 'core/heading', array(
							'placeholder'	=> 'Add H3...',
							'level'			=> 3
						) ),
						array( 'core/paragraph', array(
							'placeholder'	=> 'Add paragraph...'
						) )
					) 
				)
			) 
		)
	);
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );

خروجی کد بالا را در تصویر زیر مشاهده می کنید:

 استفاده از PHP برای ساخت قالب های بلوک وردپرس با

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

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'page' );
	$post_type_object->template = array(
		array( 'core/pattern', array(
			'slug' => 'my-plugin/my-block-pattern'
		) ) 
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

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

<?php
function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'book' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

اکنون که می‌دانید چگونه قالب های بلوک وردپرس ایجاد کنید، می‌توانیم موارد زیر را نیز بررسی کنیم:

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

قالب‌ها را با انواع پست سفارشی مسدود کنید

همانطور که قبلا ذکر کردیم، می‌توانید قالب های بلوک وردپرس را به یک نوع پست سفارشی متصل کنید. شما می‌توانید این کار را پس از اینکه نوع پست سفارشی شما قبلاً ثبت شده است انجام دهید، اما ممکن است ترجیح دهید برای ثبت نوع پست سفارشی یک قالب بلوک تعریف کنید. در این حالت می‌توانید از آرگومان‌های template و template_lock تابع register_post_type استفاده کنید:

function myplugin_register_book_post_type() {
	$args = array(
		'label' => esc_html__( 'Books' ),
		'labels' => array(
			'name' => esc_html__( 'Books' ),
			'singular_name' => esc_html__( 'Book' ),
		),
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'show_in_rest' => true,
		'rest_namespace' => 'wp/v2',
		'has_archive' => true,
		'show_in_menu' => true,
		'show_in_nav_menus' => true,
		'supports' => array( 'title', 'editor', 'thumbnail' ),
		'template' => array(
			array( 'core/paragraph', array(
				'placeholder'	=> 'Add paragraph...'
			) ),
			array( 'core/columns', 
				array(), 
				array( 
					array( 'core/column',
						array(),
						array(
							array( 'core/image' )
						)
					), 
					array( 'core/column',
						array(),
						array(
							array( 'core/heading', array(
								'placeholder'	=> 'Add H3...',
								'level'			=> 3
							) ),
							array( 'core/paragraph', array(
								'placeholder'	=> 'Add paragraph...'
							) )
						) 
					)
				)
			)
		)
	);
	register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

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

قالب های بلوک وردپرس را با انواع پست سفارشی مسدود کنید

وقتی طرح بندی تمام شد، می‌توانید تنظیمات بلوک را تغییر دهید تا رفتار و ظاهر قالب بلوک خود را به خوبی تنظیم کنید.

تنظیم دقیق قالب های بلوک وردپرس با ویژگی‌های بلوک

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

$template = array( 'core/columns', 
	// attributes
	array(), 
	// nested blocks
	array(
		array( 'core/column' ),
		array( 'core/column' ) 
	) 
);

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

تنظیم دقیق قالب های بلوک وردپرس با ویژگی‌های بلوک

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

جداکننده‌های بلوک

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

$template = array( 'core/columns', 
	array(
		'verticalAlignment'	=> 'center',
		'align'				=> 'wide',
		'style'				=> array( 
			'border'	=> array(
				'width'	=> '2px',
				'radius'	=> array(
					'topLeft'		=> '12px', 
					'topRight'		=> '12px', 
					'bottomLeft'	=> '12px', 
					'bottomRight'	=> '12px'
				)
			)
		),
		'backgroundColor' => 'tertiary'
	),
	array(
		array( 'core/column' ),
		array( 'core/column' ) 
	) 
);

فرآیند را برای هر بلوک در قالب تکرار کنید تا کارتان تمام شود.

$template = array(
	array( 'core/paragraph', array(
		'placeholder'	=> 'Add paragraph...'
	) ),
	array( 'core/columns', 
		array(
			'verticalAlignment'	=> 'center',
			'align'				=> 'wide',
			'style'				=> array( 
				'border'	=> array(
					'width'		=> '2px',
					'radius'	=> array(
						'topLeft'		=> '12px', 
						'topRight'		=> '12px', 
						'bottomLeft'	=> '12px', 
						'bottomRight'	=> '12px'
					)
				)
			),
			'backgroundColor' => 'tertiary',
			'lock' => array(
				'remove'	=> true,
				'move'		=> true
			)
		), 
		array( 
			array( 'core/column',
				array( 'verticalAlignment'	=> 'center' ),
				array(
					array( 'core/image', 
						array(
							'style'	=> array( 'border' => array( 'radius' => '8px' ) ) 
						) 
					)
				)
			), 
			array( 'core/column',
				array( 'verticalAlignment'	=> 'center' ),
				array(
					array( 'core/heading', array(
						'placeholder'	=> 'Add H3...',
						'level'			=> 3
					) ),
					array( 'core/paragraph', array(
						'placeholder'	=> 'Add paragraph...'
					) )
				) 
			)
		)
	)
);

قفل کردن بلوک ها

می توانید بلوک‌های خاص یا همه بلوک‌های موجود در قالب خود را با استفاده از ویژگی template_lock مربوط به $post_type_object قفل کنید.

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

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
	$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );

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

قفل کردن بلوک ها

کاربران می‌توانند بلوک‌ها را از منوی گزینه‌های موجود در نوار ابزار بلوک باز کنند.

باز کردن بلوک ها از منو برای قفل کردن

هنگامی که روی Unlock کلیک می‌کنید، یک پنجره باز می‌شود و به شما این امکان را می‌دهد که enable/disable movement, prevent removal یا هر دو جلوگیری کنید:

کلیک روی Unlock برای باز کردن قفل بلوک‌ها

template_lock می‌تواند یکی از کارهای زیر را انجام دهد:

  • all – از اضافه کردن بلوک‌های جدید، جابجایی و حذف بلوک‌های موجود توسط کاربران جلوگیری می‌کند.
  • insert – از اضافه کردن بلوک‌های جدید و حذف بلوک‌های موجود توسط کاربران جلوگیری می‌کند.
  • contentOnly – کاربران فقط می‌توانند محتوای بلوک‌های موجود در قالب را ویرایش کنند. توجه داشته باشید که contentOnly فقط در سطح الگو یا الگو قابل استفاده است و باید با کد مدیریت شود. (همچنین به قفل کردن APIها مراجعه کنید).
استفاده از template_lock

اگر می‌خواهید بلوک‌های خاصی را قفل کنید، می‌توانید از ویژگی lock در هر بلوک استفاده کنید:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph', array(
			'lock' => array(
				'remove'	=> true,
				'move'		=> true
			)
		) )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

ویژگی lock می‌تواند یکی از مقادیر زیر را داشته باشد:

  • remove: از حذف بلوک توسط کاربران جلوگیری می‌کند.
  • move: از جابجایی بلوک توسط کاربران جلوگیری می‌کند.

همچنین می‌توانید از lock همراه با template_lock برای تنظیم دقیق رفتار بلوک‌های موجود در قالب های بلوک وردپرس استفاده کنید. در مثال زیر، ما در حال قفل کردن تمام بلوک‌ها به جز heading (عنوان) هستیم:

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

جهت مشاوره و کسب اطلاعات بیشتر از طریق واتساپ با شماره ۰۹۹۹۹۹-۱۵۸-۱۱ در تماس باشید.

پروژه محور - ارتباط مستقیم با مدرس

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading', array(
			'lock' => array(
				'remove'	=> false,
				'move'		=> false
			) 
		) ),
		array( 'core/paragraph' )
	);
	$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );

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

قالب بلوک را با بلوک‌های قفل شده و قفل نشده

توسعه دهندگان بلوک همچنین می‌توانند از ویژگی lock در تعریف بلوک در سطح attributes استفاده کنند (همچنین به Individual block locking مراجعه کنید).

جلوگیری از باز کردن قفل بلوک توسط کاربران

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

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

تابع callback که با این فیلتر استفاده می کنید دو پارامتر دارد:

  • $settings: مجموعه‌ای از تنظیمات ویرایشگر.
  • $context: نمونه‌ای از کلاس WP_Block_Editor_Context، یک شی که حاوی اطلاعاتی درباره ویرایشگر بلوکی است که در حال ارائه است.

کاری که باید انجام دهید این است که $settings['canLockBlocks'] را فیلتر کنید و آن را مطابق با مثال زیر روی true یا false تنظیم کنید:

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		if ( $context->post && 'book' === $context->post->post_type ) {
			$settings['canLockBlocks'] = false;
		}
		return $settings;
	}, 10, 2
);

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

در مثال زیر، ما بررسی می‌کنیم که آیا کاربر فعلی می‌تواند پست‌های دیگران را ویرایش کند (به عبارت دیگر، اگر نقش کاربر فعلی ویرایشگر یا بالاتر باشد):

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		if ( $context->post && 'book' === $context->post->post_type ) {
			$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
		}
		return $settings;
	}, 10, 2
);

تصاویر زیر وضعیت اولیه ویرایشگر را برای یک مدیر و یک نویسنده مقایسه می کند. ابتدا مدیر:

نمایش وضعیت اولیه ویرایشگر برای مدیر

حال، نویسنده:

نمایش وضعیت اولیه ویرایشگر برای نویسنده
Screenshot

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

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		$user = wp_get_current_user();
		if ( in_array( $user->user_email, [ 'email@example.com' ], true ) ) {
			$settings['canLockBlocks'] = false;
		}
		return $settings;
	}, 10, 2
);

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

غیر فعال کردن ویرایشگر کد برای نقش های کاربر خاص

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

add_filter( 'block_editor_settings_all', 
	function( $settings, $context ) {
		if ( $context->post && 'book' === $context->post->post_type ) {
			$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
			$settings['codeEditingEnabled'] = current_user_can( 'edit_others_posts' );
		}
		return $settings;
	}, 10, 2
);

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

غیر فعال کردن ویرایشگر کد برای نقش های کاربر خاص

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

نحوه ساخت قالب های بلوک وردپرس با استفاده از جاوا اسکریپت

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

InnerBlocks یک جفت مؤلفه را صادر می کند که می‌تواند در پیاده سازی بلوک برای فعال کردن محتوای بلوک تودرتو استفاده شود. – منبع: InnerBlocks

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

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';

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

const TEMPLATE = [
	[ 'core/paragraph', { 'placeholder': 'Add paragraph...' } ],
	[ 'core/columns', { verticalAlignment: 'center' }, 
		[
			[ 
				'core/column', 
				{ templateLock: 'all' }, 
				[
					[ 'core/image' ]
				]
			],
			[ 
				'core/column', 
				{ templateLock: 'all' }, 
				[
					[ 
						'core/heading', 
						{'placeholder': 'Add H3...', 'level': 3}
					], 
					[ 
						'core/paragraph', 
						{'placeholder': 'Add paragraph...'} 
					]
				], 
			]
		]
	]
];
registerBlockType( metadata.name, {
	title: 'My Template',
	category: 'widgets',
	edit: ( props ) => {
		return(
			<div>
				<InnerBlocks
					template={ TEMPLATE }
					templateLock="insert"
				/>
			</div>
		)
	},
	save() {
		const blockProps = useBlockProps.save();
		return(
			<div { ...blockProps }>
				<InnerBlocks.Content />
			</div>
		)
	}
} );

این کد کاملاً ساده است. باید توجه داشته باشید که ما از ویژگی templateLock برای ساخت قالب های بلوک وردپرس دو بار استفاده کردیم، ابتدا در سطح بلوک، سپس در داخل عنصر InnerBlocks. برای فهرست کامل لوازم موجود، به مرجع InnerBlocks و راهنمای ویرایشگر Block مراجعه کنید.

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

npx @wordpress/create-block template-block

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

cd template-block
npm start

داشبورد مدیریت وردپرس خود را راه اندازی کنید و به صفحه افزونه‌ها بروید. افزونه Template Block خود را پیدا و فعال کنید. در ویرایشگر کد مورد علاقه خود، فایل index.js را که در زیر پوشه src یافتید، باز کنید. کد بالا را کپی و جایگذاری کنید، index.js خود را ذخیره کنید، و دوباره در داشبورد وردپرس، یک پست یا صفحه جدید ایجاد کنید. درج کننده بلوک را باز کنید و به قسمت ابزارک‌ها بروید. در آنجا باید بلوک سفارشی خود را پیدا کنید.

نحوه ساخت قالب های بلوک وردپرس با استفاده از جاوا اسکریپت

آن را به پست اضافه کنید، محتوا را سفارشی سازی کنید و پست را ذخیره کنید.

سفارشی سازی محتوا و ذخیره پست

اگر به ویرایشگر کد بروید، نشانه گذاری زیر را مشاهده خواهید کرد:

<!-- wp:create-block/template-block -->
<div class="wp-block-create-block-template-block"><!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"placeholder":"Add H3..."} -->
<h3 class="wp-block-heading"></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:create-block/template-block -->

اکنون نتیجه را در مرورگری که می‌خواهید پیش نمایش کنید. اگر ظاهر بلوک شما نیاز به بهبود دارد، می‌توانید به راحتی استایل‌ها را در فایل style.scss خود تغییر دهید. هنگامی که از سفارشی سازی‌های خود راضی بودید، روند را متوقف کرده و npm run build را اجرا کنید. تمام فایل‌های پروژه شما فشرده شده و در پوشه ساخت جدید برای تولید در دسترس خواهند بود. اکنون می‌توانید قالب های بلوک وردپرس بسیازید و قالب‌های پیشرفته بلوک‌ها را ایجاد کنید که می‌توانید تنها با چند کلیک آن‌ها را در محتوای خود قرار دهید.

جمع بندی

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

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

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

خدمات طراحی سایت

طراحی سایت مطابق با استانداردهای روز برنامه‌نویسی، به همراه آموزش استفاده و ۶ ماه پشتیبانی رایگان