اتفاقات جدید در نسخه 5.7 وردپرس

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

اتفاقات جدید در نسخه 5.7 وردپرس 1ما به دیدن تغییرات کوچک و نه زیاد کوچک و قابلیت های جدید اضافه شده به هسته وردپرس هر زمان که نسخه جدیدی ارائه می شود عادت کرده ایم. وردپرس ۵.۷ نیز از این قاعده مستثنی نیست و این که می بینیم چطور هر نسخه جدید ما را به تصویر بزرگتر مورد نظر وردپرس نزدیک می کند بسیار عالیست.

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

بغیر از Block Editor، وردپرس ۵.۷ تغییرات بسیار زیاد و قابلیت های عالی را دارد که شامل Lazy Loading iFrames، آپدیت های رابط ثبت نام و لاگین، لینک های بازیابی پسوورد، تعداد زیادی رفع باگ و … می شود.

ما تست های خود را در زمینه نسخه جدید در DevKinsta انجام داده ایم و می خواهیم که قابلیت ها و تغییرات مورد علاقه مان که به همراه این نسخه ارائه شده اند را با شما در میان بگذاریم که البته به همراه صدها اسکرین شات و اسنیپت کدها نیز خواهند بود.

محتوا پنهان

اتفاقات جدید در Block Editor

وردپرس ۵.۷ نسخه های متعددی از پلاگین Gutenberg را به هسته اضافه می کند. اشاره کردن به تمامی این نسخه ها در کنار تغییرات و رفع باگ های متعددی که رخ داده است غیر ممکن است بنابراین می توانید با یک جستجو در مورد نسخه های مختلف اضافه شده از پلاگین Gutenberg اطلاعاتی بیشتری کسب نمایید.

رفع باگ ها و بهبود عملکرد از Gutenberg 10.0 به Gutenberg 10.1 نیز بخشی از وردپرس ۵.۷ هستند. با اشاره به این موارد، بیایید نگاهی به لیست انتخابی ما از هیجان انگیزترین قابلیت ها و تغییرات اضافه شده به ویرایشگر بلاک در وردپرس ۵.۷ بپردازیم.

قابلیت های متغیرهای بلاک، بهبود بخشی ها و APIها

متغیرهای بلاک (Block Variations) در نسخه ۵.۴ وردپرس معرفی شد و در واقع راهی برای کاربر جهت انتخاب یک جایگزین متفاوت برای همان بلاک ایجاد می کند.

این قابلیت در کنار قابلیت Block Variations API کار می کند، ابزار قدرتمندی که به برنامه نویس ها اجازه اضافه کردن، مدیریت کردن و حذف کردن متغیرهایی از یک بلاک را می دهد.

وردپرس ۵.۷ بهبود بخشی ها، قابلیت ها و APIهای جدیدی را برای متغیرهای بلاک معرفی می کند که نتیجه آن ارائه رابط کاربری بهتر و ابزارهای قدرتمندتر برای توسعه دهندگان است.

تبدیل های Block Variations

این مورد که ابتدا به همراه Gutenberg 9.4 معرفی شد و اکنون به وردپرس ۵.۷ اضافه شده است بدین صورت است که یک سوئیچ کننده تبدیل به متغیر زیر کارت بلاک برای بلاک هایی که از این قابلیت پشتیبانی می کنند اضافه می شود.

اتفاقات جدید در نسخه 5.7 وردپرس 2

زمانی که می خواهید یک متغیر بلاک جدید ثبت کنید، برنامه نویسان بلاک می توانند سوئیچ کننده متغیر را به Block Inspector با اضافه کردن آپشن جدید Transform به قسمت Scope متغیر بلاک اضافه کنند، همان طور که در مثال پایین نشان داده شده است.

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter', 'transform' ] 
} );

در این مثال، یک متغیر بلاک در دو بخش از رابط کاربری ویرایشگر به نمایش درمی آید، یعنی Block Inserter و Block Inspector.

اتفاقات جدید در نسخه 5.7 وردپرس 3

اطلاعات بلاک اکنون با متغیرهای بلاک تطابق دارند

از زمان ارائه شدن وردپرس ۵.۷ ( و Gutenberg 9.7)، رابط کاربری اطلاعات دقیق تری در مورد متغیرهای بلاک می دهد در حالی که قبلاً این اطلاعات فقط به صورت کلی ارائه می شد.

اتفاقات جدید در نسخه 5.7 وردپرس 4

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

اتفاقات جدید در نسخه 5.7 وردپرس 5

این تغییرات بر روی Block Inspector، نوار گشت و گذار بلاک و Breadcrumbها تاثیر می گذارند. از زمان ارائه Gutenberg 9.8 به بعد، بهبود رابط کاربری بر روی سوئیچ کننده بلاک نیز اعمال می شود.

اتفاقات جدید در نسخه 5.7 وردپرس 6

Block Variation API های جدید

وردپرس ۵.۷ همچنین APIهای جدیدی را معرفی می کند که برنامه نویس ها می توانند از آن ها برای ثبت متغیرهای بلاک جهت نشان دادن اطلاعات صحیح آن ها استفاده کنند.

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

توسعه دهندگان بلاک ها می توانند از این قابلیت برای نشان دادن اطلاعات متغیرها به جای اطلاعات بلاک ها استفاده کنند. یک مثال از این مورد می تواند بلاک Embed باشد، جایی که ما می توانیم ارزش ویژگی های providerNameSlug را تغییر دهیم.

const variations = [
{
	name: 'wordpress',
	title: 'WordPress',
	keywords: [ __( 'post' ), __( 'blog' ) ],
	description: __( 'Embed a WordPress post.' ),
	attributes: { providerNameSlug: 'wordpress' },
	isActive: ( blockAttributes, variationAttributes ) =>
		blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
},
];

در مثال پایین، قسمت isActive برای تغییر ویژگی های رنگی استفاده شده است.

variations: [
{
	name: 'blue',
	title: __( 'Blue Quote' ),
	isDefault: true,
	attributes: { color: 'blue', className: 'is-style-blue-quote' },
	icon: 'format-quote',
	isActive: ( blockAttributes, variationAttributes ) =>
		blockAttributes.color === variationAttributes.color
},

Hook جدید useBlockDisplayInformation اطلاعات در مورد یک بلاک تعیین شده را برمی گرداند. قلاب جدید قسمت isActive یک متغیر بلاک را در نظر گرفته و سپس عنوان، آیکن و توضیحات آن بلاک را برمی گرداند.

این تغییرات بر روی کارت بلاک، Navigation List View و Breadcrumbها تاثیر می گذارند.

قابلیت های دکمه های جدید

یک سری قابلیت های جدید به بخش بلاک های دکمه ها اضافه شده است که می توانند رابط کاربری آن ها بهتر و کاربردی تر کنند.

ابعاد دکمه ها

یک کنترلگر جدید در حال حاضر در نوار کناری تنظیمات وجود دارد که به ما اجازه تنظیم درصد عرض برای دکمه هایی که در بلاک های دکمه ها حضور دارند می دهند.

اتفاقات جدید در نسخه 5.7 وردپرس 7

تنها کافیست یک دکمه را انتخاب کرده و یکی از گزینه های ۲۵%، ۵۰%، ۷۵% یا  ۱۰۰% را انتخاب کنید. درصدها نسبت به کانتینر مادر تعیین می شوند. تصویر پایین ترکیبات مختلف ابعاد دکمه ها را نشان می دهد.

اتفاقات جدید در نسخه 5.7 وردپرس 8

لایه بندی عمودی

این قابلیت جدید متغیرهایی برای جهت یابی های عمودی بلاک دکمه ها ایجاد می کند. کاربران می توانند از یک لایه بندی افقی به لایه بندی عمودی با استفاده از سوئیچ تبدیل کننده ای که در پنل تنظیمات بلاک وجود دارد استفاده کنند.

اتفاقات جدید در نسخه 5.7 وردپرس 9

بهبود بخشی های آیکن های شبکه های اجتماعی

وردپرس ۵.۷ آپشن های شخصی سازی جدیدی را به آیکن های شبکه های اجتماعی اضافه می کند که شامل پشتیبانی از سایز دلخواه و رنگ های دلخواه می شود.

سایز آیکن های شبکه های اجتماعی

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

اتفاقات جدید در نسخه 5.7 وردپرس 10

رنگ های دلخواه در آیکن های شبکه های اجتماعی

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

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

اتفاقات جدید در نسخه 5.7 وردپرس 11

پشتیبانی از سایز فونت

وردپرس ۵.۷ پشتیبانی از سایز فونت برای لیست ها و کد بلاک ها را اضافه کرده است.

سایز فونت در بلاک لیست

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

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

اتفاقات جدید در نسخه 5.7 وردپرس 12

پشتیبانی از سایز فونت در کد بلاک ها

وردپرس ۵.۷ همچنین پشتیبانی از مدیریت سایز فونت درون کد بلاک ها را اضافه کرده است. زمانی که یک کد بلاک انتخاب می شود، نوار کناری تنظیمات بلاک یک کنترلگر جدید اندازه فونت را نمایش می دهد. این کنترلگر به شما اجازه انتخاب یکی از سایزهای پیشفرض در دسترس را ایجاد یک سایز دلخواه بر اساس پیکسل ها را می دهد.

اتفاقات جدید در نسخه 5.7 وردپرس 13

پیاده سازی این قابلیت همچنین اجازه استفاده از استایل های جهانی در CSS کد بلاک ها را نیز می دهد. تصویر پایین یک کد بلاک در بخش Frontend در حالی که Twenty Twenty Theme نصب شده است را نشان می دهد.

اتفاقات جدید در نسخه 5.7 وردپرس 14

هم راستا سازی کامل ارتفاع در بلاک کاور

وردپرس ۵.۷ یک نوار ابزار کاملاً جدید همراستا سازی کامل ارتفاع را معرفی می کند. این گزینه ابتدا به همراه Gutenberg 9.5 به ویرایشگر بلاک اضافه شد و اکنون با هسته ترکیب شده و در بلاک کاور پیاده سازی شده است.

اتفاقات جدید در نسخه 5.7 وردپرس 15

اگر بر روی دکمه نوار ابزار بلاک بروید و چشمتان به کنترلگر حداقل ارتفاع باشد، می بینید که همراستا ساز کامل ارتفاع به عنوان ۱۰۰vh نمایش داده می شود.

اتفاقات جدید در نسخه 5.7 وردپرس 16

شما می توانید این قابلیت را با دیگر تنظیمات کنترلگر مانند بک گراند فیکس شده، موقعیت محتوا و … ترکیب نمایید. احتمالاً از تعداد افکت های تحسین برانگیزی که می توانید روی صفحات خود بسازید شگفت زده خواهید شد.

بلاک های Drag & Drop و الگوهای Inserter

Block Inserter اکنون از الگوها و بلاک های Drag & Drop پشتیبانی می کند. کاربران می توانند هر بلاک یا الگویی که می خواهند را از Inserter بردارند و در هر قسمتی از Canvaـی پست که می خواهند قرار دهند.

در نظر داشته باشید که Drag & Drop تنها زمانی عمل می کند که قالب شما از Block Patterns پشتیبانی نماید.

اتفاقات جدید در نسخه 5.7 وردپرس 17

Spacer Block نیمه شفاف

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

اتفاقات جدید در نسخه 5.7 وردپرس 18

این قابلیت شناسایی Spacer Block را بر روی رنگ پس زمینه ساده تر می کند.

اتفاقات جدید در نسخه 5.7 وردپرس 19

بهبود بخشی های دیگر در ویرایشگر بلاک که ارزش اشاره کردن را دارند

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

تنها برای این که چند مورد دیگر را نیز اشاره کرده باشیم، در نسخه ۵.۷ می توانید موارد زیر را نیز مشاهده کنید:

  • فعال شدن خودکار Dark Mode زمانی که پس زمینه تیره فعال شود
  • اضافه شدن آیکن های Patreon، Telegram و TikTok به آیکن های شبکه های اجتماعی
  • پشتیبانی تمام واحدها از تنظیمات سایز فونت
  • پیش نمایش تبدیل های بلاک ها
  • بهبود پیش نمایش الگوی بلاک در Block Inserter
  • ماژول Options بهبود یافته و به Preferences تغییر نام داده است
  • تغییرات ایجاد شده در بخش @wordpress/data API
  • تغییرات API در بلاک های داخلی
  • بهبود قابلیت Import/Export
  • تغییرات ایجاد شده برروی اجزا و بلاک های ویرایشگر بلاک

اتفاقات جدید در نسخه 5.7 وردپرس 20

Lazy Loading iFrames

Lazy Loading یک تکنیک بهینه سازیست که بارگزاری منابع غیرحیاتی را تا زمانی که آن ها در Viewport کاربر هستند به تعویق می اندازد. عکس ها و منابع پیوست شده Lazy Loading تا زمانی که به آن ها نیاز نشود دانلود و رندر نمی شوند. این کار به صورت قابل توجهی می تواند عملکرد سایت را بهبود ببخشد، مخصوصاً سایت های ورزشی که پر از ویدیوها و عکس های با رزولوشن های بسیار بالا هستند.

قبل از Native Lazy Loading، توسعه دهندگان تنها می توانستند با استفاده از جاوا اسکریپت Assetها را Lazy Load کنند. کاربران وردپرس مجبور به استفاده از یک پلاگین برای کسب این چنین تاثیری شدند. از زمانی که Lazy Loading به یک استاندارد تبدیل شد، عکس ها و iFrame ها را می توان به راحتی با اضافه کردن ویژگی loading=”lazy” به تگ های img و iFrame به صورت Lazy Loading درآورد.

اتفاقات جدید در نسخه 5.7 وردپرس 21

نسخه ۵.۵ وردپرس Lazy Loading محلی عکس ها را در هسته وردپرس معرفی کرد و به صورت خودکار ویژگی loading=”lazy” را به تگ های image به همراه ویژگی های ارتفاع و عرض اضافه نمود.

حالا و از بعد از عرضه نسخه ۵.۷ Lazy Loading به تگ های iFrame اضافه شده است. در زمینه عکس ها، این اتفاق به منظور جلوگیری از انتقال لایه بندی ها (Layout Shifting) افتاده است و در واقع Loading=”lazy” تنها به تگ های iFrameـی اضافه می شود که عرض و ارتفاع تعیین شده ای داشته باشند.

در وردپرس، Lazy Loading محلی با iFrameها در موارد زیر همکاری می نماید:

  • IFrameهای درون محتوای پست (the_content)
  • IFrameهای درون پست های برگزیده (the_excerpt)
  • IFrameهای درون ویجت های متنی (widget_text_content)

اتفاقات جدید در نسخه 5.7 وردپرس 22

در وردپرس، بخش عمده ای از iFrameها به یکپارچه سازی oEmbed تکیه می کنند که به صورت خودکار یک URL را به یک تگ پاسخگوی iFrame تبدیل می نماید. متاسفانه، تمامی سرویس دهندگان وب نمی توانند ویژگی های عرض و ارتفاع را برای iFrameها ارائه کنند که این موضوع از اضافه کردن ویژگی Loading به این iFrameها جلوگیری می نماید.

عکس پایین یک تگ iFrame را به همراه قابلیت Loading=”Lazy” نشان می دهد.

اتفاقات جدید در نسخه 5.7 وردپرس 23

همان طور که Felix Arntz در این باره می گوید:

” علامت گذاری این تگ های iFrame توسط سرویس های وب کنترل می شود و تنها بعضی از بهترین ارائه دهندگان سرویس های وب ویژگی های عرض و ارتفاع را ارائه می کنند. از آن جایی که وردپرس نمی تواند ابعاد یک منبع پیوست شده را حدس بزند، قابلیت Loading=”Lazy” تنها زمانی فعال می شود که تگ oEmbed مربوط به یک iFrame به همراه ابعاد آن قرار داده شود. ”

تصویر پایین یک تگ iFrame فاقد قابلیت Loading=”Lazy” را نشان می دهد.

اتفاقات جدید در نسخه 5.7 وردپرس 24

IFrameهای Lazy Loading برای برنامه نویس ها

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

  • رفتار قابلیت wp_filter_content_tags() به صورتی بهبود یافته است که قابلیت Loading را به تگ های iFrame اضافه کند. قابلیت Loading قبلاً تنها به تگ عکس ها اضافه می شد.
  • به صورت پیشفرض، قابلیت wp_lazy_loading_enabled() اکنون زمانی که فعال شده باشد پاسخ true را برای تگ های iFrameها بازمی گرداند.
  • قابلیت جدید wp_iframe_tag_add_loading_attr() اضافه شدن ویژگی loading به تگ iFrame را میسر می سازد.
  • فیلتر wp_iframe_tag_add_loading_attr() اجازه شخصی سازی Lazy Loading روی iFrameهای مشخص را می دهد. بازگرداندن پاسخ False یا یک رشته خالی باعث اضافه شدن این ویژگی نخواهد شد.

شما می توانید رفتار پیشفرض را با استفاده از فیلتر آماده wp_lazy_loading_enabled که در حال حاضر پاسخ true را برای تگ های iFrame برمی گرداند، دستکاری کنید.

add_filter(
	'wp_lazy_loading_enabled',
	function( $default, $tag_name, $context ){
		if ( 'iframe' === $tag_name && 'the_content' === $context ){
			return false;
		}
		return $default;
	},
	10,
	3
);

طراح سایت وردپرس شوید

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

شما همچنین می توانید از فیلتر جدید wp_iframe_tag_add_loading_attr استفاده کنید که اجازه شخصی سازی رفتار یک تگ iFrame بخصوص را می دهد. به عنوان مثال، شما می توانید Lazy Loading را برای ویدیوهای یوتوب در یک مقیاس مشخص غیرفعال نمایید.

کدی که در پایین می بینید بر اساس یادداشت های برنامه نویسان نوشته شده است و به شما نشان می دهد که چطور می توانید Lazy Loading را برای iFrameهایی که ویدیوهای یوتوب را پیوست کرده اند غیرفعال نمایید.

add_filter(
	'wp_iframe_tag_add_loading_attr',
	function( $value, $iframe, $context ){
		if ( 'the_content' === $context && false !== strpos( $iframe, 'youtube.com' ) {
		return false;
	},
	10,
	3
);

در نظر داشته باشید که تمامی مرورگرهای وب به صورت کلی از Lazy Loading تا زمان نوشته شدن این مقاله پشتیبانی نمی کنند. می توانید در تصویر پایین ببینید که تنها FireFox و Safari از Lazy Loading برای عکس های پشتیبانی می نمایند.

اتفاقات جدید در نسخه 5.7 وردپرس 25

مهاجرت سایت از HTTP به HTTPS تنها با یک کلیک

از زمان عرضه نسخه جدید، وردپرس خودش مشخص می کند که آیا محیط یک وب سایت از HTTPS پشتیبانی می کند یا خیر. اگر این طور باشد، بخش وضعیت HTTPS در ابزار Site Health یک دکمه دعوت به عمل ارائه می کند که به ادمین های سایت اجازه می دهد تا وب سایت خود را از HTTP به HTTPS تنها با یک کلیک انتقال دهند. محتوای سایت در یک چشم به هم زدن انتقال داده می شود و ما را از دیدن هر گونه اخطار در مورد انتقال محتوا نجات می دهد.

 

اتفاقات جدید در نسخه 5.7 وردپرس 26در صورتی که از HTTPS توسط سایت پشتیبانی نشود، وردپرس یک نوتیفیکیشن مانند زیر را به شما خواهد داد.

اتفاقات جدید در نسخه 5.7 وردپرس 27

انتقال از HTTP به HTTPS برای برنامه نویسان

در کنار قابلیت تمام اتوماتیک اضافه شده برای این کار در ابزار Site Health، وردپرس ۵.۷ قابلیت جدیدی را ارائه می کند که به برنامه نویسان توانایی تست و شخصی سازی جنبه های مختلف شناسایی HTTPS و مهاجرت را می دهد.

قابلیت جدید wp_is_using_https() در صورتی که هم آدرس سایت و هم آدرس وردپرس شامل یک URL دارای HTTPS باشند پاسخ true را برمی گرداند. این قابلیت جدید در یادداشت های برنامه نویس توسط Felix Arntz به خوبی تصویرسازی شده است:

” به صورت کلی، تغییر دادن هر دوی این URLها به HTTPS به صورت رسمی اعلام می کند که سایت در حال استفاده از HTTPS است. در حالی که راه های دیگری برای فعال سازی HTTPS به صورت بخش به بخش در وردپرس وجود دارد، اما این سیستم شناسایی جدید بر روی استفاده از HTTPS در تمام طول سایت یعنی هم frontend و هم backend متمرکز است. ”

در حالی که قابلیت wp_is_using_https() به دنبال حضور HTTPS در URL است، wp_is_https_supported() مشخص می کند که آیا محیط سایت به درستی از HTTPS پشتیبانی می کند یا خیر.

این قابلیت در واقع حضور داشتن آپشن https_detection_errors را در دیتابیس چک می کند و سپس در صورت پیدا نکردن هیچگونه ارور پاسخ true را برمی گرداند. در صورتی که محیط سایت شما از HTTPS پشتیبانی نکند، آپشن https_detection_errors در جدول wp_options حاضر خواهد بود، همان طور که در تصویر پایین دیده می شود:

اتفاقات جدید در نسخه 5.7 وردپرس 28

همان طور که بالاتر اشاره کردیم، URLهایی که به صورت Hardcode در محتوای سایت هستند به سرعت انتقال پیدا می کنند که باید برای این کار از دو قابلیت جدید wp_replace_insecure_home_url() و wp_should_replace_insecure_home_url() متشکر بود.

برای انتقال یک سایت از HTTP به HTTPS، ادمین سایت تنها نیاز به آپدیت دستی آدرس سایت و آدرس وردپرس برای شامل کردن HTTPS به جای HTTP دارد. اگرچه که برای حتی ساده تر کردن کارها، نسخه ۵.۷ وردپرس قابلیت جدید wp_update_urls_to_https() را معرفی کرده است!

این قابلیت جدید اجازه مهاجرت سایت و تمامی محتوای آن از HTTP به HTTPS را تنها با یک کلیک می دهد. این یک بهبودبخشی فوق العاده در تجربه Administration وردپرس به حساب می آید.

قابلیت های جدید مرتبط با Post Parent

وردپرس ۵.۷ دو قابلیت جدید مرتبط با Post Parent را معرفی می کند. استفاده از آن ها ساده بوده و به شما در کاهش منطق درون پلاگین ها و قالب ها کمک می کند.

Has_parent_post()

قابلیت has_parent_post() یک تگ شرطی است که نگاه می کند آیا یک پست مشخص شده دارای پست مادر (Parent) هست یا خیر و سپس بر اساس پاسخ این سوال جواب true یا false را برمی گرداند. این قابلیت Post ID یا آبجکت WP_Post را به عنوان یک پارامتر قبول می کند و از متغیر جهانی $post در صورت در دسترس بودن استفاده می نماید. مثال پایین را ببینید:

<?php if ( has_parent_post( get_the_ID() ) ) : ?>
	// your code here
<?php endif; ?>

Get_parent_post()

قابلیت get_parent_post() یک تگ قالب است که آبجکت مادر wp_post را برای یک پست مشخص شده بازیابی می کند. مانند قابلیت قبلی، این قابلیت نیز Post ID یا آبجکت wp_post را به عنوان یک پارامتر قبول می کند. مثال پایین را در این مورد مشاهده کنید:

<a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>"><?php echo get_the_title( get_parent_post( get_the_ID() ) ); ?></a>

در دنیای واقعی، ما از این قابلیت ها برای ربط دادن استفاده می کنیم. شما می توانید با اضافه کردن کد پایین که در یادداشت های برنامه نویسان برداشته شده است به قالب single.php فایل قالب خود یک تست در این زمینه اجرا نمایید:

<?php if ( has_parent_post( get_the_ID() ) ) : ?>
	<p><a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>">
	<?php
		echo sprintf(
			esc_html__( 'Parent page: %s', 'text-domain' ),
			get_the_title( get_parent_post( get_the_ID() ) )
		);
	?>
	</a></p>
<?php endif; ?>

آپدیت رابط کاربری صفحات لاگین و ثبت نام

وردپرس ۵.۷ بهبود بخشی های متعددی را در زمینه صفحات لاگین و ثبت نام به همراه یک صفحه بهبود یافته بازیابی پسوورد به علاوه یک Hook جدید و تغییرات کوچک دیگر ارائه می دهد.

صفحه بازیابی پسوورد

صفحه بازیابی پسوورد اکنون دارای دو دکمه است: Generate Password و Save Password. اولین دکمه یک پسوورد جدید قدرتمند را با هر بار کلیک ایجاد می کند در حالی که دکمه دوم پسوورد شما را ذخیره می کند. این تغییر منجر به تجربه بهبود یافته بازیابی پسوورد برای کاربران جدید وردپرس می شود.

تصویر پایین مقایسه ای از صفحه بازیابی پسوورد در وردپرس ۵.۶ و ۵.۷ را نشان می دهد:اتفاقات جدید در نسخه 5.7 وردپرس 29

فیلترهای جدید

Hook جدید lostpassword_user_data به ما اجازه فیلتر کردن متغیر $user_data بر روی بازیابی پسوورد را می دهد. برنامه نویسان اکنون می توانند با استفاده از داده های دلخواه به جای یک نام کاربری یا آدرس ایمیل تاییدیه کاربر را انجام دهند. برای دیدن یک مثال عملی واقعی، می توانید این کامنت از Marcelo Villela Gusmao را مشاهده کنید.

Hook فیلتر جدید login_site_html_link به ما اجازه جایگزینی کامل لینک تولید کننده HTML تحت عنوان “Back to (site_name)” به همراه یک کد یا لینک دلخواه را می دهد. اکنون برنامه نویسان می توانند یک متن دلخواه برای لینک ایجاد کرده و حتی خود لینک را در صورت لزوم تغییر دهند. شما می توانید از این فیلتر به شیوه پایین استفاده نمایید:

function custom_login_site_html_link( $link ) {
	return '<a href="' . esc_url( home_url( '/blog/' ) ) . '">' . __( 'Back to my awesome blog', 'textdomain' ) . '</a>';
}
add_filter( 'login_site_html_link', 'custom_login_site_html_link', 10, 1 );

تصویر پایین نتیجه این کار را بر روی صفحه وب نشان می دهد:

اتفاقات جدید در نسخه 5.7 وردپرس 30

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

(رایگان و پریمیوم ۲۰۲۱)

قابلیت های جدید برای چک کردن این که آیا یک پست برای عموم قابل مشاهده است یا خیر

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

Is_post_status_viewable()

قابلیت جدید is_post_status_viewable() به برنامه نویسان اجازه می دهد تا مشخص کنند که آیا یک پست با توجه به وضعیتی که دارد برای عموم قابل مشاهده است یا خیر.

این قابلیت راه بهتری برای چک کردن قابل مشاهده بودن پست به جای is_post_type_viewable() می باشد، قابلیتی که می تواند ببیند آیا متن پست برای کاربران ناشناس قابل مشاهده است یا خیر اما کمکی در زمینه قابل مشاهده بودن یک پست بخصوص نمی کند.

برای مدل های پستی درون ساختی، is_post_status_viewable() ویژگی public را چک می کند. برای مدل های پستی دلخواه، به جای ویژگی قبلی، ویژگی publicly_queryable را چک می نماید.

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

$current_post_status = get_post_status( $post );
if ( is_post_status_viewable( $current_post_status ) ) {
	echo '<p>This post uses a public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>';
} else {
	echo '<p>This post uses a non public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>';
}

در یک پست بلاگ عمومی، کد بالا نتیجه پایین را ایجاد خواهد کرد:

اتفاقات جدید در نسخه 5.7 وردپرس 31

در یک پست خصوصی، نتیجه مانند تصویر پایین خواهد بود:

اتفاقات جدید در نسخه 5.7 وردپرس 32

Jean-Baptiste Audras نویسنده یادداشت برنامه نویسان در این باره اخطار می دهد که:

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

Is_post_publicly_viewable()

قابلیت جدید is_post_publicly_viewable() در صورتی که هر دو قابلیت is_post_status_viewable() و is_post_type_viewable() پاسخ true را بازگردانند، پاسخ true را برمی گرداند. این قابلیت همچنین به ما اجازه می دهد تا مشخص کنیم که آیا یک پست قابل مشاهده عموم هست یا خیر.

Is_post_publicly_viewable() یک پارامتر آپشنال قبول می کند:

  • $post (string|stdClass) یک post ID یا آبجکت. به صورت پیشفرض، آبجکت جهانی $post مقبول است.

یک Hook پویای جدید برای فیلتر کردن محتوای یک مدل بلاک بخصوص

نسخه ۵.۷ وردپرس یک Hook پویای جدید را معرفی می کند که به برنامه نویسان اجازه می دهد تا محتوای یک مدل بلاک بخصوص را فیلتر کنند.

این فیلتر تازه render_block_{$this->name} مشابه با فیلتر قبلی render_block است که یک تفاوت کلیدی با یکدیگر دارند: render_block محتوای یک بلاک را فیلتر می کند، در حالی که قلاب پویای جدید محتوای مدل بلاک {$this->name} را فیلتر می نماید.

برای استفاده از این فیلتر، شما باید پارامترهای زیر را ارائه دهید:

  • $block_content (String): محتوای بلاکی که باید الحاق شود.
  • $block (array): بلاک کامل که شامل نام و ویژگی هاست.

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

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

add_filter( 
	'render_block_core/paragraph', 
	function( $block_content, $block ) {
		$content  = '<div class="my-custom-wrapper">' . $block_content . '</div>';
		return $content;
	}, 
	10, 
	2 
);

در این مثال، پسوند core/paragraph شعار مدل بلاک پاراگراف اصلی است. برای بلاک های دلخواه دیگر، Slug باید چیزی مانند my-custom-plugin/my-custom-block باشد.

New Robots API

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

وردپرس ۵.۷ یک Robots API جدید را معرفی کرده است که به توسعه دهندگان اجازه کنترل کردن این متا تگ های robots را می دهد.

API جدید یک فیلتر wp_robots برای توسعه دهندگان قالب ها جهت اضافه کردن فرمان های دلخواهشان به متا تگ های robots ارائه می نماید.

علاوه بر این، فرمان max-image-preview:Large در حال حاضر به صورت پیشفرض به وب سایت هایی که برای دیده شدن توسط موتورهای جستجو تنظیم شده اند، اضافه شده است. این فرمان به موتورهای جستجو می گوید که پیش نمایش های بزرگ عکس ها را در نتایج جستجو نشان دهند.

اتفاقات جدید در نسخه 5.7 وردپرس 33

برنامه نویسان می توانند فرمان max-image-preview:large را با استفاده از کد پایین حذف کنند:

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

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

add_filter( 
	'wp_robots', 
	function( $robots ) {
		$robots['follow'] = true;
		return $robots;
	}
);

کد بالا خروجی پایین را ایجاد می کند:

<meta name="robots" content="max-image-preview:large, follow">

همچنین حذف کردن فرمان های کنونی با غیرفعال کردن تنظیمات ارزش ها نیز ممکن است. کد پایین فرمان max-image-preview را غیرفعال می نماید:

function my_wp_robots_directives( $robots ) {
	unset( $robots['max-image-preview'] );
	$robots['follow'] = true;
	return $robots;
}
add_filter( 'wp_robots', 'my_wp_robots_directives' );

شما می توانید جزئیات پرعمقی در زمینه متا تگ های robots در بلاگ Ahrefs و Google Search Reference پیدا نمایید.

16 افزونه امنیتی وردپرس

معرفی پلاگین‌های برتر

لینک های بازیابی پسوورد

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

ادمین های سایت می توانند از نواحی مختلفی لینک بازیابی پسوورد را به وسیله ایمیل ارسال نمایند. ابتدا شما یک بخش جدیدی را خواهید دید که دارای یک دکمه Send Reset Link در صفحه پروفایل کاربران است.

اتفاقات جدید در نسخه 5.7 وردپرس 34

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

اتفاقات جدید در نسخه 5.7 وردپرس 35

شما همچنین می توانید لینک بازیابی پسوورد را از صفحه کاربر ارسال نمایید.

اتفاقات جدید در نسخه 5.7 وردپرس 36

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

اتفاقات جدید در نسخه 5.7 وردپرس 37

همان طور که بالاتر اشاره شد، کاربران ایمیلی که حاوی لینک بازیابی پسوورد است را دریافت می کنند. عکس پایین یک ایمیل حاوی لینک پسوورد را در ابزار DevKinsta Email Inbox نشان می دهد.

اتفاقات جدید در نسخه 5.7 وردپرس 38

برنامه نویسان می توانند از فیلترهای retrieve_password_title  و retrieve_password_message برای شخصی سازی تیتر و پیام ایمیل ها استفاده نمایند.

بهبود بخشی های دیگر برای برنامه نویسان

قابلیت جدید برای انتقال ویژگی ها به تگ های Script

قابلیت های جدید متعددی هم اکنون انتقال ویژگی ها به تگ های <script> را میسر می سازند.

We_get_script_tag()

We_get_script_tag() یک تگ فرمت شده script را بارگزاری کرده و به صورت خودکار ویژگی type را در صورتی که قالب پشتیبانی از تگ های Script مربوط به HTML5 را اعلام نکرده باشد، وارد می نماید. این تگ آرایه ای از جفت های ارزش محور که نماینده ویژگی های اضافه شده به تگ script هستند را قبول می کند.

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

We_print_script_tag()

این تگ یک تگ Script فرمت شده را پرینت می کند.

Wp_get_inline_script_tag()

این تگ یک تگ script را درون خطوط JavaScript می پیچد.

این قابلیت یک Hook هم راستا تحت عنوان wp_inline_script_attributes دارد که ویژگی ها را به منظور اضافه شدن به یک تگ Script فیلتر می کند.

Wp_print_inline_script_tag()

این تگ یک JavaScript درون خطی را درون یک تگ script پرینت می کند.

Wp_sanitize_script_attributes()

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

رنگ های استانداردسازی شده WP-Admin

به عنوان بخشی از یک پروژه بزرگتر با هدف پاکسازی WP-Admin CSS، وردپرس در حال حاضر از پالت رنگی استانداردسازی شده جدیدی در WP-Admin استفاده می کند. پالت رنگی جدید شامل ۱۲ طیف از رنگ های آبی، سبز، قرمز و زرد می شود. این پالت همچنین ۱۳ طیف از رنگ های خاکستری، مشکی و سفید را نیز اضافه کرده است. علاوه بر این، این پالت از حداقل نرخ کنتراست پیشنهادی مورد نیاز توسط WCAG 2.0 پشتیبانی می کند.

اتفاقات جدید در نسخه 5.7 وردپرس 39

Jean-Baptiste Audras در این باره می گوید:

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

اصل WP_MEMORY_LIMIT در بخش سلامت سایت

اصل WP_MEMORY_LIMIT حداکثر میزان حافظه ای که PHP می تواند مصرف کند را مشخص می نماید.

این مورد که در نسخه های قبلی وردپرس وجود نداشت، هم اکنون به تب Info در قسمت Site Health اضافه شده است.

اتفاقات جدید در نسخه 5.7 وردپرس 40

سهم بازار وردپرس با یک سرعت ثابت به رشد خود ادامه می دهد. در واقع وردپرس توسط ۶۴.۴ درصد از وب سایت هایی که سیستم مدیریت محتوای آن ها را می شناسیم استفاده می شود. این یعنی ۴۰.۳ درصد از تمامی وب سایت های دنیا.

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

وردپرس ۵.۷ قابلیت ها و بهبودسازی های متعددی را برای کاربران و برنامه نویسان اضافه کرده است اما این موارد تنها یک چشمه از چیزی که انتظار داریم در سال ۲۰۲۱ ببینیم می باشند.

منبع: /https://kinsta.com/blog/wordpress-5-7

در این مقاله به طور کامل تمامی تغییرات موجود در نسخه جدید وردپرس را مورد بررسی قرار دادیم.

برای مطالعه بیشتر در زمینه وردپرس به بلاگ ما حتما سر بزنید.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

موضوعات دیگر