ویرایشگر گوتنبرگ برای وردپرس

gutenberg_02_1500@2x

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

در این پست من قصد دارم به شما یک تور هدایتی گوتنبرگ را ارائه دهم و با برخی از ابزارها و ویژگی هایی که ارائه می دهد کار کنم.

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

قلب گوتنبرگ – بلاک ها

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

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

گوتنبرگ همچنین ظاهر ویرایشگر پست را تغییر می دهد. به جای زبانه ها برای نمایش و متن (یا کد) نمایش، شما یک رابط ویرایش تمیز را می بینید و می توانید نمایش ها را برای یک تک بلوک تغییر دهید. و به جای متاباکس های آشنا در سمت راست، یک رابط اتصال قرار دارد که یادآور Customizer می باشد.

زمانیکه یک پست جدید را باز می کنید ، همه چیز بسیار آشکار و بی پرده به نظر می رسد:

 

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

 

اضافه کردن محتوا

افزودن محتوا توسط گوتنبرگ در ابتدا ممکن است کمی ترسناک به نظر برسد. چگونه تمام بلوک ها را ایجاد می کنید تا بتوانید مطالب را وارد کنید؟

 

محتوای متن

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

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

برای ایجاد هر نوع دیگری از بلوک، می توانید روی آیکون + در مکان مربوطه پستتان کلیک کنید یا اگر هیچ بلوکی زیر بلوکی که حال حاضر روی آن کار می کنید ندارید، فشار دادن کلید Tab آن را ایجاد و به بلوک جدید زیر بلوک های موجود هدایت می کند. این تنها زمانی عملیست که شما در یک بلوک متنی هستید. یکمرتبه که بلوکی را ایجاد کردید ، بر روی نماد نوع(تایپ) بلوکی که ایجاد کرده اید کلیک کنید – برای هر یک از انواع محتوای متنی، عنوان و تصویر، یک آیکون وجود دارد.

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

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

تصاویر

هنگامیکه آیکون تصویر را انتخاب می کنید، به شما به واسطه خط اتصالی ارائه می شود که عکس خود را مستقیما و بدون ورود به آپلود کننده واسط درون بلاک آپلوک کنید:

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

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

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

در حقیقت ایجاد این ها کمی مشکل است – شما نمی توانید از کلید Tab استفاده کنید، بلکه باید بر آیکون + کلیک کنید تا یک بلوک جدید یا آیکون های سمت راست تصویر را اضافه کنید. و به نظر می رسد که شما نمی توانید متن را در راست یا چپ تصویر قرار دهید. هنوز اشکالاتی در آن وجود دارد، پس بازگردید تا ببینید چه زمانی این اشکالات را برطرف می کنند.

گالری ها

شما می توانید با کلیک کردن بر روی آیکون تصویر در سمت چپ بالای بلوک، یک بلوک تصویر را به یک گالری تبدیل کنید و سپس  Transform into: Galleryرا انتخاب کنید. شما همچنین می توانید از همان آیکون برای تبدیل استفاده کنید.

برای بار اول که یک گالری را ایجاد می کنید، گزینه ای برای آپلود تصاویر بیشتر در اختیارتان گذاشته  می شود، هرچند من فقط قادر به اضافه کردن تصاویر آپلود شده بودم. من نتوانستم تصاویر بیشتری از کتابخانه رسانه اضافه کنم. اگر می خواهید چندین تصویر را یک بار از رایانه یا کتابخانه رسانه اضافه کنید، بهترین راه اینست که با استفاده از نماد + برای ایجاد یک گالری جدید (به جای برخورد با کلید Tab)، انتخاب گالری،و سپس اضافه کردن تصاویر اقدام کنید کنید. اگر یک تصویر موجود را تبدیل کنید، گزینه ای برای اضافه کردن تصاویر بیشتر از کتابخانه رسانه ای نخواهید داشت و اضافه کردن یکمرتبه ای چندین عکس سخت تر خواهد بود. این یکی دیگر از اشکالات است که من مطمئن هستم برطرف خواهد شد!

 

