آموزش کامل ویرایشگر بلوکی وردپرس یا Gutenberg؛ از صفر تا حرفه‌ای

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

در این آموزش کامل Gutenberg از آشنایی با رابط ویرایشگر شروع می‌کنیم و به ابزارهای حرفه‌ای مانند List View، Group، Row، Stack، Columns، Pattern، Synced Pattern، Block Locking، Command Palette، ویرایش کد، میانبرهای صفحه‌کلید، طراحی واکنش‌گرا و رفع خطاهای بلوک می‌رسیم. هدف این است که پس از پایان مقاله بتوانید یک نوشته یا برگه استاندارد را از ابتدا بسازید، ساختار آن را مدیریت کنید و بدون وابستگی غیرضروری به صفحه‌سازهای سنگین، چیدمان‌های حرفه‌ای ایجاد کنید.

Gutenberg چیست و چه تفاوتی با ویرایشگر کلاسیک دارد؟

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

در ویرایشگر کلاسیک، متن، تصویر و کد معمولاً داخل یک محیط مشابه نرم‌افزار واژه‌پرداز قرار می‌گرفتند. تغییر چیدمان پیچیده نیازمند Shortcode، HTML یا صفحه‌ساز بود. در ویرایشگر بلوکی هر جزء هویت مستقل دارد و تنظیمات خودش را دریافت می‌کند. می‌توانید یک تصویر را تمام‌عرض کنید، دو دکمه را داخل Row قرار دهید، چند بخش را Group کنید و بدون دست زدن به سایر بخش‌ها، فاصله و رنگ همان قسمت را تغییر دهید.

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

ساختار کلی رابط ویرایشگر بلوکی

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

نوار ابزار بالای صفحه

در بالای ویرایشگر، دکمه افزودن بلوک، ابزارها، Undo و Redo، نمای فهرست، جزئیات سند، پیش‌نمایش، ذخیره، انتشار و تنظیمات قرار دارند. افزونه‌هایی مانند Rank Math نیز آیکن یا پنل خود را به همین نوار اضافه می‌کنند.

بوم محتوا یا Content Canvas

بخش میانی محل ساخت محتواست. بلوک‌ها در این قسمت اضافه و ویرایش می‌شوند. ظاهر این بوم تا حدی از استایل قالب تأثیر می‌گیرد، اما پیش‌نمایش نهایی سایت را باید جداگانه باز کنید؛ زیرا نمایش داخل مدیریت همیشه کاملاً برابر Front-end نیست.

پنل تنظیمات سمت چپ یا راست

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

نوار ابزار شناور بلوک

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

چگونه یک بلوک جدید اضافه کنیم؟

چند روش برای افزودن بلوک وجود دارد:

• کلیک روی دکمه + در نوار بالای صفحه
• کلیک روی + میان بلوک‌های موجود
• تایپ علامت / در یک خط خالی و نوشتن نام بلوک
• استفاده از میانبرهای تبدیل متن مانند ## برای تیتر
• Drag & Drop بلوک از Inserter به محل مورد نظر

روش Slash Inserter معمولاً سریع‌ترین راه است. برای مثال عبارت /image بلوک تصویر و /columns بلوک ستون‌ها را پیشنهاد می‌دهد. در رابط فارسی ممکن است نام‌های فارسی یا انگلیسی هر دو قابل جست‌وجو باشند.

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

بلوک پاراگراف

بلوک Paragraph برای متن معمولی استفاده می‌شود. با فشردن Enter یک پاراگراف جدید ساخته می‌شود. برای رفتن به خط بعد بدون ساخت بلوک تازه، معمولاً Shift+Enter کاربرد دارد. در نوار ابزار می‌توانید متن را Bold، Italic، لینک‌دار، کد یا Highlight کنید.

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

بلوک تیتر

Heading برای ساخت ساختار مقاله استفاده می‌شود. عنوان اصلی نوشته معمولاً توسط وردپرس به‌عنوان H1 نمایش داده می‌شود؛ بنابراین داخل محتوا از H2 برای بخش‌های اصلی و H3 برای زیرمجموعه‌ها استفاده کنید. تیترها را برای بزرگ کردن متن به کار نبرید.

