صفحه‌ساز گوتنبرگ وردپرس: یک راهنمای جامع

گوتنبرگ نه تنها یک صفحه‌ساز، بلکه ویرایشگر بلوک پیش‌فرض وردپرس است که از نسخه ۵.۰ (سال ۲۰۱۸) به بعد جایگزین ویرایشگر کلاسیک شد. فلسفه اصلی آن، ارائه تجربه‌ای بصری و کاربرپسند برای ایجاد محتوا و طراحی صفحات با استفاده از “بلوک‌ها” است.

فلسفه و هدف گوتنبرگ:

• سادگی: ایجاد صفحات پیچیده بدون نیاز به کدنویسی.

• انعطاف‌پذیری: چیدمان و طراحی‌های نامحدود با ترکیب بلوک‌ها.

• استانداردسازی: ارائه یک تجربه یکسان برای همه کاربران، مستقل از قالب.

• آماده برای آینده: پایه‌ای برای توسعه کامل‌سایت (Full Site Editing – FSE).

عناصر و اجزای اصلی گوتنبرگ

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

۱. نوار ابزار بالا (Top Toolbar)

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

• دکمه افزودن بلوک (+): برای درج بلوک‌های جدید.

• دکمه Undo/Redo: برگرداندن یا تکرار آخرین عمل.

• اطلاعات سند: تعداد کلمات، عنوان سند، تعداد بلوک‌ها.

• پیش‌نمایش: مشاهده صفحه در حالت‌های مختلف (دسکتاپ، تبلت، موبایل).

• تنظیمات/گزینه‌ها: نمایش یا مخفی کردن نوار کناری تنظیمات.

• دکمه ذخیره/انتشار: برای انتشار صفحه یا ذخیره پیش‌نویس.

۲. ناحیه اصلی ویرایش (Canvas)

این بخش، فضای اصلی کار شماست که بلوک‌ها در آن قرار می‌گیرند و شما مستقیماً محتوا را در آن ویرایش می‌کنید (الگوی “ویرایش مستقیم” یا What You See Is What You Get – WYSIWYG).

۳. نوار کناری (Sidebar)

این نوار دو تب اصلی دارد:

• تب “تنظیمات سند” (Post/Page):

  • وضعیت و رویت‌پذیری

  • تاریخ انتشار

  • دسته‌بندی و برچسب‌ها

  • تصویر شاخص

  • خلاصه مطلب

  • و سایر متا‌باکس‌های سنتی وردپرس

• تب “تنظیمات بلوک”:

  • هنگامی که یک بلوک را انتخاب می‌کنید، این تب به صورت پویا تغییر می‌کند و تنظیمات پیشرفته مربوط به همان بلوک خاص را نمایش می‌دهد. مثلاً برای بلوک تصویر، می‌توانید اندازه، متن جایگزین، لینک و… را تنظیم کنید.

بلوک‌ها (Blocks): قلب تپنده گوتنگ

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

دسته‌بندی بلوک‌ها:

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

۱. بلوک‌های متداول (Common Blocks):
* پاراگراف: برای نوشتن متن ساده.
* تصویر: برای افزودن عکس.
* سرتیتر (Heading): برای تیترها (H1 تا H6).
* گالری: برای نمایش چندین تصویر به صورت گالری.
* فهرست (List): ایجاد لیست‌های نقطه‌ای یا شماره‌دار.
* نقل‌قول (Quote): برای نقل‌قول‌های بلند.
* صدا و ویدئو: برای قراردادن فایل‌های صوتی و تصویری.
* پرونده: برای آپلود و لینک مستقیم فایل.

۲. بلوک‌های قالب‌بندی (Formatting):
* کد: برای نمایش کد با قالب‌بندی مناسب.
* کلاسیک: قراردادن ویرایشگر کلاسیک در داخل یک بلوک.
* HTML سفارشی: برای قراردادن کد HTML دلخواه.
* پیش‌فرمات: نمایش متن با فونت و فاصله ثابت.
* جدول: ایجاد جدول به صورت ساده.
* Pullquote: یک نقل‌قول ویژه برای تاکید بیشتر.

