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

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

تا پیش از انتشار نسخه ۵ وردپرس، کاربران برای ساخت جدول، افزودن دکمه، چیدمان چندستونه یا حتی تغییر رنگ پس‌زمینه یک پاراگراف مجبور به نوشتن کدهای HTML و CSS یا نصب افزونه‌های جانبی متعدد بودند. ویرایشگر گوتنبرگ (Gutenberg) با تغییر ساختار تولید محتوا به «بلوک‌ها» این محدودیت را برطرف کرده است تا بتوانید برگه‌ها و نوشته‌های سایت را به شکل بصری صفحه‌آرایی کنید.

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

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

گوتنبرگ نام ویرایشگر پیش‌فرضی است که در اواخر سال ۲۰۱۸ همراه با نسخه ۵ وردپرس معرفی شد و نام خود را از یوهانس گوتنبرگ، مخترع دستگاه چاپ، گرفته است. این ادیتور مستقیماً روی هسته وردپرس اجرا می‌شود و برای استفاده از آن در وردپرس نسخه ۵ به بالا، نیازی به نصب افزونه جدیدی ندارید.

ویژگی اصلی گوتنبرگ، ساختار بلوک‌محور (Block-based) آن است؛ به همین دلیل به آن «ویرایشگر بلوک وردپرس» نیز می‌گویند. در این ساختار، هر المان صفحه از جمله پاراگراف، تیتر، تصویر، ویدیو یا گالری داخل یک واحد مستقل به نام «بلوک» یا «بلاک» قرار می‌گیرد. ماژولار بودن این بلوک‌ها به شما اجازه می‌دهد هر بخش از محتوا را به صورت جداگانه ویرایش کنید، تنظیمات اختصاصی به آن بدهید و جای آن را با بلوک‌های بالایی یا پایینی عوض کنید. همچنین این چیدمان به شما نشان می‌دهد که صفحه پس از انتشار چه ظاهری خواهد داشت.

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

مهم‌ترین تفاوت این دو ابزار در نحوه ثبت و مدیریت محتواست. محیط ویرایشگر کلاسیک وردپرس شباهت زیادی به نرم‌افزار Word دارد و یک کادر متنی یکپارچه در اختیار شما می‌گذارد که باید تصاویر، ویدیوها و کدهای کوتاه را لابه‌لای متن قرار دهید. در ویرایشگر کلاسیک برای تغییر رنگ یا هایلایت کردن بخش‌ها، ساخت جدول و ایجاد دکمه دست شما بسته است و باید از کدهای HTML/CSS یا پلاگین‌های کمکی استفاده کنید؛ اما در گوتنبرگ برای هرکدام از این موارد یک بلوک آماده وجود دارد.

مقایسه محیط ویرایشگر کلاسیک وردپرس و ویرایشگر بلوک گوتنبرگ در دو قاب کنار هم

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

  • به دلیل تفاوت ظاهری و امکانات جدید، کار با آن در ابتدا برای افراد تازه‌کار یا کسانی که به محیط ساده ادیتور کلاسیک عادت دارند، کمی گیج‌کننده و زمان‌بر است.
  • برخی تنظیمات پیشرفته طراحی در آن محدود است و همچنان به نوشتن کدهای HTML یا CSS نیاز دارد.
  • قالب‌های قدیمی وردپرس که پیش از معرفی گوتنبرگ طراحی شده‌اند و به‌روزرسانی نشده‌اند، ممکن است با این ویرایشگر سازگاری کامل نداشته باشند.
آموزش جامع طراحی سایت با وردپرس
آموزش جامع طراحی سایت با وردپرس
1,599,000 959,400 تومان
40%

مقایسه گوتنبرگ با صفحه‌سازهایی مثل المنتور

پیش از معرفی گوتنبرگ، کاربران برای صفحه‌آرایی حرفه‌ای سراغ افزونه‌های صفحه‌ساز مانند المنتور (Elementor) و ویژوال کامپوزر (Visual Composer) می‌رفتند. اگر گوتنبرگ را با صفحه‌سازهایی مثل المنتور مقایسه کنیم، المنتور به دلیل ابزارهای طراحی گسترده، در قدرت ظاهرسازی و چیدمان‌های پیچیده برتری دارد.

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

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