بلوک هایتان را ویرایش کنید

برای ویرایش یک بلوک، به سادگی روی آن کلیک کنید و شروع به ویرایش کنید. شما می توانید متن، تصاویر و موارد دیگر را ویرایش کنید. شما همچنین می توانید با کشیدن بلوک به انتهای سمت راست و کلیک بر روی آیکون trashcan که ظاهر می شود یک بلوک را حذف کنید.

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

صفحه

شما می توانید یک بلوک را به یک بلوک دیگر در یک گروه از انواع بلوک ها با کلیک کردن بر روی آیکون در بالا سمت چپ و یا بیضی در سمت راست تبدیل کنید. مثلا نمی توانید یک بلوک متنی را به یک بلوک تصویری تغییر دهید، اما می توانید یک پاراگراف را به یک لیست، عنوان یا نقل قول تغییر دهید و بلوک های تصویر را به گالری ها و بالعکس تغییر دهید.

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

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

 

بلوک های به اشتراک گذاشته شده – کپی کردن مطالب در پست ها

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

برای ایجاد یک بلوک به اشتراک گذاشته شده، به سادگی یک بلوک از هر نوعی را در پستی که می خواهید این محتوا را نمایش دهد ایجاد کنید. سپس موس را روی بیضی سمت راست حرکت دهید و Convert to shared block را انتخاب کنید. به بلوک خود یک نام منحصر به فرد اختصاص دهید(از تصویر زیر می بینید که من این کار را انجام نداده ام و این منجر به سردرگمی می شود). سپس  یک پست دیگر را باز کرده و روی آیکون + کلیک کنید تا یک بلوک جدید اضافه شود، گزینه به اشتراک گذاری را انتخاب کنید و بلوکی را که می خواهید اضافه کنید را انتخاب کنید.

 

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

 

تنظیمات سند در گوتنبرگ

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

 

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

·     وضعیت و قابلیت دید – از این برگه برای انتشار پست یا برای ویرایش وضعیت و / یا قابلیت دید آن استفاده کنید. این معادل با انتشار metabox است. شما همچنین برای اصلاحات از اینجا استفاده می کنید.

·     دسته بندی ها – دسته بندی ها را به پست خود اختصاص دهید و موارد جدیدی را اضافه کنید، درست همانطور که یرای دسته های متاباکس انجام می دهید .

·         برچسب ها – این کار با برچسب ها به شیوه ای مشابه است ، و دوباره معادل با برچسب metabox است.

·         تصویر برجسته و مورد نمایش – این به همان شیوه مشابه به عنوان تصویر برجسته کار می کند.

·     گلچین – از این برگه برای ویرایش گلچین و منتخب استفاده کنید. شخصا من فکر می کنم که این خصوصیت در موقعیت بسیار بهتری از metabox فعلی قرار دارد که در زیر محتوای پنهان است.

·         بحث – نظرات و کامنت ها را در اینجا مدیریت کنید.دوباره این از زیر محتوا تغییر مکان داده است.

 

پست هایتان را ذخیره کنید

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

از آنجا که گوتنبرگ در جاوا اسکریپت و نه در PHP ساخته شده است،به صورت پویا می باشد. این به این معنی است که تغییرات شما به طور خودکار هنگام کار شما ذخیره می شود. شما دیگر نیازی به ضربه زدن به یک دکمه برای ذخیره پست خود به عنوان یک پیش نویس ندارید ، زیرا گوتنبرگ آن را برای شما انجام خواهد داد.

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

 

این یک چک دستی است و من همچنین می توانم از طریق یک افزونه اضافه چک کردن های اضافی را در نظر بگیرم.

 

گوتنبرگ: هنوز یک حشره کوچک اما مطمئنا امیدوار کننده

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

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

منبع

 


برچسب ها: ، ، ،


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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Back To Top