ساختار منطقی تیترها هم به کاربر کمک می‌کند و هم برای موتور جست‌وجو و فناوری‌های کمکی قابل فهم‌تر است. پرش از H2 به H4 بدون دلیل، سلسله‌مراتب صفحه را مبهم می‌کند.

بلوک فهرست

List برای فهرست بولت‌دار یا شماره‌دار مناسب است. در نسخه‌های جدید وردپرس، هر مورد فهرست می‌تواند به‌صورت List Item مستقل مدیریت شود. می‌توانید تورفتگی، ترتیب شروع، رنگ، فاصله و تایپوگرافی را تنظیم کنید.

بلوک نقل‌قول و Pullquote

Quote برای نقل‌قول داخل جریان متن و Pullquote برای برجسته کردن یک جمله مهم استفاده می‌شود. نقل‌قول مستقیم باید منبع داشته باشد. از Pullquote برای نمایش هر جمله عادی استفاده نکنید؛ کاربرد زیاد آن تمرکز صفحه را از بین می‌برد.

بلوک کد و Preformatted

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

بلوک جدول

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

بلوک Details

Details محتوای بازشونده ایجاد می‌کند. عنوان در Summary قرار می‌گیرد و محتوای داخل آن با کلیک کاربر نمایش داده می‌شود. این بلوک برای توضیح تکمیلی، پاسخ کوتاه یا بخش‌های طولانی مناسب است؛ اما اطلاعات حیاتی را طوری پنهان نکنید که کاربر متوجه وجود آن نشود.

بلوک‌های رسانه‌ای در Gutenberg

بلوک تصویر

تصویر را از کتابخانه رسانه انتخاب، از رایانه آپلود یا از URL وارد کنید. در تنظیمات بلوک می‌توانید نسبت تصویر، ابعاد، تراز، لینک، Caption، گوشه‌های گرد و سبک را تغییر دهید. متن جایگزین یا Alt باید محتوای تصویر را توضیح دهد.

تصویر را پیش از آپلود به ابعاد مورد نیاز تبدیل و فشرده کنید. برای مقالات این سایت، تصویر شاخص ۱۶۰۰×۹۰۰ با فرمت WebP و حجم کمتر از ۷۰ کیلوبایت استفاده می‌شود. تصاویر داخل مقاله نیز نباید بزرگ‌تر از کاربرد واقعی باشند.

گالری

Gallery چند تصویر را در یک مجموعه نمایش می‌دهد. تعداد ستون، Crop و لینک تصاویر قابل تنظیم است. اگر تصاویر نسبت‌های متفاوت دارند، برش یکسان ممکن است بخش مهمی را حذف کند؛ پیش‌نمایش هر تصویر را بررسی کنید.

Media & Text

بلوک Media & Text یک رسانه و متن را کنار هم قرار می‌دهد و برای معرفی خدمات، ویژگی یا بخش داستانی مناسب است. گزینه Stack on mobile باعث می‌شود در صفحه کوچک، محتوا به‌صورت عمودی نمایش داده شود.

Cover

Cover تصویر یا رنگ پس‌زمینه‌ای دارد که می‌توان متن و بلوک‌های دیگر را روی آن قرار داد. برای Hero Section و بنر مناسب است. کنتراست متن و تصویر را بررسی کنید و از تصاویر بسیار سنگین پرهیز کنید. Overlay می‌تواند خوانایی متن را بهتر کند.

Audio، Video و Embed

وردپرس بلوک‌های صوت، ویدئو و Embed برای سرویس‌هایی مانند YouTube دارد. بارگذاری مستقیم ویدئوی سنگین روی هاست اشتراکی می‌تواند مصرف پهنای باند و منابع را بالا ببرد. در بیشتر پروژه‌ها استفاده از سرویس میزبانی ویدئو و Embed منطقی‌تر است.

