Block Editor وردپرس – آموزش تصویری ویرایشگر گوتنبرگ سایت وردپرس

در وردپرس ۵.۰ ویرایشگر محتوای کلاسیک با یه Block Editor وردپرس جدید که به ویرایشگر گوتنبرگ هم معروفه جایگزین شد. ویرایشگر بلوک وردپرس روشی کاملاً جدید و متفاوت برای ایجاد محتوا در وردپرس است. در این آموزش ما به شما نشون میدیم که چطوری از این ویرایشگر استفاده کنین تا بتونین خواننده رو به محتوای خودتون جذب کنین!

تفاوت بین Block Editor وردپرس و Classic Editor

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

اینجا یه تصویری از ویرایشگر کلاسیک وردپرس داریم:

حالا اگه وردپرس رو به نسخه ۵.۰ ارتقا بدین، میتونیم Block Editor وردپرس که به شکل زیر هست رو ببینیم:

همونطوری که مشاهده میکنین ما اینجا دو تا ویرایشگر کاملاً متفاوت برای ایجاد محتوا در وردپرس داریم.

ویرایشگر قدیمی یعنی Classic Editor یه ویرایشگر متنی بود که دکمه‌های قالب بندی بسیار مشابه با Microsoft Word داشت.

اما ویرایشگر جدید یا ویرایشگر Gutenberg از یه رویکرد کاملاً متفاوت به اسم “Block” استفاده میکنه برای همین هم اسم اون Block Editor وردپرس است!

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

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

Block Editor وردپرس یا ویرایشگر کلاسیک؟

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

مثلاً اگه قبلاً میخواستین یه جدول رو به محتوای خودتون اضافه کنین باید یه افزونه جدول جداگونه فعال میکردین ولی با ویرایشگر بلوک وردپرس به سادگی یه بلوک جدول به محتوای خودتون اضافه میکنین، ستون ها و ردیف‌های رو انتخاب میکنین و سپس میرین سراغ آپدیت محتوا!

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

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

اصلاً نگران نباشین چون کا با Block Editor واقعاً آسونه و مزیت بزرگی برای افراد مبتدی و کسایی که تازه کار با وردپرس رو شروع کردن است. پس بریم که استفاده از این ویرایشگر رو یاد بگیریم:

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

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

• ایجاد یه پست یا صفحه وبلاگ جدید
• نحوه اضافه کردن بلوک گوتنبرگ
• کار با بلوک در ویرایشگر جدید
• ذخیره و استفاده مجدد از بلوک ها در گوتنبرک
• انتشار و مدیریت گزینه‌ها در Block Editor وردپرس
• افزودن بعضی از بلوک های رایج در گوتنبرگ
• بررسی برخی از بلوک های جدید محتوا در گوتنبرگ
• نکات اضافی در مورد استفاده حرفه‌ای از گوتنبرگ

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

ویرایشگر بلوک به گونه‌ای بصری و انعطاف پذیر طراحی شده است. درسته که با ویرایشگر کلاسیک تفاوت داره اما هنوز هم میتونین همه کارهایی که با Classic Editor انجام میدادین رو اینجا هم انجام بدین!

۱. ایجاد یک وبلاگ یا پست جدید با استفاده از Gutenberg

اول از همه باید شروع به ساختن یه وبلاگ یا پست جدید با استفاده از ویرایشگر بلوک جدید وردپرس بکنین و این کار عین همون کاریه که همیشه انجام میدین! یعنی خیلی ساده روی Posts→ Add new menu در پنل ادمین وردپرس کلیک میکنین. اگر هم میخواین یه پیج بسازین پس باید به قسمت Pages→Add New menu برین.

با این کار یه Block Editor وردپرس جدید راه اندازی میشه.

۲. نحوه اضافه کردن بلوک گوتنبرگ

عنوان، اولین بلوک هر پست یا صفحه است.

بعد از اون میتونین از ماوس برای حرکت به سمت زیر عنوان‌ها استفاده کنین یا کلید tab روی کیبورد رو فشار بدین تا به سمت پایین حرکت کنین و نوشتن رو شروع کنین!

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

اگر هم شما بخواین یه چیز دیگه‌ای رو اضافه کنین، میتونین روی دکمه “Add New Block” در قسمت بالای سمت چپ ویرایشگر که در زیر یا سمت چپ بلوک موجود قرار داره، کلیک کنین.

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

میتونین برای مرور کردن بلوک ها از دکمه Tab استفاده کنین یا این که چیزی که مد نظرتون هست رو سرچ کنین تا بلوک مربوط به اون براتون ظاهر بشه!

اگه دلتون نمیخواد برای کلیک کردن روی بلوک از ماوس استفاده کنین، میتونین از تایپ/ میانبر صفحه کلید استفاده کنین تا چیزی که میخواین رو جستجو و یه بلوک اضافه کنین.

۳. کار با بلوک در ویرایشگر جدید

در Block Editor وردپرس ، هر بلوکی نوار ابزار مخصوص به خودش رو داره که این نوار در بالای بلوک ظاهر میشه. دکمه های موجود در نوار ابزار بسته به بلوکی که ویرایش میکنین تغییر میکنن.

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

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

میتونین با یه کشیدن و رها کردن drag and drop ساده یا با کلیک کردن روی دکمه های بالا و پایین کنار هر بلوک، بلوک های پایین و بالا رو حرکت بدین.

