وردپرس ۵ با قابلیت ویرایشگر بلوک گوتنبرگ (راهنمای جامع ویرایشگر گوتنبرگ)

مدت زمان زیادی از ارائه وردپرس ۵ به کاربران نمی گذرد، به همین دلیل مجاب شدیم تا در گروه آموزش سون هاست مطلبی را برای آشنایی با قسمت های مختلف ویرایشگر بلوک گوتنبرگ منتشر نماییم. در وردپرس ۵ ویرایشگر محتوای کلاسیک (Classic Content Editor) با ویرایشگر جدیدی به نام گوتنبرگ (Gutenberg) جایگزین شده است.

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

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

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

خب شاید سئوالات زیادی در مورد ویرایشگر گوتنبرگ درون ذهنتان نقش بسته باشد، اما جای نگرانی نیست زحمت پرسش و پاسخ تمام سئوالات با ما!

تفاوت بین ویرایشگر بلوک گوتنبرگ (Gutenberg Editor) با ویرایشگر کلاسیک (Classic Editor) چیست؟

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

ظاهر ویرایشگر کلاسیک در تصویر زیر آورده شده است، تصویری که کم کم باید به فراموشی بسپارید(میرن آدما…) :

ویرایشگر بلوک گوتنبرگ

ولی اگر سیستم مدیریت محتوا سایتتان را به وردپرس ۵ ارتقا دهید، همان تصویری را می بینید که ما از آن به عنوان بلوک سفارشی گوتنبرگ نام می بریم:

ویرایشگر بلوک گوتنبرگ

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

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

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

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

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

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

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

اما دلیل برتری ویرایشگر بلوک گوتنبرگ نسبت به ویرایشگر کلاسیک چیست؟

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

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

ویرایشگر بلوک گوتنبرگ

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

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

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

مواردی که ما در آموزش جامع گوتنبرگ (Gutenberg) پوشش خواهیم داد به شرح زیر آورده شده است؛

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

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

بریم واسه شیرجه(:

استفاده از گوتنبرگ به عنوان ویرایشگر جدید بلوک وردپرس

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

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

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

ابتدا به ایجاد یک پست جدید در وردپرس ۵ اقدام خواهیم نمود. از آنجایی که نسخه وردپرس ما فارسی است با منوهای فارسی سروکار داریم. پس با شنیدن عبارات عجیب نگران نشوید!

ابتدا روی نوشته ها کلیک کرده و در صفحه باز شده افزودن نوشته را مطابق تصویر زیر انتخاب می کنیم:

ویرایشگر بلوک گوتنبرگ

تبریک! شما به ویرایشگر جدید وارد شدید.

چگونگی اضافه کردن بلوک در گوتنبرگ

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

ویرایشگر بلوک گوتنبرگ

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

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

ویرایشگر بلوک گوتنبرگ

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

ویرایشگر بلوک گوتنبرگ

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

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

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

ویرایشگر بلوک گوتنبرگ

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

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

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

ویرایشگر بلوک گوتنبرگ

بعد از کلیک روی دکمه مربوط به ذخیره سازی، نام بلوک را به ” شعار سون هاست ” تغییر می دهم و سپس به روی ذخیره کلیک می کنم.

ویرایشگر بلوک گوتنبرگ

حالا هر زمان که نیاز به این بلوک بود، به راحتی می توان آن را انتخاب و به محتوا اضافه کرد. به این ترتیب که با انتخاب افزودن بلوک و انتخاب منوی قابل استفاده دوباره، بلوک را اضافه کنید:

ویرایشگر بلوک گوتنبرگ

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

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

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

ویرایشگر بلوک گوتنبرگ

تنظیمات افزونه در ویرایشگر جدید وردپرس

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

همچنین افزونه یائوست Yoast SEO به شما اجازه می دهد تا تنظیمات سئو را در ویرایشگر گوتنبرگ صورت دهید. به علاوه افزونه ووکامرس WooCommerce با ویجت بلوک، توانایی اضافه نمودن آن را به هر محتوایی می دهد.

اضافه نمودن برخی بلوک های متداول در گوتنبرگ

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

۱-اضافه کردن یک تصویر در ویرایشگر جدید وردپرس

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

ویرایشگر بلوک گوتنبرگ

هنگامی که عکسی اضافه کردید، از طریق تنظیمات متا دیتای عکس Alt text و Size را تعیین کنید. همچنین این توانایی به شما داده شده تا در صورت نیاز لینکی به تصویر اضافه نمایید.

ویرایشگر بلوک گوتنبرگ

۲-افزودن لینک در ویرایشگر بلوک

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

تمام بلوک های اختصاصی برای نوشتن متن دارای دکمه درج پیوند می باشند.

ویرایشگر بلوک گوتنبرگ

در ضمن با استفاده از میانبر صفحه کلید می توان لینک دلخواه را پیوند کرد. در مک بوک با استفاده از Command + k و برای رایانه های ویندوزی از CTRL + K قادر به درج لینک هستیم.

۳-ایجاد یک گالری عکس در گوتنبرگ

بلوک گالری شبیه بلوک تصویر عمل می کند با این تفاوت که در این بلوک باید تعداد تصویر بیشتری بارگذاری یا انتخاب کنیم.

۴-اضافه نمودن شورت کد (کد کوتاه) به محتواهای وردپرس با استفاده از گوتنبرگ

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

ویرایشگر بلوک گوتنبرگ

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

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

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

در ادامه بعضی از ویژگی های جدید گوتنبرگ که مورد علاقه منه رو براتون معرفی می کنم:) پس با آموزش های سون هاست همراه باشین!

