What’s New in WordPress 5.5 – یک فرو رفتن عمیق در یک نسخه (حماسی)

WordPress 5.5 “Eckstine” تمام شده است و وقت آن است که ما با دومین نسخه وردپرس سال ، بارزترین تغییرات و ویژگی های اضافه شده به Core را معرفی کنیم.

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

این نسخه همچنین تغییرات زیادی را به ویرایشگر مربوط نمی کند که می تواند تأثیر زیادی در نحوه استفاده از داشته باشد. CMS .

ما میزبان یک وبینار رایگان برای نشان دادن و بحث درباره آنچه در وردپرس 5.5 می آید ، حتماً به ما بپیوندید !

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

اگر می خواهید در مورد چرخه توسعه وردپرس 5.5 بیشتر بخوانید ، پیوندهای زیر را بررسی کنید: p >

بنابراین ، چه موارد جدیدی در وردپرس 5.5 وجود دارد؟
وردپرس 5.5 دومین نسخه وردپرس سال 2020 است و ما خوشحالیم که قابل توجه ترین ویژگی های اضافه شده به Core را به شما معرفی می کنیم 🥳 ببینید چه موارد جدیدی در وردپرس 5.5 وجود دارد 🎁 برای توییت کلیک کنید

خبرهای جدید با ویرایشگر بلوک h2>

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

ذکر همه این تغییرات در اینجا تقریباً غیرممکن است ، بنابراین در این پست ، شما فقط یک انتخاب دستی و ویژگی های جدید مورد علاقه ما را خواهید یافت.

برای لیست جامع تری از بهبودها و ویژگی های اضافه شده به ویرایشگر بلوک با وردپرس 5.5 ، به اطلاعیه های رسمی منتشر شده پلاگین مراجعه کنید: 7.5 ، 7.6 ، 7.7 ، 7.8 a > ، 7.9 ، 8.0 ، 8.1 ، 8.2 ، 8.3 ، 8.4 ، 8.5 .

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

  1. طراحی جدید UI
  2. ابزار طراحی مسدود کردن
  3. ویرایش تصویر درون خطی
  4. مسدود کردن دسته ها و صفحه جدید بلوک درج کننده
  5. دایرکتوری مسدود کردن و افزونه های مسدود کردن
  6. الگوهای مسدود کردن

طراحی جدید UI

هر نسخه از افزونه Gutenberg پیشرفت های کوچک و نه چندانی کوچک را به ارمغان می آورد که در سکوت تجربه ویرایش کلی را تغییر می دهد. اکنون بسیاری از این تغییرات در هسته وردپرس ادغام می شوند. بنابراین ، هنگامی که برای اولین بار ویرایشگر بلوک را در وردپرس 5.5 راه اندازی می کنید ، یک رابط کمی متفاوت باید توجه شما را به خود جلب کند. خواهید یافت:

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

موارد ذکر شده در بالا تنها چند مورد از تغییرات زیادی هستند که بر تجربه ویرایش تأثیر می گذارند.

پیش نمایش موبایل در وردپرس 5.5

تغییرات اضافی نیز شامل موارد زیر است:

گزینه های Subscript و Superscript

گزینه های قالب بندی متن زیرنویس و متن از هم اکنون از طریق کنترل های متن غنی در دسترس است ( گوتنبرگ 8.0 ).

New block toolbar

نوار ابزار بلوک جدید با آیکون های طراحی مجدد ، ایجاد بلاک و کنتراست بهتر رنگ

انتخاب بلوک والدین h4>

یک دکمه کاملاً نوار ابزار در هنگام قرار گرفتن در سمت چپ نوار ابزار بلوک نشان داده می شود. دکمه جدید اجازه می دهد تا بلوک های اصلی را در زمینه های تو در تو انتخاب کنید ( گوتنبرگ 8.3 ).

انتخاب والد در یک بلوک رسانه و متن

ابزار طراحی بلوک h3>

طی ماههای گذشته چندین ابزار طراحی به افزونه Gutenberg اضافه شده است و اکنون قرار است با وردپرس 5.5 در هسته قرار بگیرند.

کنترل ارتفاع و شیب های زمینه h4>