ویژگیویرایشگر گوتنبرگویرایشگر کلاسیکصفحه‌ساز المنتور
ساختار محتواماژولار و مبتنی بر بلوک (Block)کادر متنی یکپارچه (شبیه نرم‌افزار Word)بصری و مبتنی بر بخش، ستون و ابزارک
ساخت جدول، دکمه و ستوندارای بلوک پیش‌فرض (بدون نیاز به کد یا افزونه)نیازمند نصب افزونه جانبی یا کدنویسی HTML/CSSدارای المان‌های پیشرفته و آماده
سرعت اجرا و تاثیر بر سایتسرعت بالا به دلیل اجرا روی هسته وردپرسسبک و سریعسنگین‌تر؛ احتمال کاهش سرعت سایت به دلیل حجم کدها
منحنی یادگیریکمی گیج‌کننده در شروع، اما ساده پس از آشنایی با بلوک‌هاساده و آشنا برای کاربران تازه‌کارنیازمند یادگیری کار با رابط کاربری و تنظیمات طراحی

آشنایی با محیط و بخش‌های مختلف ادیتور گوتنبرگ

برای دسترسی به ویرایشگر بلوک، نیازی به تنظیمات خاصی در قالب‌های آماده یا قالب پیش‌فرض ندارید. کافی است پس از ورود به پیشخوان وردپرس، از منوی سمت راست به مسیر «نوشته‌ها > افزودن نوشته» یا «برگه‌ها > افزودن برگه» بروید (ویرایش نوشته‌ها و برگه‌های قبلی نیز در همین محیط انجام می‌شود).

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

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

  • نوار ابزار بالا (Top Toolbar): در بالای صفحه قرار دارد و شامل دکمه افزودن بلوک (+)، دکمه‌های بازگردانی تغییرات (Undo/Redo)، ذخیره پیش‌نویس، پیش‌نمایش و دکمه انتشار است.
  • بخش اصلی محتوا: فضای میانی صفحه است که محتوای خود را در آن وارد می‌کنید. اولین بلوک پیش‌فرض در این بخش، کادر «افزودن عنوان» (Add Title) است که عنوان نوشته یا برگه در آن تایپ می‌شود. زیر عنوان، بخش نوشتن محتوا (Start writing or type / to choose a block) قرار دارد.
  • ستون کناری تنظیمات (Sidebar): این ستون در سمت چپ صفحه (در وردپرس فارسی) قرار گرفته و شامل دو تب مجزا است:
  • تب نوشته / سند (Post / Document): تنظیمات کلی مربوط به کل پست در این تب قرار دارد؛ مواردی مانند وضعیت انتشار، دسته‌بندی‌ها، برچسب‌ها، تصویر شاخص و بخش انتخاب «نویسنده» (گزینه تغییر نویسنده در بالای فرم این تب قرار دارد، اما تنها زمانی نمایش داده می‌شود که سایت شما بیش از یک نویسنده داشته باشد).
  • تب بلوک (Block): تنظیمات اختصاصی مربوط به همان بلوکی که در حال کار روی آن هستید را نمایش می‌دهد. محتوای این تب بسته به اینکه روی بلوک متن، تصویر یا جدول کلیک کرده باشید، تغییر می‌کند.

آموزش کار با ویرایشگر گوتنبرگ (مدیریت بلوک‌ها)

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

نحوه افزودن بلوک جدید

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