بلوک‌های طراحی و چیدمان

Group

Group چند بلوک را داخل یک والد قرار می‌دهد. می‌توانید رنگ پس‌زمینه، Padding، Margin، عرض، ارتفاع و Border را روی کل مجموعه اعمال کنید. Group یکی از مهم‌ترین ابزارهای ساخت Section در Gutenberg است.

برای مثال یک تیتر، پاراگراف و دکمه را Group کنید و پس‌زمینه و فاصله مشترک بدهید. این روش بهتر از تنظیم جداگانه هر بلوک است و ساختار List View را منظم نگه می‌دارد.

Row

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

Stack

Stack عناصر را عمودی قرار می‌دهد و کنترل Gap میان آن‌ها را ساده می‌کند. برای کارت، ستون یا گروهی از متن و دکمه مناسب است.

Columns

Columns چیدمان چندستونه ایجاد می‌کند. وردپرس الگوهایی مانند ۵۰/۵۰ و ۳۰/۷۰ پیشنهاد می‌دهد. تعداد زیاد ستون در موبایل خوانایی را کاهش می‌دهد. گزینه Stack on mobile یا رفتار واکنش‌گرای قالب را بررسی کنید.

Spacer و Separator

Spacer فاصله عمودی ایجاد می‌کند و Separator خط یا جداکننده بصری می‌سازد. برای فاصله‌گذاری اصلی بهتر است از Margin، Padding و Block Gap استفاده کنید؛ Spacerهای متعدد می‌توانند طراحی واکنش‌گرا را دشوار کنند.

Buttons

Buttons یک بلوک والد است که Buttonهای جداگانه را نگهداری می‌کند. متن دکمه باید اقدام را روشن کند؛ مانند «مشاهده آموزش» یا «دریافت مشاوره». کنتراست، اندازه سطح کلیک و وضعیت Hover را در قالب بررسی کنید.

تنظیمات طراحی هر بلوک

گزینه‌های دقیق به بلوک و پشتیبانی قالب بستگی دارند. رایج‌ترین گروه‌های تنظیمات عبارت‌اند از:

رنگ

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

تایپوگرافی

اندازه فونت، وزن، Line Height، Letter Spacing، Column و ویژگی‌های دیگر بسته به بلوک و نسخه وردپرس نمایش داده می‌شوند. برای متن فارسی، فاصله خطوط و خوانایی حروف اهمیت زیادی دارد. فونت بسیار کوچک یا Line Height فشرده در موبایل مناسب نیست.

ابعاد و فاصله

Padding فاصله داخل کادر و Margin فاصله بیرون آن است. Block Gap فاصله میان فرزندان یک Group یا Row را کنترل می‌کند. استفاده از Presetهای قالب باعث می‌شود فاصله‌ها در کل سایت هماهنگ باشند.

Border و Shadow

برای بعضی بلوک‌ها می‌توانید Border، Radius و Shadow تعیین کنید. سایه‌های شدید و حاشیه‌های متنوع را محدود کنید. یک سیستم ثابت برای کارت‌ها و دکمه‌ها حرفه‌ای‌تر است.

Dimensions و Aspect Ratio

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

List View چیست و چرا ضروری است؟

List View ساختار درختی همه بلوک‌های صفحه را نشان می‌دهد. در یک صفحه ساده ممکن است با کلیک مستقیم بلوک را پیدا کنید، اما در طرح‌های دارای Group، Columns و بلوک‌های تودرتو، List View ضروری است.

از این بخش می‌توانید:

• بلوک والد و فرزند را تشخیص دهید.
• بلوک‌ها را Drag & Drop کنید.
• Group یا Column درست را انتخاب کنید.
• بلوک‌ها را تغییر نام دهید.
• ساختار محتوا را جمع و باز کنید.
• بلوک قفل‌شده را شناسایی کنید.

نام‌گذاری Groupهای مهم مانند «Hero»، «مزایا» یا «CTA پایانی» مدیریت صفحات بزرگ را آسان می‌کند. در غیر این صورت چندین Group بدون نام در List View دیده می‌شوند.