۳. بلوک‌های طرح‌بندی (Layout Elements):
* دکمه: برای ایجاد دکمه‌های Call-to-Action.
* جداکننده: یک خط افقی برای جدا کردن بخش‌ها.
* فاصله: ایجاد فضای خالی با ارتفاع قابل تنظیم.
* ستون‌ها: برای ایجاد چیدمان چندستونه.
* مدیا و متن: ترکیب تصویر و متن در کنار هم.
* گروه: برای گروه‌بندی چند بلوک و اعمال استایل یکجا به آن‌ها.

۴. ویجت‌ها (Widgets):
* آخرین نوشته‌ها
* آرشیو
* دسته‌بندی‌ها
* shortcode

۵. بلوک‌های جاسازی شده (Embeds):
* این بلوک‌ها برای جاسازی محتوای از سایت‌های دیگر مانند YouTube, Twitter, Instagram, Spotify, Flickr و ده‌ها سرویس دیگر استفاده می‌شوند.

قابلیت‌های کلیدی هر بلوک:

هر بلوک دارای یک نوار ابزار مخصوص به خود است که هنگام انتخاب آن ظاهر می‌شود. این نوار معمولاً شامل موارد زیر است:

• تغییر نوع بلوک

• ترازبندی (چپ، وسط، راست)

• تبدیل به بلوک دیگر (مثلاً تبدیل پاراگراف به سرتیتر)

• تنظیمات Bold, Italic, لینک‌دهی (در بلوک‌های متنی)

• گزینه‌های بیشتر (کپی کردن، حذف، جابجایی و…)

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

• الگوهای بلوک (Reusable Blocks):
  شما می‌توانید یک گروه از بلوک‌ها (مثلاً یک CTA با دکمه و متن) را ذخیره کرده و در صفحات دیگر به صورت یک بلوک قابل استفاده مجدد درآورید. اگر آن را ویرایش کنید، تغییرات در همه جا اعمال می‌شود.

• ویرایش کامل سایت (Full Site Editing – FSE):
  این قابلیت، قدرت گوتنبرگ را از محدوده “صفحه و نوشته” به “کل سایت” گسترش می‌دهد. با استفاده از قالب‌های سازگار با FSE (مانند “Twenty Twenty-Two” به بعد)، شما می‌توانید سربرگ، پابرگ، سایدبار و هر بخشی از قالب را مستقیماً درون گوتنبرگ ویرایش کنید. عناصر کلیدی FSE عبارتند از:

  • قالب‌بخش (Template Parts): برای بخش‌های تکراری مانند هدر و فوتر.

  • پالت رنگ و تایپوگرافی سراسری: ایجاد ثبات در طراحی.

  • بلوک‌های ویژه قالب: مانند “لوگو”، “منوی ناوبری”، “جزئیات نوشته” و…

• استایل‌ها و حالت‌های مختلف برای بلوک‌ها:
  بسیاری از بلوک‌ها دارای “استایل‌های از پیش تعریف شده” هستند (مثلاً برای بلوک نقل‌قول، استایل‌های معمولی و بزرگ موجود است). همچنین می‌توانید برای بلوک‌ها رنگ، تایپوگرافی و اسپیسینگ (حاشیه و فاصله) سفارشی تعریف کنید.

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

۱. اصل برنامه‌ریزی و طرح‌ریزی (Plan Before You Build)

قبل از شروع به کشیدن و رها کردن بلوک‌ها، یک نقشه ذهنی یا کاغذی داشته باشید.

• هدف صفحه چیست؟ (اطلاع‌رسانی، فروش، ثبت نام و…)

• مخاطب شما کیست؟

• ساختار کلی صفحه چگونه است؟ (مثلاً: سرتیتر جذاب → توضیح مختصر → گالری تصاویر → مشخصات محصول → دکمه دعوت به اقدام → نظرات کاربران)

• یک وایرفریم ساده بکشید. این کار از افزودن بلوک‌های بی‌هدف و بی‌نظمی جلوگیری می‌کند.