۴. ذخیره و استفاده مجدد از بلوک ها در گوتنبرک

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

به سادگی روی دکمه منو که در گوشه سمت راست نوار ابزار هر بلوک قرار گرفته، کلیک کنین و از اون منو گزینه “Add to reusable blocks” رو انتخاب کنین.

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

ویرایشگر گوتنبرگ وردپرس این بلوک رو به عنوان یه بلوک قابل استفاده مجدد یا “reusable block” ذخیره میکنه.

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

به سادگی پست یا صفحه‌ای که مد نظرتون هست رو تو ویرایش باز کنین. از صفحه ادیت پست روی دکمه “Add Block” کلیک کنین.

حالا میتونین بلوک های ذخیره شده خودتون رو زیر تب “Reusable” پیدا کنین. همچنین میتونین با تایپ کردن اسم بلوک موردنظرتون تو نوار جستجو، اون رو پیدا کنین.

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

همه بلاک های قابل استفاده مجدد در پایگاه داده وردپرس شما ذخیره میشن و میتونین با یه کلیک روی گزینه “Manage All Reusable Blocks” اونها رو مدیریت کنین.

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

۵. انتشار و مدیریت گزینه‌ها در Block Editor وردپرس

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

۶. گزینه‌های افزونه در گوتنبرگ

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

بعضی از افزونه های محبوب در حال حاضر به عنوان بلوک در دسترس هستن. مثلاً WPForms بهترین افزونه سازنده فرم وردپرس به شما امکان میده فرم هایی رو با استفاده از یه ابزار بلوک به محتوای خودتون اضافه کنین.

در اینجا Yoast SEO به شما امکان میده تنظیمات SEO خودتون رو در ویرایشگر جدید ویرایش کنین:

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

۷. افزودن برخی از بلوک های رایج در Block Editor وردپرس

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

افزودن تصویر

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

همچنین میتونین تصاویر رو از رایانه خودتون Drag and Drop کنین و سپس ویرایشگر به طور خودکار یه بلوک تصویری برای اونها میسازه. پس از افزودن تصویر، میتونین تنظیمات بلوک رو مشاهده کنین؛ جایی که میشه در اون متادیتاهایی برای تصاویر، مثل متن alt، سایز و لینک رو اضافه کنین.

افزودن لینک

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

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

همچنین میتونین با استفاده از کلیدهای میانبر صفحه کلید که برای مک Command+K و برای ویندوز CTRL+K هستن، یه لینک رو وارد کنین.

اضافه کردن گالری

بلوک گالری هم مثل بلوک تصویر کار میکنه. شما اون رو اضافه کنین و سپس پرونده های تصویر رو بارگذاری یا انتخاب کنین.

اضافه کردن شورت کد

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

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

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

در زیر یه سری از مواردی که مطمئنیم کاربران از اونها خوششون میاد رو برای شما جمع آوری کردیم:

اضافه کردن یه عکس در کنار بعضی از متن‌ها در وردپرس

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

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

اضافه کردن یه دکمه در پست ها و صفحات وردپرس

اضافه کردن یه دکمه به پست‌ها یا صفحات تو ویرایشگر کلاسیک یه دغدغه به حساب میومد و شما یا مجبور بودین از یه افزونه‌ای استفاده کنین که یه شورت کد برای دکمه ایجاد میکرد یا مجبور بودین به حالت HTML برین و کد نویسی کنین.

اما حالا با استفاده از Block Editor وردپرس میتونین از دکمه بلوک استفاده کنین و به سرعت یه دکمه به هر پست یا صفحه‌ای که میخواین اضافه کنین.

میتونین برای دکمه خودتون یه لینک هم اضافه کنین، رنگ‌ها رو تغییر بدین و از بین سه مدل دکمه یکی رو انتخاب کنین.

افزودن تصاویر کاور زیبا در صفحات فرود یا Landing Page

یکی دیگه ار ویژگی‌های جذابی که ممکنه دلتون بخواد امتحان کنین، بلوک “Cover” است که به شما امکان میده تصاویر کاور زیبایی رو به پست ها و صفحات وبلاگ خودتون اضافه کنین.

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

فقط کافیه که یه بلوک کاور اضافه کنین و هر تصویری که دلتون میخواد رو بارگذاری کنین.

ایجاد جدول در داخل مقاله

ویرایشگر کلاسیک هیچ دکمه‌ای برای اضافه کردن جدول در پست های وردپرس شما نداشت و مجبور بودین برای این کار از یه افزونه استفاده کنین یا با استفاده از نوشتن CS و HTML شخصی سازی شده یه جدول برای خودتون بسازین.

ویرایشگر جدید گوتنبرگ دارای یه بلوک “Table” پیش فرض است که اضافه کردن جدول در پست یا صفحات شما رو خیلی آسون میکنه. پس بلوک Table رو اضافه کنین و هر تعداد ردیف و ستونی که میخواین وارد کنین.

ایجاد محتوای چند ستونی

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

نکات اضافی در مورد استفاده حرفه‌ای از گوتنبرگ

برای این که یه کاربر حرفه‌ای در Block Editor وردپرس بشین فقط کافیه به چندتا نکته ساده زیر توجه کنین:

• نوار بلوک رو به قسمت بالا انتقال بدین.
• از کلیدهای میانبر کیبورد استفاده کنین.
• از Drag and Drop برای ساختن خودکار بلوک مدیا استفاده کنین.