قدم به قدم با ویرایشگر گوتنبرگ در وردپرس – گوتنبرگ را قورت دهید

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

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

اکنون به احتمال زیاد، اضافه کردن یک لینک به متن و یا قرار دادن یک عکس در کنار مطالب به راحتی شما را عصبانی می کند و دنبال یک چاره هستید تا به دوران طلایی ویرایشگر وردپرس در قبل از نسخه 5 بازگردید. از طرفی اضافه کردن چند ستون متن می تواند به کلی شما را از پا در بیاورد و شاید اصلاً درست کار نکند. قرار دادن فایل های PDF و غیره چطور؟

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

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

ویرایشگر گوتنبرگ | Gutenberg Editor چیست؟

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

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

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

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

اما ویرایشگر گوتنبرگ دقیقا چیست؟

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

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

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

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

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

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

همان طور که می دانید برای ایجاد یک نوشته ی جدید باید در داشبورد وردپرس به منوی نوشته ها / افزودن نوشته نوشته بروید.

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

اضافه کردن عنوان نوشته با ویرایشگر گوتنبرگ

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

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

بعد از واردکردن عنوان مورد نظر خود کلید Enter را فشار دهید تا به سطر بعدی بروید. بله ویرایشگر گوتنبرگ از این ویژگی ویرایشگر قدیمی برای ایجاد سطر جدید استفاده می کند.

ایجاد یک پاراگراف جدید در گوتنبرگ

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

  1.  با زدن این گزینه می توانید لیست کاملی از بلاک هایی که ویرایشگر گوتنبرگ از آن ها استفاده می کند و توسط وردرس و یا افزونه ها ایجاد شده اند را ببینید و به جای بلاک پاراگراف از آن ها استفاده کنید. با کلیک بر روی هر بلاک، آن بلاک جایگزین بلاک پاراگراف می شود.
  2. این گزینه یگ گروه ایجاد می کند. یک گروه شامل چندین بلاک مختلف می باشد.
  3. این گزینه  shortcut یا میانبر برای بلاک تصویر می باشد. با استفاده از بلاک تصویر می توانید یک عکس در متن خود قرار دهید.
  4.  این گزینه shortcut یا میانبر برای بلاک تیتر می باشد. با استفاده از بلاک تیتر می توانید از تیترهای مختلف H1 تا H6 در متن خود استفاده کنید.

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

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

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

کافی است بر روی بلاک یا بلوک موردنظر کلیک کنید تا تنظیمات نمایان شود مطابق تصویر زیر:

 

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

اگر قصد دارید از متن خط خورده و یا تگ <pre> و یا <code> در ویرایشگر گوتنبرگ استفاده کنید کافی است به تصویر زیر نگاه کنید:

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

پنچره یا تب تنظیمات سند در سایدبار سمت چپ

یک پنجره یا تب دیگر در سایدبار یا نوار کناری سمت چپ صفحه وجود دارد که سند نام دارد.

بر اساس اعداد موجود در تصویر بالا:

  1. کلیک بر روی تب یا پنجره ی سند
  2. وضعیت و زمان انتشار نوشته
  3. ویرایش پیوند یکتای نوشته
  4. مشخص کردن دسته یا دسته های این نوشته
  5. اضافه کردن برچسب یا برچسب های این نوشته
  6. تعیین تصویر شاخص یا تصویر ویژه یا تصویر اصلی برای این نوشته
  7. نوشتن یک متن چکیده اختصاصی برای این نوشته
  8. تنظیمات کامنت برای این نوشته

همان طور که می بینید تمام تنظیمات نوشته به صورت یکجا در اختیار شما قرار دارد.

اضافه کردن یک تصویر به نوشته با ویرایشگر گوتنبرگ 

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

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

پس از کلیک بر روی میانبر یا shortcut بلاک تصویر، بلاک پاراگراف به بلاک تصویر به صورت زیر تبدیل می شود:

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

برای اینکه تنظیمات بلاک تصویر را مشاهده کنیم بر روی بلاک تصویر کلیک کنید و در سایدبار سمت چپ تنظیمات مختص آن نمایش داده می شود:

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

با کلیک بر روی بلاک تصویر نوار ابزار در بالای صفحه ویژگی های جدید دیگری به شما می دهد مانند افزودن یک نوشته بر روی تصویر و تبدیل آن به بلاک های مشابه و غیره که در تصویر زیر این ابزار را مشاهده می کنید:

اضافه کردن فایل های قابل دانلود مانند عکس، فیلم، PDF و غیره

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

برای این کار بر روی دکمه ی + کلیک کنید و مانند عکس زیر از میان بلاک های عمومی، بلاک پرونده را انتخاب کنید:

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

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

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

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

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

همان طور که می دانید و نیاز چندانی به گفتن ندارد با کلیک بر روی دکمه ی که درون هر کدام از این ستون ها قرار دارد می توانید بلاک موردنظر خود مثلاً یک عکس یا متن را به آن اضافه کنید.

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

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

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

برای اضافه کردن بلاک فاصله کافی است بر روی دکمه ی + کلیک کنید و از منوی عناصر طرح، بلاک فاصله را انتخاب کنید.

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

قرار دادن محتوا از سایت های دیگر | Embed

مثال محتوای جاسازی شده را می توانید ویدیوهایی در نظر بگیرید که از آپارات و یا یوتیوب در سایت خود قرار می دهید. با استفاده از ویرایشگر گوتنبرگ شما می توانید از سایت های مختلفی مانند یوتیوب ، فیس بوک ، آپارات ، sound cloud و غیره که بیش از 30 مورد در حالت پیش فرض هستند محتوا را به صورت Embed در سایت خود قرار دهید.

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

بر روی دکمه ی + کلیک کنید و بر روی منوی جاسازی ها که مانند شکل زیر است کلیک کنید:

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

برای مثال بلاک اینستاگرام را اضافه می کنیم:

بعد از اضافه کردن بلاک موردنظر یک لینک از اینستاگرام، به عنوان مثال لینک یک پست را در بلاک قرار می دهیم و مانند زیر بر روی جاسازی کلیک می کنیم:

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

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

نحوه قراردادن کد کوتاه در نوشته با استفاده از ویرایشگر گوتنبرگ

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

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

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

قراردادن رسانه و متن در کنار یکدیگر

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

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

 

نمونه ای از این نوع بلاک را در تصویر زیر می توانید ببینید:

بلاک های دیگر

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

در تصویر زیر می توانید بلاک های مخصوص افزونه ی ووکامرس را ببینید:

 

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

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

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

پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .