آموزش ویرایشگر گوتنبرگ

گوتنبرگ وردپرس چیست؟

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

تیم طراحی سایت اصفهان وب یار تصمیم دارد Editor (ویرایشگر) جدید وردپرس که گوتنبرگ نام دارد را به شما عزیزان معرفی کرده و آموزش دهد. اگر آشنایی زیادی با این ویرایشگر ندارید تا پایان مقاله ما را همراهی کنید. امیدواریم این مقاله مورد توجه شما عزیزان قرار بگیرد.

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

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

آموزش کامل کار با افزونه ویرایشگر گوتنبرگ

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

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

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

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

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

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

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

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

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

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

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

در اینجا قصد دارم از قسمت جداکننده استفاده کنم پس گزینه ی جدا کننده یا Separator را انتخاب میکنم. اگر دقت کنید زمانی که من جداکننده رو انتخاب کردم در سمت چپ گزینه ی بلاک اومد و همچنین گرینه ی Style که من با استفاده از این گزینه میتونم استایل اون رو نیز تغییر بدم. یعنی این که دوست دارم مدل خطی که به عنوان جداکننده به کار بردم چه شکلی باشه مثلا خط ممتد باشه یا خط چین باشه و… .

گزینه ی بعدی ابزارک ها هستند. که برای دسته بندی سایتتون می تونید از گزینه ی دسته ها استفاده کنید. برای آرشیو از گزینه ی بایگانی وبرای آخرین پست ها و آخرین کامنت ها از گزینه ی Latest Post و Latest Comment استفاده کنید. همچنین قابلیت جالبی که داره Shortcode هست که اگر از افزونه هایی مثل افزونه ی تماس استفاده میکنید و یک فرم تماس ساختید که Shortcode آن را می خواهید در نوشتتون قرار دهید می تونید از این گزینه استفاده کنید و اون فرم تماس هم در نوشتتون میتونه ظاهر بشه.

گزینه ی بعدی جاسازی ها هست که می تونید به عنوان مثال اگر از اینستاگرام استفاده می کنید و پیجی در اینستاگرام دارید پیجتون در یک باکسی خیلی زیبا به کاربرانتون نشون داده خواهد شد (با استفاده از گزینه ی Instagram). یا اینکه افزونه ای در وردپرس دارید که می خواید منتشر کنید در یک باکسی زیبا به تمام کاربرانتون نشون داده خواهد شد (با استفاده از گزینه ی WordPress).

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

اول از همه من می خوام نوشتم رو با یک عکس شروع کنم گزینه ی تصویر رو میزنم.

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

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

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

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

پس از انتخاب, متنم را در آن قرار می دهم. وبا استفاده از گزینه های بالای آن می تونم راست چین وسط چین و bold و… نیز بکنم. یا قسمتی از متن را لینک بکنم.

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

زمانی که پاراگراف را انتخاب کردیم و متنمون رو قرار دادیم وقتی روی متن کلیک کنیم در سمت چپ امکاناتی به ما می ده که می تونیم مثلا فونت سایزش رو تغییر بدیم، رنگ و Background Color و Text Color رو تغییر بدیم. یعنی رنگ پس زمینه و رنگ متن.

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

گوتنبرگ

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

آموزش گوتنبرگ وردپرس

همین طور که می بینید ویرایشگر ما با همون شکل و شمایل ظاهر میشه و ما میتونیم متنمون رو ویرایش کنیم مثل قبل.

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

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

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

به این ترتیب جدول شما آماده است.

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

تا اینجای کار  توضیحات کلی و تا حدودی جزئی در مورد ویرایشگر گوتنبرگ برای شما داده شد.
حالا بریم تا ببینیم چطوری محتوا رو انتشار بدیم. همون طور که میبینید در قسمت سند اطلاعات نوشته ی ما اینجا قرار می گیره. مثل سابق دسته ی نوشته رو تعیین می کنیم. برچسب برای نوشتمون میذاریم و تصویر شاخص رو قرار میدیم.

برای مثال تصویر شاخص را به این ترتیب قرار می دهیم:

در قسمت چکیده یک توضیح مختصر در مورد این مقاله قرار میدیم.

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

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

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

گزینه ی بعد پیشنهاد هست که میتونید در این قسمت برچسب ها رو وارد کنید.

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

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

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

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

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

اگه در مورد این ویرایشگر سوالی براتون پیش اومد حتما بپرسید  تیم طراحی سایت اصفهان پاسخ همه ی سوالات شمارو با صبوری میده.

امیدوارم از این مقاله خوشتون اومده باشه و به زودی با یه مقاله ی آموزشی دیگه در خدمتتون هستیم.