۱-اضافه کردن تصویر مجاور متن در وردپرس

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

ویرایشگر بلوک گوتنبرگ

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

 ۲-اضافه کردن دکمه به صفحات و پست ها در وردپرس

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

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

ویرایشگر بلوک گوتنبرگ

روال کار به این صورت است که شما پس از کلیک روی دکمه افزودن بلوک، منویی را مشاهده خواهید نمود و با پیدا نمودن عنوان “عناصر طرح” قادر به ایجاد دکمه (Button) هستید. همانطور که در شکل بالا مشاهده می کنید ما با انجام مراحل فوق دکمه ای با عنوان “ورود به سون هاست” ایجاد نمودیم و آدرس دکمه به https://7ho.st/ تغییر داده شد در نهایت روی اجرا کلیک کردیم.

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

۳-اضافه کردن تصاویر زمینه زیبا به پست های بلاگ

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

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

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

ویرایشگر بلوک گوتنبرگ

همانطور که مشاهده می کنید با کلیک روی دکمه افزودن بلوک، عنوان “بلوک های عمومی” را باز می کنیم و “رویه” را انتخاب می نماییم. در ادامه مانند بلوک تصویر، به بارگذاری عکس مورد نظر خود می پردازیم و عنوانی برای عکس پوششی (Cover Image) اضافه می کنیم:

ویرایشگر بلوک گوتنبرگ

۴-ایجاد جدول درون مقالات

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

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

ویرایشگر بلوک گوتنبرگ

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

۵-ایجاد محتوای چند ستونه

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

ویرایشگر بلوک گوتنبرگ

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

ترفندهای گوتنبرگ برای حرفه ای شدن

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

اگر هنوز همراه سون هاست هستید، نکاتی برای چابکی شما آماده کرده ایم! این هم جایزه صبر و وفاداری

نکات چابکی گوتنبرگ

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

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

ویرایشگر بلوک گوتنبرگ

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

۲-استفاده از میانبرهای صفحه کلید

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

درون صفحه محتوا / را تایپ نمایید تا لیست بلند بالایی از بلوک ها را نمایش دهد. همچنین برای یادگیری میانبرهای بیشتر، روی سه نقطه در قسمت چپ بالای صفحه کلیک کنید و میانبرهای صفحه کلید را انتخاب کنید. از کلیدمیانبر Shift+Alt+H برای فراخوانی آن استفاده نمایید.

۳-فایل های رسانه ای را بکشید و رها کنید!

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

گوتنبرگ به صورت خودکار بلوک ها را تشکیل می دهد!

تامام:)

 

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