طراحی قالب وردپرس بایگانی

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

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

صدای من رو از گوتنبرگ می‌شنوید!

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

فیلتر‌های ویرایشگر بلاک‌ها

در وردپرس ۵ ویرایشگر بلاک‌ها (گوتنبرگ) برای همه پست تایپ‌هایی که دو شرط زیر رو داشته باشند فعال خواهد بود:

هنگام رجیستر شدن ( یا استفاده از add_post_type_support()) ویژگی editor برای آن‌ها فعال شده باشد
هنگام رجیستر شدن مقدار show_in_rest برابر با true تعیین شده باشد (مقدار پیش‌فرض برابر false است)

در پلاگین گوتنبرگ دو فیلتر برای فعال یا غیرفعال کردن ویرایشگر بلاک‌ها برای نوشته‌ها و پست‌تایپ‌ها وجود داشت به نام‌های gutenberg_can_edit_post و gutenberg_can_edit_post_type که در وردپرس ۵ معادل این دو فیلترهای use_block_editor_for_post و use_block_editor_for_post_type هستند.

با استفاده از فیلتر use_block_editor_for_post می‌تونیم گوتنبرگ رو برای ویرایش نوشته‌های سایت غیرفعال کنیم، مثلا توی کد زیر گوتنبرگ برای کاربر با نام کاربری mojtaba گوتنبرگ غیرفعال خواهد بود:


function my_post_filter( $use_block_editor, $post ) {
	$user = wp_get_current_user();
	if ( $user->user_login === 'mojtaba'  ) {
		return false;
	}

	return $use_block_editor;
}
add_filter( 'use_block_editor_for_post', 'my_post_filter', 10, 2 );

function my_post_filter( $use_block_editor, $post ) {

$user = wp_get_current_user();

if ( $user->user_login === 'mojtaba' ) {

return false;

}

return $use_block_editor;

}

add_filter( 'use_block_editor_for_post', 'my_post_filter', 10, 2 );

همچنین با استفاده از فیلتر use_block_editor_for_post_type می‌تونیم گوتنبرگ رو برای یک پست تایپ غیرفعال کنیم، در مثال زیر گوتنبرگ برای پست تایپ my_custom_post_type غیرفعال خواهد بود:

function my_post_type_filter( $use_block_editor, $post_type ) {
	if ( $post_type === 'my_custom_post_type' ) {
		return false;
	}

	return $use_block_editor;
}
add_filter( 'use_block_editor_for_post_type', 'my_post_type_filter', 10, 2 );

function my_post_type_filter( $use_block_editor, $post_type ) {

if ( $post_type === 'my_custom_post_type' ) {

return false;

}

return $use_block_editor;

}

add_filter( 'use_block_editor_for_post_type', 'my_post_type_filter', 10, 2 );

فلگ‌های سازگاری برای متاباکس‌ها

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

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

فلگ __block_editor_compatible_meta_box

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

فلگ __back_compat_meta_box

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

طریقه استفاده

فلگ‌ها باید به صورت کلید‌های یک آرایه به عنوان پارامتر آخر تابع add_meta_box ارسال شوند:

add_meta_box(
	'my-meta-box-id',
	__( 'My Meta Box', 'textdomain' ),
	'my_meta_box_callback',
	'post',
	'advanced',
	'default',
	array(
		'__block_editor_compatible_meta_box' => true,
		'__back_compat_meta_box'             => false,
	)
);

add_meta_box(

'my-meta-box-id',

__( 'My Meta Box', 'textdomain' ),

'my_meta_box_callback',

'post',

'advanced',

'default',

array(

'__block_editor_compatible_meta_box' => true,

'__back_compat_meta_box' => false,

)

);

جاوا اسکریپت و محلی سازی

یکی از جذاب‌ترین ویژگی‌هایی که به نسخه ۵ اضافه شده، قابلیت ترجمه متن‌های داخل فایل‌های js است. قبلا برای اینکه بتونیم متن‌های داخل فایل‌های js رو ترجمه کنیم از روش‌هایی مثل زیر استفاده می‌کردیم:

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );

// Localize the script with new data
$translation_array = array(
	'some_string' => __( 'Some string to translate', 'plugin-domain' ),
	'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

// Register the script

wp_register_script( 'some_handle', 'path/to/myscript.js' );

// Localize the script with new data

$translation_array = array(

'some_string' => __( 'Some string to translate', 'plugin-domain' ),

'a_value' => '10'

);

wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.

wp_enqueue_script( 'some_handle' );

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

هنگامی که یک فایل js رو برای لود شدن رجیستر می‌کنیم، wp-i18n رو در لیست وابستگی‌ها فایل‌مون تعیین می‌کنیم:

wp_register_script( 'my-handle', plugins_url( '/js/my-file.js', MY_PLUGIN ), array( 'wp-i18n' ) );

1 2	wp_register_script( 'my-handle', plugins_url( '/js/my-file.js', MY_PLUGIN ), array( 'wp-i18n' ) );

بعد از این کار، داخل فایل جی اس مون می‌تونیم از توابع ترجمه به شکل زیر استفاده کنیم:

const { __, _x, _n, _nx } = wp.i18n;

__( '__', 'my-domain' );
_x( '_x', '_x_context', 'my-domain' );
_n( '_n_single', '_n_plural', number, 'my-domain' );
_nx( '_nx_single', '_nx_plural', number, '_nx_context', 'my-domain' );

const { __, _x, _n, _nx } = wp.i18n;

__( '__', 'my-domain' );

_x( '_x', '_x_context', 'my-domain' );

_n( '_n_single', '_n_plural', number, 'my-domain' );

_nx( '_nx_single', '_nx_plural', number, '_nx_context', 'my-domain' );

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

قدم نهایی اینه که به وردپرس بگیم فایل جی اس ما دارای رشته‌های ترجمه است و همچنین باید text domain رو هم تعیین کنیم. این کار برای این هست که وردپرس ترجمه‌ها رو به صورت انتخاب شده لود کند و در نتیجه سرعت بیشتری داشته باشد:

wp_set_script_translations( 'my-handle', 'my-domain' );

1	wp_set_script_translations( 'my-handle', 'my-domain' );

برچسب‌های جدید برای Post type‌های دلخواه

در نسخه جدید ۵ برچسب جدید برای پست‌ تایپ‌های دلخواه اضافه شده است:

item_published – این برچسب پس از انتشار یک پست در بالای داشبورد نمایش داده می‌شود. قبل از این عبارت‌های نوشته منتشر شد یا برگه منتشر شد نمایش داده می‌شد.
item_published_privately – این برچسب هم مشابه قبلی است اما با این تفاوت که برای نوشته‌های خصوصی استفاده خواهد شد.
item_reverted_to_draft – از این برچسب برای نمایش پیغام داشبورد هنگام بازگرداندن نوشته به پیش‌نویس مورد استفاده قرار می‌گیرد.
item_scheduled – این برچسب به منظور نمایش پیام هنگام زمان‌بندی کردن یک نوشته برای انتشار در آینده استفاده می‌شود.
item_updated – این برچسب هم برای نمایش پیام بعد از به روز رسانی نوشته استفاده می‌شود.

Rest API در نسخه ۵

Rest API در نسخه جدید برای هماهنگی با ویرایشگر جدید تغییراتی رو داشته است. لیست کامل تغییرات Rest API رو می‌تونید اینجا مشاهده کنید.

این مهم‌ترین تغییرات نسخه ۵ وردپرس بود که باید به عنوان یک برنامه‌نویس وردپرس بهشون توجه کنیم 🙂
تجربه شما از نسخه ۵ چه طور بوده؟

مجتبی درویشی

وردپرس نسخه ۵ – همه چیزهایی که یک برنامه‌نویس باید بداند