منوی افزودن بلوک جدید در گوتنبرگ با کادر جستجو و آیکون‌های پاراگراف و تصویر
  1. استفاده از دکمه +: روی علامت + در گوشه بالای صفحه یا داخل محیط ویرایشگر کلیک کنید. با این کار، لیست بلوک‌های رایج و کادر جستجو باز می‌شود. می‌توانید نام بلوک مورد نظر را در کادر جستجو تایپ کنید یا با کلیک روی گزینه «مرور کردن همه»، لیست کامل تمام بلوک‌های موجود را ببینید و روی گزینه دلخواه کلیک کنید.
  2. استفاده از میانبر اسلش (/): در یک خط جدید، علامت / را تایپ کنید تا فهرستی از بلوک‌ها باز شود. بلافاصله پس از اسلش، نام بلوک (مثلاً تصویر یا ویدیو) را تایپ کرده و با زدن کلید Enter آن را به صفحه اضافه کنید.
  3. زدن کلید Enter: وقتی در حال تایپ در یک بلوک پاراگراف هستید و نشانگر ماوس در انتهای متن قرار دارد، کافی است کلید Enter را بزنید تا یک بلوک پاراگراف جدید به صورت خودکار در خط بعدی ساخته شود.

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

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

نوار ابزار بالای بلوک در گوتنبرگ با نمایش فلش‌های بالا و پایین و آیکون شش نقطه
  • فلش‌های بالا و پایین: با هر بار کلیک روی این فلش‌ها، بلوک انتخاب‌شده یک پله به بالا یا پایین منتقل می‌شود.
  • آیکون ۶ نقطه (Drag & Drop): با نگه داشتن کلیک ماوس روی آیکون ۶ نقطه، می‌توانید بلوک را بکشید و در هر جای صفحه که می‌خواهید رها کنید.

(نکته: فاصله‌ای که حین تایپ بین دو بلوک پاراگراف در محیط ویرایشگر می‌بینید صرفاً برای جداسازی بصری بلاک‌ها در پنل مدیریت است و تاثیری روی ظاهر نهایی متن در سایت ندارد).

سفارشی‌سازی و حذف بلوک

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

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

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

برای حذف کردن یک بلوک، مراحل زیر را انجام دهید:

  1. روی بلوک مورد نظر کلیک کنید تا انتخاب شود.
  2. در نوار ابزار بالای همان بلوک، روی آیکون سه نقطه کلیک کنید.
  3. از انتهای منوی بازشده، گزینه پاک کردن بلاک (Remove block) را انتخاب کنید.

هشدار: هنگام حذف بلوک، هیچ پیامی برای تایید حذف به شما نمایش داده نمی‌شود و بلاک بلافاصله پاک می‌شود. اگر بلوکی را به اشتباه حذف کردید، می‌توانید از دکمه بازگردانی (Undo) در نوار ابزار بالای صفحه استفاده کنید یا کلیدهای ترکیبی Ctrl + Z در ویندوز و لینوکس (یا Cmd + Z در مک) را فشار دهید.

معرفی و نحوه استفاده از کاربردی‌ترین بلوک‌های گوتنبرگ

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

بلوک‌های متنی، تیتر و لینک‌دهی

پاراگراف و تیترها پرکاربردترین بلوک‌های متنی هستند. برای نوشتن متن معمولی، حتی نیازی به انتخاب بلوک از لیست ندارید؛ کافی است روی عبارت Start writing or type / to choose a block کلیک و شروع به تایپ کنید تا گوتنبرگ به صورت خودکار یک بلوک پاراگراف برایتان بسازد. برای افزودن زیرعنوان‌ها، لیست‌های متنوع (بولت‌پوینت یا شماره‌گذاری‌شده) و نقل‌قول نیز می‌توانید بلوک‌های اختصاصی آن‌ها را از لیست + انتخاب کنید.

(نکته سئو: عنوان اصلی که در کادر Title بالای صفحه می‌نویسید تگ H1 صفحه را تشکیل می‌دهد؛ بنابراین در داخل محتوا از تگ‌های H2 و H3 برای تیترها استفاده کنید و تگ H1 را درون H2 نسازید).

برای لینک‌دهی به متن:

  1. بخشی از متن را در بلوک پاراگراف یا تیتر انتخاب کنید.
  2. روی آیکون لینک در نوار ابزار بالای بلوک کلیک کنید یا کلیدهای میانبر Ctrl + K را بزنید.
  3. آدرس مقصد (URL) را در کادر بازشده وارد کنید. همچنین می‌توانید بدون وارد کردن آدرس، عنوان یکی از مطالب قبلی سایت را در همان کادر جستجو کرده و با کلیدهای جهت‌نما (بالا و پایین) به محتوای داخلی موجود لینک بدهید.
  4. در صورت تمایل، گزینه باز شدن لینک در تب جدید (Open link in a new tab) را فعال کنید.

