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

گوتنبرگ(Gutenberg)، ویرایشگر جدید وردپرس است که در نسخه ۵ وردپرس اضافه و جایگزین ادیتور کلاسیک وردپرس شده است. .در واقع گوتنبرگ وردپرس یک پروژه وردپرسی است و در حال حاضر یک محیط ویرایش جدید در وردپرس را رونمایی کرده و همچنان قرار است گسترده‌تر شده و رشد کند. این موردی است که اغلب مردم در موردش اطلاع دارند اما باید به شما بگویم که گوتنبرگ وردپرس تنها یک ویرایشگر را شامل نمی‌شود بلکه شروع اقداماتی بسیار بزرگ‌تر است. در واقع این پروژه بر روی لایه بندی و قالب‌های سایت تاثیر گذاشته و تبدیل به یک سفارشی‌ساز کامل برای وردپرس می‌شود. حال شما فرض کنید چه امکاناتی در اختیار ما قرار خواهد گرفت!

در وردپرس ۴٫۹٫۸ گوتنبرگ از ویرایشگر خود رونمایی کرد و با نصب آن می‌توان ویرایشگر سابق را به یک محیط کاملا متفاوت با امکاناتی مطلوب تبدیل کرد:

حالا واقعا گوتنبرگ چیست؟

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

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

تکنولوژی های جدید در گوتنبرگ

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

افزونه ها در گوتنبرگ

مفهوم بلوک ها برخی از ابزارهای بسیار قدرتمند جدید را برای نویسندگان افزونه به ارمغان می آورد. شما میتوانید از تعداد زیادی از افزونه در ویرایشگر مانند افزونه Advanced Custom Fields یا CMB2 استفاده کنید. این افزونه ها در جعبه های متا نگهداری میشوند . این جعبه ها در پایین و کنار ویرایشگر جاری قرار دارند. در حقیقت تیم گوتنبرگ در حال بررسی تغییر جعبه های متا هستند، به نظر ما، این یک اشتباه بزرگ است.

مسائل دسترسی

نسخه فعلی گوتنبرگ قابلیت دسترسی در دو حالت frontend و backend دارد.

اما کار با گوتنبرگ

اگر با افزونه های صفحه ساز گرافیکی مانند ویژوال کامپوزر کار کرده باشید این افزونه کاربردی وردپرس با استفاده از قابلیت و امکاناتی که دارد قادر است هر نوع  صفحه با المانهای منحصر به فرد و ظاهری حرفه ای برای شما طراحی کند در این راستا وردپرس با ارائه گوتنبرگ قصد دارد تا خود را جایگزین این نوع صفحه سازها بکند. گوتنبرگ از تکنولوژی جدید با استفاده از جاوا اسکریپت های مانند فریم ورک react  همچنین تعدادی افزونه مانند Advanced Custom Fields یا CMB2 که در جعبه‌های متا دارد می تواند صفحاتی همانند ویژوال کامپوزر بر شما طراحی کند که در نوع خود بی‌نظیر است . البته قرار است در نسخه های بعدی قابلیت های جدید و هم چنین از نظر ظاهری تغییرات اساسی داشته باشد.

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

اگر گوتنبرگ را نصب و ظاهر آن را مشاهده نکرده اید پیشنهاد میکنیم گوتنبرگ را نصب کنید  و ظاهر آن را ببینید تا بهتر بتوانید گفته های ما را درک کنید البته ما تصاویری هم در کنار توضیحات ارائه کردیم که می‌تواند به یادگیری شما کاربران عزیز کمک زیادی بکند.

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

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

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

اما  در گوتنبرگ چه  بلوکهای وجود دارد

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

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

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

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

توجه:  در برخی موارد برخی از کاربران قصد دارند تا ستون کناری را غیرفعال کنند و یا در معرض دید نباشد برای این کار کافیست روی آیکون چرخ دنده که در بالای صفحه قرار دارد کلیک و در این صفحه روی i مخفف info می باشد را انتخاب کنید با این کار شما می توانید بخش های مختلف را به سلیقه خود سفارشی کنید برای مثال افزودن ستون ها ، دکمه ها ، بیشتر ، جدا کننده ها ، فاصله یا page break

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

قرار دادن ستون در محتوا

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

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

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

گوتنبرگ

وارد کردن استایل  سفارشی یا css

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

  • .is-small-text : اولین کلاس: نوشته کوچک
  • .is-regular-text : دومین کلاس: نوشته متوسط
  • .is-large-text : سومین کلاس: نوشته بزرگ
  • .is-larger-text :چهارمین کلاس: نوشته خیلی بزرگ
  • .wp-block استایل کل بلاک های نوشته
  • قابلیت wp-block-{namespace}-{block-name} استایل به شکلی است که می توانید آنرا شخصی سازی کنید
  • .wp-block-table استایل بلاک جدول
  • .wp-block-quote استایل نقل قول
  • .wp-block-columns استایل کلاس ستون ها
  • wp-block-verse استایل کلاس شعر
  • wp-block-pullquote استایل بلاک نقل قول کشیده
  • wp-block-code استایل بلاک کد ها

گوتنبرگ

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

چگونه در گوتنبرگ شبکه‌های اجتماعی اضافه کنیم

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

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

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

0

در شبکه های اجتماعی
نظرات کاربران

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

شما میتوانید برای وارد کردن لینک و کدهایHTML از تگ های زیر استفاده کنید : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>