جابه‌جایی، کپی و تکثیر بلوک

از فلش‌های بالا و پایین یا Drag Handle برای جابه‌جایی استفاده کنید. Duplicate یک نسخه مشابه می‌سازد. Copy بلوک را با ساختار کامل در Clipboard قرار می‌دهد و Copy styles فقط استایل را برای انتقال به بلوک مشابه کپی می‌کند، اگر نسخه و بلوک از آن پشتیبانی کنند.

می‌توانید چند بلوک را هم‌زمان انتخاب و Group کنید. برای انتخاب چند بلوک، از Shift یا List View کمک بگیرید. هنگام انتقال بلوک میان ستون‌ها، به خط آبی محل Drop توجه کنید تا داخل والد اشتباه قرار نگیرد.

Transform یا تبدیل بلوک‌ها

وردپرس اجازه می‌دهد بعضی بلوک‌ها بدون حذف محتوا به نوع دیگری تبدیل شوند. پاراگراف می‌تواند تیتر، فهرست یا نقل‌قول شود. چند تصویر ممکن است به Gallery تبدیل شوند. Group می‌تواند در بعضی شرایط به Row یا Stack تغییر کند.

قبل از Transform پیچیده، پیش‌نمایش را بررسی کنید؛ زیرا همه تنظیمات میان دو نوع بلوک قابل انتقال نیستند.

Block Patterns یا الگوهای بلوکی

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

الگوها برای بخش‌هایی مانند معرفی خدمات، تیم، قیمت، Call to Action، FAQ و Hero مفیدند. به‌جای ساخت مجدد چیدمان، الگو را وارد و متن و تصویر را جایگزین می‌کنید.

Synced Pattern چیست؟

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

اگر می‌خواهید فقط یک نمونه را تغییر دهید، آن را Detach کنید تا به بلوک‌های مستقل تبدیل شود. قبل از ویرایش Synced Pattern، محل‌های استفاده را در نظر بگیرید؛ تغییر اشتباه ممکن است چندین صفحه را هم‌زمان تغییر دهد.

ساخت Pattern شخصی

1. بلوک‌های مورد نظر را انتخاب کنید.
2. منوی سه‌نقطه را باز کنید.
3. گزینه Create pattern را بزنید.
4. نام روشن و دسته مناسب انتخاب کنید.
5. مشخص کنید الگو Synced باشد یا معمولی.
6. ذخیره و در صفحه دیگر آزمایش کنید.

وردپرس از نسخه 6.3 امکان ساخت الگوهای شخصی را در هسته ارائه کرده است و الگوهای همگام جای مفهوم قدیمی Reusable Blocks را گرفته‌اند.

Block Locking و Content-only Editing

قفل بلوک می‌تواند جابه‌جایی یا حذف را محدود کند. این قابلیت برای صفحاتی که چند نویسنده دارند مفید است؛ مدیر ساختار را قفل می‌کند و نویسنده فقط متن را تغییر می‌دهد.

Content-only Editing در بعضی Patternها یا قالب‌ها رابط را ساده می‌کند تا کاربر فقط محتوای مجاز را ویرایش کند. در WordPress 7.0 کنترل‌های مربوط به ویرایش الگو و حالت‌های محدودشده توسعه یافته‌اند. دسترسی این گزینه‌ها به قالب، نوع الگو و سطح کاربر بستگی دارد.

ویرایش واکنش‌گرا و نمایش موبایل

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

در WordPress 7.0 امکانات کنترل نمایش براساس اندازه صفحه توسعه یافته‌اند، اما پشتیبانی عملی می‌تواند به بلوک و قالب وابسته باشد. از Preview برای Desktop، Tablet و Mobile استفاده کنید و سپس صفحه واقعی را روی دستگاه یا ابزار توسعه مرورگر بررسی کنید.

چک‌لیست موبایل