۲. اصل سلسله مراتب و خوانایی (Hierarchy & Readability)

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

• از سرتیترها به درستی استفاده کنید (H1, H2, H3, …):

  • فقط یک H1 در صفحه داشته باشید (که معمولاً عنوان اصلی صفحه است).

  • از H2 برای بخش‌های اصلی، H3 برای زیربخش‌های داخل H2 و به همین ترتیب استفاده کنید. این کار هم برای کاربر و هم برای سئو بسیار مهم است.

• بلوک‌های متنی را قابل خواندن نگه دارید:

  • از پاراگراف‌های کوتاه استفاده کنید.

  • از لیست‌ها (بلوک “فهرست”) برای بیان موارد مرتبط استفاده کنید.

  • از تأکید (Bold) و کج (Italic) به جا و در حد متعادل استفاده کنید.

۳. اصل ساختار و گروه‌بندی (Structure & Grouping)

صفحات خود را به بخش‌های منطقی تقسیم کنید.

• از بلوک “گروه” (Group) استفاده فراوان ببرید: این بلوک مهمترین ابزار برای سازماندهی است.

  • مزایا: می‌توانید به یک “گروه” به عنوان یک واحد، پس‌زمینه، حاشیه، اسپیسینگ (فاصله داخلی و خارجی) و… اعمال کنید.

  • بلوک‌های مرتبط (مثلاً یک تصویر، یک تیتر و یک دکمه) را در یک “گroup” قرار دهید. این کار چیدمان و حرکت آن‌ها را با هم آسان می‌کند.

• از بلوک “ستون‌ها” (Columns) برای چیدمان‌های پیچیده‌تر استفاده کنید. اما در استفاده از آن زیاده‌روی نکنید زیرا ممکن است در موبایل به خوبی نمایش داده نشوند.

۴. اصل تمرکز بر تجربه کاربری (User Experience – UX)

صفحه باید برای کاربر آسان و لذت‌بخش باشد.

• دکمه‌های “دعوت به اقدام” (Call-to-Action – CTA) واضح و مشخص باشند:

  • از بلوک “دکمه” استفاده کنید.

  • از رنگ‌های متضاد با پس‌زمینه برای دکمه‌ها استفاده کنید.

  • متن دکمه باید عمل‌گرا باشد (مثلاً “همین حالا خرید کنید”، “دانلود رایگان”، “مشاوره رایگان”).

• سرعت بارگذاری را فراموش نکنید:

  • تصاویر را قبل از آپلود، بهینه‌سازی و فشرده کنید.

  • از فرمت‌های مدرن مانند WebP (که گوتنبرگ از آن پشتیبانی می‌کند) استفاده کنید.

  • از ویدئوهای جاسازی شده به تعداد زیاد خودداری کنید، زیرا سرعت صفحه را به شدت کاهش می‌دهند.

۵. اصل سازگاری با موبایل (Mobile-First Mindset)

اکثر کاربران شما از موبایل استفاده می‌کنند.

• همیشه و همیشه کار خود را با ابزار “پیش‌نمایش” در نوار ابزار بالا چک کنید.

• ترتیب بلوک‌ها در موبایل را بررسی کنید.

• مطمئن شوید فونت‌ها در اندازه موبایل قابل خواندن هستند.

• از اینکه ستون‌ها و بلوک‌های “مدیا و متن” در موبایل به درستی شکسته می‌شوند اطمینان حاصل کنید.

۶. اصل بهره‌وری و استفاده هوشمندانه (Efficiency & Smart Usage)

وقت خود را ذخیره کنید و کارها را تکرار نکنید.

• بلوک‌های قابل استفاده مجدد (Reusable Blocks) را فراموش نکنید: اگر بخشی از صفحه (مثلاً یک فرم ثبت نام یا یک بنر ویژه) را در چند صفحه استفاده می‌کنید، حتماً آن را به یک “بلوک قابل استفاده مجدد” تبدیل کنید. اگر در آینده آن را ویرایش کنید، تغییرات در همه جا اعمال می‌شود.