افزودن تصویر، گالری و کاور

برای درج عکس در محتوا، بلوک تصویر (Image) را اضافه کنید. پس از ایجاد این باکس، سه روش برای قرار دادن عکس دارید:

بلوک تصویر در گوتنبرگ با دکمه‌های بارگذاری و کتابخانه رسانه
  • کلیک روی دکمه بارگذاری (Upload) و انتخاب عکس از کامپیوتر.
  • کلیک روی کتابخانه رسانه (Media Library) و انتخاب از میان تصاویر موجود در سایت.
  • کشیدن و رها کردن (Drag & Drop): می‌توانید فایل عکس را مستقیماً از دسکتاپ کامپیوتر بکشید و در صفحه ویرایشگر یا داخل بلوک تصویر رها کنید تا به صورت خودکار آپلود شود.

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

برای ساخت گالری تصاویر نیز دقیقاً مشابه بلوک عکس، باید بلوک «گالری» را انتخاب و تصاویر را بارگذاری کنید. همچنین اگر می‌خواهید یک تصویر عریض همراه با متن و افکت‌های گرافیکی در نوشته یا برگه داشته باشید، از بلوک کاور (Cover) استفاده کنید؛ این بلوک به شما اجازه می‌دهد روی عکس انتخاب‌شده افکت‌ها و تنظیمات سفارشی اعمال کنید.

ایجاد جدول بدون نیاز به افزونه

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

ساخت محتوای چندستونه، ردیف و استک

برای اینکه بخش‌هایی از محتوا را در کنار هم بچینید، می‌توانید از بلوک ستون‌ها (Columns) استفاده کنید. این بلوک به شما امکان می‌دهد در هر ردیف تا حداکثر ۶ ستون ایجاد کنید و داخل هر ستون، بلوک‌های دلخواه خود (متن، عکس، دکمه و…) را قرار دهید.

چیدمان سه ستونه محتوا با استفاده از بلوک ستون‌ها در ویرایشگر گوتنبرگ

علاوه بر ستون‌ها، بلوک‌های ردیف (Row) و استک (Stack) برای چیدمان افقی و عمودی بلوک‌ها در دسترس هستند. برای تنظیم فاصله عمودی بین المان‌ها یا کشیدن خط افقی بین دو بخش نیز می‌توانید از بلوک‌های فاصله‌گذار (Spacer) و جداکننده (Separator) یا «جداکننده برگه» استفاده کنید.

افزودن دکمه، کد کوتاه (Shortcode) و رسانه و متن

  • دکمه (Button): بدون نیاز به کدنویسی یا افزونه، بلوک دکمه را به صفحه اضافه کنید، متن و لینک آن را بنویسید و از ستون سمت چپ، رنگ و استایل دکمه را تغییر دهید.
  • رسانه و متن (Media & Text): یک بلوک ترکیبی است که به شما اجازه می‌دهد یک تصویر را دقیقاً در کنار یک بلوک متنی قرار دهید.
  • کد کوتاه (Shortcode): برای استفاده از شورت‌کدها، هم می‌توانید مانند ویرایشگر کلاسیک کد را مستقیماً داخل یک بلوک متنی کپی کنید و هم می‌توانید بلوک اختصاصی «کد کوتاه» را به صفحه اضافه کرده و کد را در آن قرار دهید. (اگر قالب شما شورت‌کدهای اختصاصی دارد که آیکون آن‌ها در گوتنبرگ دیده نمی‌شود، می‌توانید کدهای ساخته‌شده قبلی را کپی و در این بلوک جای‌گذاری کنید).

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

دو نکته مهم درباره بلوک‌های ویدیو و شبکه‌های اجتماعی:

  1. با اینکه کشیدن و رها کردن (Drag & Drop) برای افزودن عکس بسیار کاربردی است، اما این کار را برای فایل‌های ویدیویی انجام ندهید و ویدیوها را از طریق بلوک اختصاصی خودشان یا کدهای اسکریپت اضافه کنید.
  2. گوتنبرگ برای شبکه‌های اجتماعی مانند یوتیوب، توییتر و فیسبوک بلوک‌های جاسازی (Embed) دارد، اما بلوک «اینستاگرام» در نسخه‌های جدیدتر وردپرس حذف شده است.