• ستون‌ها به ترتیب منطقی Stack می‌شوند.
• عنوان‌ها از عرض صفحه خارج نمی‌شوند.
• دکمه‌ها سطح لمس کافی دارند.
• تصاویر برش نامناسب ندارند.
• جدول و کد اسکرول افقی کنترل‌شده دارند.
• فاصله بالا و پایین بیش از حد نیست.
• متن روی Cover خوانا باقی می‌ماند.

Command Palette در وردپرس

Command Palette راهی سریع برای پیدا کردن صفحات و اجرای فرمان‌هاست. در ویندوز با Ctrl+K و در macOS با Cmd+K باز می‌شود. می‌توانید نوشته یا برگه را جست‌وجو کنید، به بخش‌های مدیریت بروید، بعضی تنظیمات را تغییر دهید و فرمان‌های مرتبط با بلوک‌ها را اجرا کنید.

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

Preferences و شخصی‌سازی محیط ویرایشگر

از منوی سه‌نقطه بالای صفحه وارد Preferences شوید. گزینه‌های متداول شامل موارد زیر هستند:

• Top Toolbar
• Spotlight Mode
• Distraction Free
• Fullscreen Mode
• نمایش یا مخفی کردن پنل‌های سند
• تنظیمات رابط و تعامل
• مدیریت Pre-publish Checklist

Spotlight Mode بلوک انتخاب‌شده را برجسته و سایر بخش‌ها را کم‌رنگ می‌کند. Distraction Free عناصر اضافی رابط را مخفی می‌کند تا تمرکز روی متن بیشتر شود.

میانبرهای مهم Gutenberg

• Ctrl/Cmd + S: ذخیره
• Ctrl/Cmd + Z: بازگشت
• Ctrl/Cmd + Shift + Z: انجام دوباره
• Ctrl/Cmd + K: افزودن لینک یا Command Palette براساس محل فوکوس
• Ctrl/Cmd + A: انتخاب متن یا همه بلوک‌ها با تکرار
• Ctrl/Cmd + Shift + D: تکثیر بلوک در بعضی محیط‌ها
• Alt + Shift + Z: حذف بلوک در میانبر استاندارد وردپرس
• /: جست‌وجوی سریع بلوک
• Shift + Enter: خط جدید داخل همان بلوک متنی

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

ویرایش HTML و Code Editor

در منوی بلوک، Edit as HTML اجازه می‌دهد Markup همان بلوک را ببینید. Code Editor کل محتوای نوشته را به شکل Block Markup نمایش می‌دهد. هر بلوک با Commentهای خاص وردپرس مانند <!-- wp:paragraph --> مشخص می‌شود.

تغییر دستی Markup باید با احتیاط انجام شود. حذف Comment یا تغییر ساختار مورد انتظار می‌تواند خطای «This block contains unexpected or invalid content» ایجاد کند. برای CSS سفارشی، استفاده از کلاس در Advanced و افزودن استایل در Child Theme یا بخش مناسب، از قراردادن Style پراکنده داخل محتوا بهتر است.

تنظیمات Advanced بلوک

در بخش Advanced معمولاً HTML Anchor و Additional CSS Class دیده می‌شوند. Anchor یک شناسه برای لینک مستقیم به همان بخش می‌سازد. برای مثال با Anchor برابر faq می‌توانید به #faq لینک دهید.

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

ساخت یک برگه حرفه‌ای با Gutenberg

برای تمرین، یک صفحه معرفی خدمات با ساختار زیر بسازید:

1. یک Cover یا Group تمام‌عرض برای Hero ایجاد کنید.
2. تیتر اصلی، متن کوتاه و دو دکمه داخل آن قرار دهید.
3. یک Group برای بخش مزایا بسازید.
4. داخل آن Columns سه‌ستونه قرار دهید.
5. در هر ستون یک تیتر و پاراگراف اضافه کنید.
6. یک Media & Text برای معرفی فرایند کار درج کنید.
7. یک بخش FAQ با Heading و Details بسازید.
8. CTA پایانی را به Pattern تبدیل کنید.
9. نمای موبایل و List View را بررسی کنید.