• از الگوها (Patterns) استفاده کنید: بسیاری از قالب‌های مدرن یا افزونه‌ها، “الگو” (Pattern) ارائه می‌دهند که مجموعه‌ای از بلوک‌های از پیش طراحی شده برای بخش‌های رایج (مانند testimonials، پricing tables و…) هستند. از کتابخانه الگوهای گوتنبرگ استفاده کنید.

۷. اصل دسترسی‌پذیری (Accessibility)

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

• همیشه برای تصاویر “متن جایگزین” (Alt Text) معنادار پر کنید. این کار هم برای سئو و هم برای خوانندگان صفحه (Screen Readers) ضروری است.

• کنتراست رنگ را رعایت کنید: مطمئن شوید رنگ متن روی رنگ پس‌زمینه به اندازه کافی contrast دارد تا خواندن آن آسان باشد.

• از سرتیترها برای ساختار استفاده کنید، نه فقط برای بزرگ کردن متن.

۸. اصل سئو داخلی (On-Page SEO)

گوتنبرگ به طور ذاتی برای سئو مناسب است، اگر از آن درست استفاده کنید.

• سلسله مراتب سرتیترها (اصل شماره ۲) را رعایت کنید.

• متن جایگزین تصاویر را پر کنید.

• پیوندهای داخلی (Internal Linking) را با استفاده از قابلیت لینک‌دهی در بلوک پاراگراف فراموش نکنید.

• محتوای باکیفیت و مرتبط تولید کنید. هیچ صفحه‌سازی جای محتوای خوب را نمی‌گیرد.

۹. اصل سادگی (Less is More)

وسوسه نشوید که از همه امکانات و انیمیشن‌ها استفاده کنید.

• از سادگی طراحی لذت ببرید. فضای خالی (White Space) به خوانایی و زیبایی صفحه کمک می‌کند.

• از رنگ‌ها و فونت‌های بیش از حد مختلف استفاده نکنید. معمولاً یک فونت برای تیترها و یک فونت برای متن بدن (Body) کافی است.

• پالت رنگی محدود و هماهنگ انتخاب کنید.

چک‌لیست پایانی برای هر صفحه‌سازی با گوتنبرگ:

• آیا صفحه یک هدف واضح دارد؟

• آیا از سرتیترها به درستی (H1, H2, H3) استفاده شده است؟

• آیا بلوک‌های مرتبط در “گروه” قرار گرفته‌اند؟

• آیا صفحه در موبایل به درستی نمایش داده می‌شود؟ (با ابزار پیش‌نمایش چک شده)

• آیا دکمه‌های CTA واضح و گیرا هستند؟

• آیا تصاویر بهینه‌سازی شده و متن جایگزین دارند؟

• آیا از بلوک‌های قابل استفاده مجدد برای المان‌های تکراری استفاده شده است؟

• آیا صفحه سریع بارگذاری می‌شود؟

• کنتراست رنگ متن و پس‌زمینه مناسب است؟

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

مزایا و معایب گوتنبرگ

مزایا:

• رایگان و یکپارچه: نیازی به نصب افزونه جداگانه ندارد.

• سریع و سبک: نسبت به بسیاری از صفحه‌سازهای سنگین، سریع‌تر است.

• آینده‌دار: به طور مداوم توسط جامعه وردپرس در حال توسعه است.

• سازگاری بالا: با اکثر قالب‌ها و افزونه‌های مدرن سازگار است.

معایب:

• منحنی یادگیری: برای کاربران قدیمی وردپرس ممکن است در ابتدا ناآشنا باشد.

• محدودیت در طراحی‌های بسیار پیچیده: برای طراحی‌های فوق‌العاده خاص و پیچیده، ممکن است به یک صفحه‌سار حرفه‌ای سوم‌شخص (مانند Elementor یا Divi) یا کدنویسی نیاز باشد.

• تفاوت در پشتیبانی از قالب‌ها: میزان کنترل شما بر طراحی، به قالب شما بستگی دارد. قالب‌های مدرن و FSE-ready کنترل بسیار بیشتری می‌دهند.

نتیجه‌گیری

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