آموزش ویرایشگر گوتنبرگ(قسمت اول)

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

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

 

 

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

 

 

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

 

 

با استفاده از گزینه ی افزودن, المان هایی می توان اضافه کرد و قابل ذکر است که افزونه ی گوتنبرگ کار چندین افزونه را باهم انجام می دهد. قبل از وجود گوتنبرگ اگر می خواستیم کدهای html را به کاربران نشان دهیم باید از افزونه استفاده می کردیم یا اگر میخواستیم لیستی اضافه و جدولی درست کنیم باید از افزونه استفاده می کردیم. ولی با وجود ویرایشگر گوتنبرگ برای نوشتن محتوای خود نیازی به نصب افزونه نداریم. و درصد بالایی از کارمان بدون نیاز به افزونه انجام خواهد شد.
اول از همه عبارت most used را مشاهده می کنید. که بیشترین المان هایی که استفاده کردید را در اینجا لیست می کند.

 

بعد از اون common Blocks هست که به نوعی بلاک هایی که خیلی از آن استفاده می شه را نشان می ده. اعم از list (لیست ها) و gallery برای (گذاشتن عکس) , audio برای (گذاشتن موزیک) و heading برای نوشتن تیتر و… .

 

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

 

 

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

 

 

گزینه ی بعدی layout elements هست.

 

 

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

 

 

برای مثال می خوام از قسمت جداکننده استفاده کنم و layout element رو میزنم و سپس گزینه ی separator را انتخاب میکنم. اگر دقت کنید زمانی که من جداکننده رو انتخاب کردم در سمت چپ گزینه ی بلاک اومذ و همچنین گرینه ی style که من با استفاده از این گزینه میتونم استایل اون رو نیز تغییر بدم. یعنی این که دوست دارم مدل خطی که به عنوان جداکننده به کار بردم چه شکلی باشه مثلا خط ممتد باشه یا خط چین باشه و… .

 

 

گزینه ی بعدی ابزارک ها هستند. که برای دسته بندی سایتتون می تونید از گزینه ی category استفاده کنید. برای آرشیو از گزینه ی archive وبرای آخرین پست ها و آخرین کامنت ها از گزینه یlatest post و latest comment استفاده کنید. همچنین قابلیت جالبی که داره shortcode هست که اگر از افزونه هایی مثل افزونه ی تماس استفاده میکنید و یک فرم تماس ساختید که shortcode آن را می خواهید در نوشتتون قرار دهید می تونید از این گزینه استفاده کنید و اون فرم تماس هم در نوشتتون میتونه ظاهر بشه.

 

 

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

 

 

خب بریم سراغ common block که در واقع المان های کابردی هستند.

 

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

 

 

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

 

 

 

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

 

 

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

 

 

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

 

 

 

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

 

 

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

 

 

زمانی که پاراگراف را انتخاب کردیم و متنمون رو قرار دادیم وقتی روی متن کلیک کنیم در سمت چپ امکاناتی به ما می ده که می تونیم مثلا فونت سایزش رو تغییر بدیم. رنگ و background color و text color رو تغییر بدیم. یعنی رنگ پس زمینه و رنگ متن.

 

 

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

شاد و سلامت باشید…