در سایت دارای WoodMart، ممکن است عرض محتوا، نمایش عنوان صفحه و سایدبار از تنظیمات برگه یا Theme Settings کنترل شود. اگر بلوک Full Width تمام صفحه نمی‌شود، محدودیت Container قالب را بررسی کنید.

Gutenberg در کنار WoodMart

WoodMart یک قالب تجاری با تنظیمات اختصاصی، HTML Blocks، Layout Builder و سازنده هدر است. ویرایشگر بلوکی برای نوشته‌ها و برگه‌ها قابل استفاده است، اما بعضی دموها یا اجزای قالب ممکن است برای Elementor یا WPBakery طراحی شده باشند.

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

پس از تغییر استایل بلوک، کش WoodMart، افزونه کش و CDN را پاک کنید. اگر ظاهر ویرایشگر با سایت متفاوت است، ممکن است Editor Styles قالب همه تنظیمات Front-end را شبیه‌سازی نکرده باشد.

Gutenberg در کنار Rank Math

Rank Math پنل سئو را به ویرایشگر اضافه می‌کند. در آن می‌توانید کلمه کلیدی، عنوان سئو، متا دیسکریپشن، Schema و پیش‌نمایش شبکه اجتماعی را تنظیم کنید. امتیاز سبز هدف نهایی نیست؛ ساختار محتوا و پاسخ به نیاز کاربر مهم‌تر است.

تیترهای H2 و H3، لینک داخلی، Alt تصویر و پیوند یکتای کوتاه را در جریان نگارش تنظیم کنید. برای انتشار مقاله، از راهنمای ساخت نوشته و انتشار مقاله در وردپرس استفاده کنید.

نسخه‌های بازبینی و Visual Revisions

وردپرس تغییرات نوشته را به‌صورت Revision ذخیره می‌کند. می‌توانید نسخه‌ها را مقایسه و نسخه قبلی را بازیابی کنید. WordPress 7.0 قابلیت مقایسه بصری Revisionها را بهبود داده است تا تغییرات طراحی و محتوا قابل فهم‌تر باشند.

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

خطای Block contains unexpected or invalid content

این خطا زمانی رخ می‌دهد که Markup ذخیره‌شده با ساختار مورد انتظار بلوک همخوانی ندارد. ویرایش دستی HTML، تغییر خروجی افزونه، Shortcode ناقص یا نسخه قدیمی بلوک از علت‌های رایج‌اند.

وردپرس معمولاً گزینه Attempt Block Recovery، Convert to HTML یا Convert to Classic Block را پیشنهاد می‌دهد. قبل از بازیابی، محتوای بلوک را کپی کنید. اگر خطا پس از آپدیت افزونه بلوک ایجاد شده، Changelog و نسخه سازگار را بررسی کنید.

رفع مشکل ناپدید شدن بلوک یا تنظیمات

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

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

رفع کندی ویرایشگر بلوکی

تعداد بسیار زیاد بلوک، افزونه‌های ویرایشگر، درخواست‌های API، Meta Boxهای سنگین و مرورگر کم‌حافظه می‌توانند Gutenberg را کند کنند. برای رفع مشکل:

• افزونه‌های بلوکی بلااستفاده را حذف کنید.
• خطاهای کنسول و REST API را بررسی کنید.
• مقاله بسیار بزرگ را منطقی بخش‌بندی کنید.
• نسخه PHP و منابع هاست را کنترل کنید.
• مرورگر و افزونه‌های مرورگر را آزمایش کنید.
• Heartbeat و Autosave را بدون دلیل غیرفعال نکنید.

کندی مدیریت الزاماً با کندی Front-end یکسان نیست. هر دو را جداگانه اندازه‌گیری کنید.

اشتباهات رایج کاربران Gutenberg