اولین مجموعه از ابزارها می توانند ابعاد و رنگ پس زمینه را برای چندین بلوک کنترل کنند ( گوتنبرگ 7.9 ).

تنظیمات شیب زمینه برای بلوک ستون ها

Padding و Link Color Controls h4>

دو ویژگی دیگر در هسته قرار گرفتند ( گوتنبرگ 8.3 ) اما در زمان نوشتن این مقاله هنوز به عنوان آزمایشی مشخص شده اند:

  • کنترل بالشتک برای جلد بلوک.
  • پیوند کنترل رنگ برای پاراگراف ، عنوان ، گروه ، ستون ها و بلوک های رسانه و متن.

کنترل بالشتک و کنترل رنگ پیوند به طور پیش فرض خاموش هستند و توسعه دهندگان باید صریحاً پشتیبانی از آنها را اعلام کنند ، به عنوان در کتاب راهنمای Block Editor توضیح داده شده است .

اگر می خواهید کنترل های padding را برای بلوک Cover به مضامین خود اضافه کنید ، کافی است خط زیر را به توابع تم. php :

  add_theme_support ('experimental-custom-spacing')؛  

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

  add_theme_support ('experimental-link-color')؛  

واحدهای سفارشی و ارتفاعات خط سفارشی h4>

این ویژگی جدید به شما امکان می دهد px ، em ، rem ، vw و vh را تنظیم کنید مقادیر قد برای بلوک Cover ( Gutenberg 7.9 ) ٪ نیز پشتیبانی می شود اما به دلیل ارائه غیر قابل پیش بینی ارتفاع درصد حذف شده است.

با کنترل ارتفاع پیشرفته ، با پایین نگه داشتن Shift کد> هنگام فشار دادن up یا down .

کنترل واحد جدید

توسعه دهندگان می توانند پشتیبانی از واحدهای سفارشی را اضافه کنند با تعریف پرچم پشتیبانی custom-units پشتیبانی:

  add_theme_support ('custom-units')؛  

همچنین می توانید واحدهای سفارشی خاصی را تنظیم کنید:

  add_theme_support ('custom-units'، 'rem'، 'em')؛  

برنامه نویسان همچنین می توانند با تعریف پرچم پشتیبانی سفارشی-خط-ارتفاع ارتفاع خط سفارشی را برای عنوان و پاراگراف اضافه کنند:

  add_theme_support ('custom-line-height')؛  

ویرایش تصویر درون خطی h3>

یک ویژگی ویرایش جدید با گوتنبرگ 8.4 به کاربران امکان می دهد تصاویر را مستقیماً از بلوک تصویر ویرایش کنند.

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

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

ویرایش تصویر درون خطی در وردپرس 5.5

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

وردپرس تصویر جدیدی را به عنوان پیوست ذخیره می کند در کتابخانه رسانه و جزئیات را از تصویر اصلی کپی کنید (عنوان ، توضیحات ، عنوان ، متن alt و داده های EXIF). این به شما امکان کنترل کامل نسخه های جدید تصویر را می دهد.

مسدود کردن دسته ها و صفحه ورودی جدید بلوک h3>

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

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

فهرست راهنما و افزونه های مسدود h3>

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

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

بلوک شخص ثالث از انجمن وردپرس

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

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

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

برای کمک به شما در یادگیری اصول توسعه بلوک ، اولین نسخه از آموزش بلوک از قبل در کتابچه راهنمای Block Block موجود است. می توانید اطلاعات بیشتر در مورد مسدود کردن پوشه و جلوگیری از توسعه پلاگین در وبلاگ Make WordPress Plugins.

الگوهای بلوک h3>

در مارس 2020 ، گوتنبرگ 7.7 a > و گوتنبرگ 7.8 الگوهای بلوک و بلوک API الگوها برای مضامین و افزونه ها .

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

ما باید با ویرایش کامل سایت الگوهای بلوک را در بهترین حالت خود ببینیم.

یک توضیح واضح از اینکه الگوهای بلوک برای ، معمار اصلی پروژه گوتنبرگ:

یک توضیح - تنظیم "الگوهای بلوک" در مورد قطعات الگو (که از نظر ساختاری معنی دار هستند) کمتر است و بیشتر در مورد عناصر طراحی کلی ساخته شده از بلوک های کوچکتر است. پس از قرار دادن ، آنها جداگانه ذخیره نمی شوند. به عنوان مثال ، یک تصویر "Cover" که چند بلوک را برای دستیابی به ظاهری خاص ترکیب می کند و در غیر اینصورت کارهایی را برای کاربران به انجام می رساند. بیشتر به آن فکر کنید به عنوان مجموعه ای از طرح ها که می توانند در هرجایی اضافه شوند بدون اینکه لزوماً بخشی از یک قالب قابل استفاده مجدد را نشان دهند.

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

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

الگوی گالری در وردپرس 5.5

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

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

  • متن
  • قهرمان
  • ستون ها
  • دکمه ها
  • گالری
  • ویژگی ها
  • توصیفات
  • دسته بندی نشده

الگوی ویژگی های شماره گذاری شده در وردپرس 5.5 p >

علاوه بر الگوهای بلوک داخلی ، توسعه دهندگان وردپرس می توانند مضامین و افزونه های خود را با الگوهای سفارشی ارائه دهند با استفاده از یک API کاملاً جدید.

می توانید الگوهای سفارشی خود را با استفاده از تابع Register_block_pattern و register_block_pattern_category برای دسته ها ثبت کنید.

register_block_pattern دو آرگومان می گیرد:

  1. نام الگو.
  2. آرایه ای از خصوصیات الگو.

خصوصیات شامل موارد زیر است:

  • عنوان
  • محتوای
  • توصیف
  • مقوله ها
  • keywords
  • ViewportWidth

register_block_pattern_category همچنین دو استدلال را در بر می گیرد:

  1. نام دسته الگوها.
  2. آرایه ای از خصوصیات.

API همچنین دو عملکرد برای لغو ثبت الگوها و دسته ها فراهم می کند: unregister_block_pattern و unregister_block_pattern_category .

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

  add_action ('init' ، تابع () {

ثبت نام_بلاك_برنامه_برنامه (
'kinsta' ،
آرایه ('label' => __ ('چیزهای Kinsta' ، 'Kinsta-pattern'))))؛

ثبت نام_بلک_الگوی (
'kinsta-pattern / my-custom-pattern'،
آرایه(
'title' => __ ("دو دکمه Kinsta" ، "kinsta-pattern") ،
'description' => _x ('دو دکمه خوب.'، 'دکمه های Kinsta'، 'kinsta-pattern')،
'content' => "  n   n " ،
'categories' => آرایه ('kinsta') ،
)
)
})؛  

کد بالا سفارشی سازی ساده قطعه اصلی از Block API مرجع است همانطور که مشاهده می کنید ، به JavaScript نیازی نیست.

الگوی بلوک سفارشی

همچنین به Block Patterns in WordPress 5.5 مراجعه کنید a >.

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

بارگذاری تنبل تصویر بومی در هسته وردپرس h2>

Lazy loading یک روش بهینه سازی است که بارگذاری منابع غیر بحرانی را به تعویق می اندازد . این به این معنی است که به مرورگر دستور داده می شود که محتوای قابل مشاهده را در بارگذاری صفحه بارگیری کند و بارگیری و ارائه تصاویر را در زیر برابر قرار دهد تا زمانی که واقعاً به آنها احتیاج پیدا کند. .

قبل از بارگیری تنبل بومی ، برنامه نویسان وب می توانند بارگذاری تنبلی دارایی از طریق JavaScript ، با استفاده از IntersectionObserver API یا با استفاده از پیمایش ، تغییر اندازه و orientationchange گردانندگان رویدادها .

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


اگر از این مقاله لذت بردید ، پس از آن دوست دارید Kinsta’s WordPress platform hosting. وب سایت خود را توربوشارژ کرده و از تیم پیشکسوت وردپرس ما پشتیبانی 24/7 ساعته دریافت کنید. زیرساختهای Google Cloud ما بر مقیاس گذاری خودکار ، عملکرد و امنیت تمرکز دارند. بگذارید تفاوت Kinsta را به شما نشان دهیم! برنامه های ما را بررسی کنید a >

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

دیدگاهتان را بنویسید