ذخیره بلاک‌ها برای استفاده مجدد (Reusable Blocks)

یکی از قابلیت‌های کاربردی گوتنبرگ برای وبلاگ‌نویسان و تولیدکنندگان محتوا، امکان ساخت و ذخیره یک بلوک سفارشی (مثلاً یک باکس دانلود یا دکمه فراخوان با استایل و متن مشخص) برای استفاده در سایر نوشته‌ها و برگه‌ها است. این بلوک‌ها در دیتابیس وردپرس ذخیره می‌شوند و قابلیت ویرایش، حذف و برون‌ریزی (Export) دارند.

پنجره ذخیره و نام‌گذاری بلوک قابل استفاده مجدد در گوتنبرگ

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

  1. بلوک مورد نظر خود را بسازید و استایل، رنگ و محتوای آن را تکمیل کنید.
  2. روی دکمه منو (آیکون سه نقطه) در نوار ابزار بالای همان بلوک کلیک کنید.
  3. گزینه ایجاد بلوک قابل استفاده مجدد (Add to reusable blocks) را انتخاب کنید.
  4. یک نام مشخص برای بلوک خود بنویسید و روی دکمه ذخیره (Save) کلیک کنید.
  5. برای استفاده از این بلوک در سایر نوشته‌ها یا برگه‌ها، کافی است روی دکمه افزودن بلوک (+) کلیک کنید، نامی را که ذخیره کرده‌اید در کادر جستجو بنویسید یا از بخش «مرور کردن همه» وارد تب قابل استفاده دوباره شوید و بلوک خود را انتخاب کنید.

تنظیمات انتشار و به‌روزرسانی نوشته در گوتنبرگ

پس از تکمیل محتوا، نوبت به تنظیم اطلاعات شناسنامه‌ای پست (متادیتا) و انتشار آن می‌رسد. تمام تنظیماتی که در ویرایشگر قدیمی وجود داشت، در گوتنبرگ زیر تب نوشته / سند (Post / Document) در ستون سمت چپ قرار گرفته است. از این بخش می‌توانید زمان و تاریخ انتشار، دسته‌بندی‌ها، برچسب‌ها و تصویر شاخص را مشخص کنید.

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

نکته مهم برای تغییر پیوند یکتا (نامک) قبل از انتشار:

در محیط گوتنبرگ، ممکن است پیش از انتشار مطلب گزینه ویرایش آدرس (پیوند یکتا) را مشاهده نکنید. برای اینکه بتوانید آدرس URL مطلب را قبل از انتشار تغییر دهید، کافی است یک‌بار روی دکمه «ذخیره پیش‌نویس» در نوار بالای صفحه کلیک کنید تا فیلد ویرایش پیوند یکتا برایتان فعال شود.

فرآیند انتشار نوشته جدید در گوتنبرگ دو مرحله‌ای (دو کلیکی) است:

  1. ابتدا روی دکمه انتشار (Publish) در گوشه بالای صفحه کلیک کنید.
  2. یک چک‌لیست کوتاه از تنظیمات و پیشنهادهای پیش از انتشار (مانند بررسی وضعیت نمایش و دسته‌بندی) باز می‌شود. پس از بررسی آن‌ها، دوباره روی دکمه انتشار کلیک کنید.
  3. پس از انتشار، یک اعلان کوچک در گوشه پایین صفحه ظاهر می‌شود که لینک مشاهده مستقیم پست منتشرشده را در اختیارتان می‌گذارد.

برای به‌روزرسانی نوشته‌های قبلی، فرآیند تنها با یک کلیک انجام می‌شود؛ کافی است پست منتشرشده را باز کنید، تغییرات را اعمال کرده و روی دکمه به‌روزرسانی (Update) در بالای صفحه کلیک کنید.

کار با افزونه‌های جانبی و قالب‌های آماده در گوتنبرگ

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