• استفاده از Heading فقط برای بزرگ کردن متن
• ساخت فاصله با چند بلوک خالی یا Spacer متعدد
• آپلود تصویر بسیار بزرگ
• استفاده از Columns زیاد در موبایل
• رنگ و فونت متفاوت برای هر بخش
• ساخت Groupهای تودرتوی بی‌نام
• ویرایش مستقیم HTML بدون بکاپ
• تبدیل صفحات صفحه‌ساز به Gutenberg بدون آزمایش
• ویرایش Synced Pattern بدون توجه به محل‌های استفاده
• اعتماد کامل به نمای ویرایشگر بدون Preview واقعی

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

• ساختار H2 و H3 منطقی است.
• پاراگراف‌ها خوانا و مستقیم‌اند.
• تصاویر فشرده و دارای Alt هستند.
• بلوک‌های تودرتو در List View مرتب‌اند.
• رنگ و فاصله از سیستم هماهنگ استفاده می‌کنند.
• نمای موبایل بررسی شده است.
• لینک‌ها و دکمه‌ها کار می‌کنند.
• دسته، تصویر شاخص و خلاصه تنظیم شده‌اند.
• اسلاگ انگلیسی و کوتاه است.
• متای سئو کمتر از ۱۶۰ کاراکتر است.
• Pattern همگام ناخواسته ویرایش نشده است.
• پیش‌نمایش Front-end و حالت ناشناس بررسی شده‌اند.

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

آیا برای استفاده از Gutenberg باید افزونه نصب کنیم؟

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

آیا Gutenberg جایگزین Elementor است؟

برای بسیاری از نوشته‌ها و صفحه‌های ساده تا متوسط، Gutenberg کافی است. Elementor ابزارهای طراحی و ویجت‌های گسترده‌تری دارد، اما منابع و وابستگی بیشتری ایجاد می‌کند. انتخاب به نیاز واقعی پروژه بستگی دارد.

آیا می‌توان نوشته قدیمی Classic Editor را در Gutenberg باز کرد؟

بله. محتوا ممکن است داخل Classic Block نمایش داده شود. می‌توانید آن را نگه دارید یا Convert to Blocks را آزمایش کنید. قبل از تبدیل مقاله پیچیده، نسخه بازبینی یا بکاپ داشته باشید.

تفاوت Pattern معمولی و Synced Pattern چیست؟

Pattern معمولی پس از درج مستقل می‌شود. Synced Pattern میان همه محل‌های استفاده همگام است و تغییر آن می‌تواند همه نمونه‌ها را تغییر دهد.

چگونه یک بلوک را تمام‌عرض کنیم؟

اگر قالب از Wide و Full Alignment پشتیبانی کند، گزینه Align Full یا Wide در نوار ابزار دیده می‌شود. در WoodMart ممکن است Container قالب همچنان عرض را محدود کند و تنظیم Layout برگه لازم باشد.

چرا بعضی تنظیمات رنگ یا فاصله را نمی‌بینیم؟

هر بلوک امکانات متفاوتی دارد و قالب می‌تواند بعضی قابلیت‌ها را محدود کند. نسخه وردپرس، نوع بلوک، theme.json و افزونه‌های فعال را بررسی کنید.

آیا محتوای بلوکی برای سئو مناسب است؟

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

چگونه بلوک‌های اضافی افزونه‌ها را حذف کنیم؟

افزونه مربوط را غیرفعال یا حذف کنید، اما ابتدا بررسی کنید بلوک‌های آن در صفحات استفاده نشده باشند. حذف افزونه ممکن است بلوک‌های Missing ایجاد کند.

جمع‌بندی

ویرایشگر بلوکی وردپرس یک سیستم ماژولار برای ساخت محتوا و چیدمان است. با شناخت Paragraph، Heading، Image، Group، Row، Stack، Columns، List View و Pattern می‌توانید بیشتر نیازهای وبلاگ و صفحه‌های محتوایی را بدون کد یا صفحه‌ساز اضافی اجرا کنید.

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

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

منابع رسمی

• راهنمای رسمی Block Editor
• مستندات کار با ویرایشگر بلوکی
• راهنمای Block Pattern و Synced Pattern
• راهنمای Command Palette
• اطلاعیه WordPress 7.0.2