افزونه‌های بهینه‌سازی سایت مانند Yoast SEO و Rank Math نیز با محیط گوتنبرگ سازگار هستند. پس از نصب یواست سئو یا رنک مث، تنظیمات و چک‌لیست‌های آن‌ها در ستون سمت چپ ویرایشگر (و همچنین به عنوان بلوک‌های قابل افزودن به صفحه) در دسترس قرار می‌گیرند تا بتوانید مطالب خود را هم‌زمان با نگارش و در راستای آموزش سئو سایت، طبق اصول آموزش سئو وردپرس بهینه‌سازی کنید. (در صورتی که باکس یواست سئو فیلدهای کلمه کلیدی و چک‌لیست را نمایش نمی‌دهد، باید افزونه و وردپرس خود را به آخرین نسخه به‌روزرسانی کنید).

همچنین گوتنبرگ دارای بخش «الگوهای آماده» (Patterns) است که چیدمان‌های از پیش طراحی‌شده‌ای را در اختیارتان می‌گذارد. اگر به طرح‌ها و قالب‌های آماده بیشتری در محیط گوتنبرگ نیاز دارید، می‌توانید افزونه Extendify را نصب کنید تا تعداد قالب‌های آماده ویرایشگر افزایش یابد.

آموزش صفر تا صد طراحی سایت با وردپرس
آموزش صفر تا صد طراحی سایت با وردپرس
1,199,000 839,300 تومان
30%

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

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

میانبرهای صفحه‌کلید و افزایش سرعت تولید محتوا

  • ثابت کردن نوار ابزار در بالای صفحه: به صورت پیش‌فرض، نوار ابزار هر بلوک دقیقاً بالای خود همان بلوک شناور است. اگر ترجیح می‌دهید یک نوار ابزار ثابت در بالای صفحه داشته باشید، روی آیکون سه نقطه در گوشه بالای سمت چپ ویرایشگر کلیک کرده و گزینه نوار ابزار بالا (Top Toolbar) را فعال کنید.
  • مشاهده لیست کامل شورت‌کات‌ها: علاوه بر میانبر / برای فراخوانی بلوک‌ها و Ctrl + K برای لینک‌دهی، گوتنبرگ شورت‌کات‌های متعددی دارد. برای دیدن فهرست کامل آن‌ها، روی منوی سه نقطه در گوشه بالای صفحه کلیک کنید و گزینه میانبرهای صفحه‌کلید (Keyboard Shortcuts) را انتخاب کنید.
  • بهبود فونت محیط ویرایشگر: برای اینکه هنگام تایپ در محیط گوتنبرگ خوانایی متن بهتر شود، می‌توانید با افزودن کدهای CSS دلخواه به پنل مدیریت وردپرس، یک فونت استاندارد فارسی مانند «ایران‌سنس» یا «ایران‌یکان» را به محیط ویرایشگر اضافه کنید.
  • حذف استایل متن‌های کپی‌شده: اگر متنی را از جای دیگر کپی کرده‌اید و می‌خواهید بدون استایل (به صورت متن ساده) در گوتنبرگ قرار بگیرد، می‌توانید متن را ابتدا در نوار آدرس مرورگر پیست و دوباره کپی کنید و سپس وارد گوتنبرگ نمایید (البته این کار لینک‌های درون متن را هم حذف می‌کند).
پنجره میانبرهای صفحه‌کلید و گزینه فعال‌سازی نوار ابزار بالا در گوتنبرگ

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

تراز کردن (Justify) متن، نمایش کدهای HTML و ویدیوی آپارات

  • چگونه متن را در گوتنبرگ Justify (هم‌تراز از دو طرف) کنیم؟
    گوتنبرگ به صورت پیش‌فرض دکمه‌ای برای تراز کردن متن از دو طرف (Justify) در نوار ابزار خود ندارد. برای اینکه پاراگراف‌های سایت شما به صورت جاستیفای نمایش داده شوند، باید قطعه کد CSS زیر را به استایل‌های قالب خود اضافه کنید:
p {
    text-align: justify;
}
  • چگونه کدهای HTML کل مطلب را ببینیم؟
    در ویرایشگر کلاسیک تب مجزایی به نام «متنی» برای دیدن کدهای HTML وجود داشت. در گوتنبرگ برای سوئیچ کردن به نمای کدها و آموزش ویرایش کد html در وردپرس برای کل صفحه، کافی است کلیدهای ترکیبی Ctrl + Alt + Shift + M را روی کیبورد فشار دهید. همچنین اگر هنگام کار با یک بلوک با خطای «محتوای بلوک حاوی محتوای غیرمنطقی یا غیرمجاز است» روبه‌رو شدید، معمولاً به این دلیل است که کدهای HTML آن بلوک به هم ریخته یا یکی از افزونه‌های مرورگر شما تغییری در کدهای HTML ایجاد کرده است.
  • کد ویدیوی آپارات را در کدام بلوک قرار دهیم؟
    برای قرار دادن کد اسکریپت ویدیوهای آپارات در نوشته، باید یک بلوک HTML سفارشی یا بلوک کد کوتاه (Shortcode) ایجاد کنید و کد را درون آن قرار دهید. اگر با این دو روش ویدیو در سایت نمایش داده نشد، می‌توانید افزونه aparat for wp را نصب کنید.

نحوه بازگشت از گوتنبرگ به ویرایشگر کلاسیک

از نسخه ۵ وردپرس به بعد، گوتنبرگ ویرایشگر پیش‌فرض سیستم است. اگر پس از کار با این ادیتور همچنان ترجیح می‌دهید به همان محیط قدیمی برگردید، کافی است از منوی پیشخوان به بخش «افزونه‌ها > افزودن» بروید، عبارت ویرایشگر کلاسیک (Classic Editor) را جستجو و این افزونه رایگان را نصب و فعال کنید.

در مقابل، اگر در حال حاضر ویرایشگر سایت شما روی حالت کلاسیک است و می‌خواهید در بخش نوشته‌ها و برگه‌ها از گوتنبرگ استفاده کنید، نیازی به نصب پلاگین جدیدی ندارید؛ تنها کافی است به بخش «افزونه‌ها» بروید و افزونه Classic Editor را غیرفعال کنید تا ویرایشگر گوتنبرگ به صورت خودکار فعال شود. همچنین در داخل خود محیط گوتنبرگ نیز بلوکی به نام «ویرایشگر کلاسیک» وجود دارد که امکان استفاده از نوار ابزار قدیمی را در قالب یک بلوک در اختیارتان می‌گذارد.

https://maktabkhooneh.org/mag/wordpress-gutenberg-tutorial/
تصویر مهناز محمدی

مهناز محمدی

0 0 امتیازها
امتیاز دهی به محتوا
مشترک شوید
اطلاع از
guest
0 دیدگاه
قدیمی ترین
جدید ترین دیدگاه با تعداد رای زیاد
مقالات بیشتر
نوار آدرس مرورگر با قفل امنیتی HTTPS در کنار پنل تنظیمات گواهی SSL دایرکت ادمین

آموزش نصب SSL در دایرکت ادمین (رایگان و تجاری) + رفع خطاها

نمایش نوار آدرس مرورگر با پروتکل امن HTTPS و آیکون قفل در کنار پیشخوان وردپرس

آموزش نصب SSL در وردپرس (با افزونه و دستی) + رفع خطاها

فرم ورود کد تایید در لپ‌تاپ در کنار گوشی هوشمند حاوی پیامک کد یک‌بارمصرف

آموزش افزونه دیجیتس (Digits)؛ راهنمای تنظیمات ثبت نام پیامکی در وردپرس

نمایش محیط کنترل‌پنل سی‌پنل و پنجره نصب وردپرس روی مانیتور

آموزش نصب وردپرس در cPanel (راهنمای گام‌به‌گام و تصویری)

نمایش هم‌زمان بخش Domains در پنل هاست و فرم تنظیمات نیم‌سرور روی مانیتور

آموزش اتصال دامنه به هاست در سی پنل (راهنمای گام‌به‌گام تنظیم DNS)

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

آموزش cPanel؛ راهنمای گام‌به‌گام کار با سی پنل برای مبتدی‌ها