طراحی با ویرایشگر بلوکی

آموزش Site Editor در وردپرس؛ طراحی کامل سایت با قالب‌های بلوکی

آموزش Site Editor در وردپرس

🗓 آخرین به‌روزرسانی:

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

Site Editor در وردپرس محیطی برای طراحی کل سایت با بلوک‌هاست؛ نه فقط محتوای یک نوشته یا برگه. در این محیط می‌توانید هدر، فوتر، منو، قالب نوشته، صفحه آرشیو، نتایج جست‌وجو، صفحه 404، استایل‌های عمومی، الگوها و بخش‌های تکرارشونده را بدون ویرایش مستقیم فایل‌های PHP مدیریت کنید. این قابلیت که با نام Site Editing یا Full Site Editing نیز شناخته می‌شود، فقط زمانی در دسترس است که یک Block Theme یا قالب بلوکی فعال باشد.

برای تمرین عملی، بعد از این راهنما ساخت هدر و فوتر با Site Editor را قدم‌به‌قدم دنبال کنید.

در این آموزش، از تفاوت Site Editor با Gutenberg و Customizer شروع می‌کنیم و سپس بخش‌های Navigation، Styles، Pages، Templates و Patterns را به‌صورت عملی بررسی می‌کنیم. ساخت هدر و فوتر، ویرایش قالب نوشته، ایجاد قالب سفارشی، مدیریت Template Part، تغییر رنگ و تایپوگرافی عمومی، استفاده از Style Variations، بازیابی تغییرات، Export طراحی و خطاهای رایج نیز پوشش داده می‌شوند.

نکته مهم برای این سایت

قالب فعال dev-source.ir در حال حاضر WoodMart 8.3.7 است. WoodMart یک قالب تجاری کلاسیک یا ترکیبی است و منوی کامل Appearance → Editor را مانند Block Themeها ارائه نمی‌کند. بنابراین این مقاله آموزش Site Editor برای سایت‌هایی است که قالب بلوکی فعال دارند. در WoodMart باید از Theme Settings، Header Builder، HTML Blocks و Layout Builder استفاده شود.

فهرست مطالب
  1. Site Editor چیست؟
  2. تفاوت Site Editor با Gutenberg چیست؟
  3. تفاوت Site Editor با Customizer
  4. Site Editor چه زمانی نمایش داده می‌شود؟
  5. Block Theme چیست؟
  6. قبل از فعال‌سازی قالب بلوکی چه کار کنیم؟
  7. بخش‌های اصلی Site Editor
  8. Navigation در Site Editor
  9. Styles و Global Styles
  10. Style Book چیست؟
  11. Style Revisions و بازگشت تغییرات
  12. Pages در Site Editor
  13. Template چیست؟
  14. ویرایش Template نوشته تکی
  15. ساخت Template سفارشی
  16. Front Page و Home چه تفاوتی دارند؟
  17. Template Part چیست؟
  18. Patterns در Site Editor
  19. Template Part و Synced Pattern چه تفاوتی دارند؟
  20. Theme Blocks در Site Editor
  21. Query Loop چیست؟
  22. ویرایش صفحه 404
  23. ویرایش صفحه Search
  24. List View در Site Editor
  25. Command Palette
  26. Block Locking در Templateها
  27. Export کردن Site Editor
  28. Reset کردن Template
  29. تغییر قالب بلوکی چه اثری دارد؟
  30. Site Editor و سئو
  31. Site Editor و سرعت سایت
  32. Site Editor و دسترس‌پذیری
  33. تفاوت Site Editor با WoodMart
  34. اشتباهات رایج در Site Editor
  35. رفع مشکل نمایش ندادن Appearance → Editor
  36. رفع مشکل ذخیره نشدن تغییرات
  37. رفع مشکل تغییر ناخواسته همه صفحات
  38. پرسش‌های متداول Site Editor
  39. چک‌لیست نهایی کار با Site Editor
  40. جمع‌بندی
  41. منابع رسمی

Site Editor چیست؟

Site Editor بخشی از مدیریت وردپرس است که ساختار و طراحی کل سایت را با همان منطق بلوکی Gutenberg قابل ویرایش می‌کند. در ویرایشگر نوشته، شما عمدتاً محتوای یک صفحه را می‌سازید؛ اما در Site Editor می‌توانید مشخص کنید تمام نوشته‌ها چه قالبی داشته باشند، هدر در همه صفحات چگونه نمایش داده شود، صفحه دسته‌بندی چه ساختاری داشته باشد و رنگ و تایپوگرافی عمومی سایت چگونه تنظیم شوند.

قالب بلوکی فایل‌های Template را به‌صورت HTML بلوکی نگهداری می‌کند. وقتی کاربر یک Template یا Template Part را در Site Editor ویرایش می‌کند، وردپرس نسخه تغییرکرده را در پایگاه داده ذخیره می‌کند و فایل اصلی قالب دست‌نخورده باقی می‌ماند. این معماری امکان Reset کردن تغییرات و بازگشت به نسخه قالب را فراهم می‌کند.

تفاوت Site Editor با Gutenberg چیست؟

Gutenberg یا Block Editor اصطلاح گسترده‌تری برای سیستم ویرایش بلوکی وردپرس است. ویرایشگر نوشته و برگه از Gutenberg برای ساخت محتوا استفاده می‌کند. Site Editor نیز از همان بلوک‌ها و رابط استفاده می‌کند، اما دامنه آن ساختار کل سایت است.

  • Post Editor: ویرایش محتوای یک نوشته یا برگه
  • Site Editor: ویرایش Templates، Header، Footer، Navigation و Global Styles
  • Template Editor: ویرایش قالب مرتبط با یک نوع صفحه
  • Pattern Manager: مدیریت Patternها و Template Partها

اگر هنوز با بلوک‌ها، Group، Row، Columns، List View و Pattern آشنا نیستید، ابتدا مقاله آموزش ویرایشگر بلوکی وردپرس را مطالعه کنید.

تفاوت Site Editor با Customizer

Customizer یا «سفارشی‌سازی» بیشتر در قالب‌های کلاسیک استفاده می‌شود. گزینه‌هایی مانند لوگو، منو، رنگ، ابزارک و صفحه اصلی در آن قرار دارند. Site Editor در قالب بلوکی بخش بزرگی از این کنترل‌ها را با یک محیط بصری و بلوکی جایگزین می‌کند.

در Site Editor، هدر و فوتر مجموعه‌ای از بلوک‌ها هستند؛ منو با Navigation Block ساخته می‌شود؛ رنگ و فونت از Styles کنترل می‌شوند و Templateها ساختار صفحه را تعیین می‌کنند. به همین دلیل هنگام فعال بودن Block Theme ممکن است Customizer از منوی نمایش حذف یا محدود شود.

Site Editor چه زمانی نمایش داده می‌شود؟

برای دسترسی، باید یک Block Theme فعال باشد. سپس از مسیر «نمایش ← ویرایشگر» یا Appearance → Editor وارد شوید. اگر این گزینه وجود ندارد، معمولاً یکی از دلایل زیر مطرح است:

  • قالب فعال Block Theme نیست.
  • نقش کاربر دسترسی edit_theme_options ندارد.
  • افزونه امنیتی یا مدیریت نقش منو را مخفی کرده است.
  • نسخه وردپرس قدیمی است.
  • قالب تجاری از سیستم اختصاصی خود استفاده می‌کند.

روی سایت فعلی با WoodMart، نبودن Site Editor کامل طبیعی است و نشانه خرابی وردپرس نیست.

Block Theme چیست؟

Block Theme قالبی است که ساختار بخش‌های سایت را با Block Template و Template Part تعریف می‌کند. فایل‌های Template معمولاً داخل پوشه templates و بخش‌های تکرارشونده داخل parts قرار دارند. تنظیمات عمومی و Design Tokenها نیز عمدتاً از theme.json می‌آیند.

قالب‌های پیش‌فرض جدید وردپرس مانند Twenty Twenty-Five نمونه‌های Block Theme هستند. برای پیدا کردن قالب بلوکی می‌توانید در «نمایش ← پوسته‌ها ← افزودن» فیلتر Block Themes را انتخاب کنید.

قبل از فعال‌سازی قالب بلوکی چه کار کنیم؟

تعویض قالب روی سایت فعال باید با بکاپ و Staging انجام شود. محتوای نوشته‌ها و برگه‌ها معمولاً باقی می‌ماند، اما هدر، فوتر، ابزارک، منو، Shortcode، Layout و تنظیمات اختصاصی قالب قبلی ممکن است تغییر کنند.

  1. از فایل‌ها و دیتابیس بکاپ کامل بگیرید.
  2. یک Staging تازه بسازید.
  3. قالب بلوکی را روی Staging فعال کنید.
  4. صفحه اصلی، نوشته، دسته، جست‌وجو و 404 را بررسی کنید.
  5. منو، لوگو و فوتر را بازسازی کنید.
  6. قابلیت‌های وابسته به قالب قبلی را شناسایی کنید.
  7. سرعت، موبایل و سئو را آزمایش کنید.

تبدیل سایت WoodMart فروشگاهی به Block Theme پروژه مهاجرت قالب محسوب می‌شود و نباید فقط برای دسترسی به Site Editor روی سایت اصلی انجام شود.

بخش‌های اصلی Site Editor

وقتی وارد Site Editor می‌شوید، معمولاً پنج بخش اصلی مشاهده می‌کنید:

  • Navigation
  • Styles
  • Pages
  • Templates
  • Patterns

همچنین Command Palette و پیش‌نمایش سایت در دسترس هستند. جزئیات رابط ممکن است در نسخه‌های مختلف وردپرس تغییر کند، اما مفاهیم اصلی ثابت‌اند.

Navigation در Site Editor

بخش Navigation همه منوهای بلوکی سایت را فهرست می‌کند. می‌توانید منو را انتخاب، نام آن را تغییر دهید، Duplicate کنید، آیتم‌ها را مرتب کنید، زیرمنو بسازید و لینک‌ها را حذف یا ویرایش کنید.

Navigation Block جای سیستم منوی کلاسیک را در قالب‌های بلوکی می‌گیرد. یک سایت می‌تواند چند منوی مستقل داشته باشد؛ برای مثال منوی هدر، منوی فوتر و منوی حساب کاربری.

ساخت منوی جدید

  1. به Appearance → Editor → Navigation بروید.
  2. یک منوی موجود را انتخاب یا منوی جدید بسازید.
  3. Page Link، Custom Link، Category یا سایر آیتم‌ها را اضافه کنید.
  4. با Drag & Drop ترتیب را تغییر دهید.
  5. برای ساخت زیرمنو، آیتم را داخل والد قرار دهید.
  6. تغییرات را Save کنید.

پس از ساخت منو باید Navigation Block موجود در Header را روی همان منو تنظیم کنید. ساخت منو به‌تنهایی تضمین نمی‌کند در سایت نمایش داده شود.

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

Navigation Block می‌تواند Overlay Menu یا آیکن همبرگری داشته باشد. نوع نمایش، آیکن، بازشدن Overlay، فاصله و Submenu را بررسی کنید. منوی دسکتاپ و موبایل باید روی دستگاه واقعی آزمایش شوند.

Styles و Global Styles

Styles مرکز کنترل ظاهر عمومی سایت است. رنگ، تایپوگرافی، Layout، فاصله و استایل بلوک‌ها از این بخش مدیریت می‌شوند. تغییر عمومی می‌تواند همه Templateها و صفحات را تحت‌تأثیر قرار دهد.

Style Variations

قالب بلوکی ممکن است چند Style Variation ارائه کند. هر Variation ترکیبی آماده از رنگ، فونت و استایل است. با انتخاب Variation می‌توانید ظاهر کلی سایت را سریع تغییر دهید، سپس جزئیات را شخصی‌سازی کنید.

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

Typography

در Typography می‌توانید فونت متن، تیتر، لینک و دکمه را کنترل کنید. اندازه، Line Height، Weight، Letter Spacing و Appearance بسته به پشتیبانی قالب قابل تنظیم‌اند.

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

Colors

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

کنتراست متن و پس‌زمینه را رعایت کنید. رنگ زیبا اما کم‌کنتراست برای دسترس‌پذیری و خوانایی مناسب نیست.

Layout

Content Width و Wide Width در Layout تعیین می‌کنند بلوک‌های عادی و Wide چه عرضی داشته باشند. Padding عمومی سایت نیز ممکن است از این قسمت کنترل شود.

اگر یک Cover یا Group تمام‌عرض نمی‌شود، تنظیم Alignment بلوک، Template والد و Layout عمومی را بررسی کنید.

استایل اختصاصی بلوک‌ها

در Styles → Blocks می‌توانید ظاهر پیش‌فرض یک نوع بلوک را تغییر دهید. برای مثال همه Buttonها گوشه گرد، رنگ مشخص و Padding یکسان داشته باشند. این روش بهتر از تنظیم دستی تک‌تک دکمه‌هاست.

Style Book چیست؟

Style Book نمایی از بلوک‌های مختلف با استایل فعلی سایت ارائه می‌دهد. هنگام تغییر رنگ یا فونت می‌توانید اثر آن را روی Heading، Paragraph، Button، Quote، Form و سایر بلوک‌ها ببینید.

این ابزار برای کنترل هماهنگی سیستم طراحی بسیار مفید است. بعد از تغییر Global Styles، Style Book را مرور کنید تا بلوکی با کنتراست یا فاصله نامناسب باقی نماند.

Style Revisions و بازگشت تغییرات

Site Editor تاریخچه تغییرات Styles را نگهداری می‌کند. می‌توانید Revisionهای قبلی را مشاهده و نسخه مناسب را بازیابی کنید. همچنین Reset to defaults تغییرات کاربر را حذف و استایل قالب را برمی‌گرداند.

Reset ممکن است تغییرات گسترده‌ای را حذف کند؛ بنابراین قبل از انجام آن Export یا بکاپ داشته باشید. Revision استایل جایگزین بکاپ کامل سایت نیست.

Pages در Site Editor

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

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

Template چیست؟

Template ساختار نمایش یک نوع صفحه را تعریف می‌کند. برای مثال Single Template برای نوشته تکی، Page Template برای برگه، Archive برای آرشیو، Search برای نتایج جست‌وجو و 404 برای صفحه یافت‌نشدن استفاده می‌شوند.

یک Template معمولاً شامل Header، Query یا Post Content، Sidebar و Footer است. تغییر Single Template می‌تواند ظاهر تمام نوشته‌هایی را که از آن استفاده می‌کنند تغییر دهد.

Templateهای رایج

  • Index
  • Home
  • Front Page
  • Single Posts
  • Pages
  • Archive
  • Category
  • Tag
  • Search
  • 404

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

ویرایش Template نوشته تکی

  1. به Appearance → Editor → Templates بروید.
  2. Single Posts را انتخاب کنید.
  3. List View را باز کنید.
  4. Header، Post Title، Featured Image، Post Content و Footer را شناسایی کنید.
  5. Post Terms، Author، Date یا Comments را در صورت نیاز اضافه کنید.
  6. عرض محتوا و فاصله‌ها را تنظیم کنید.
  7. Preview را روی چند نوشته بررسی کنید.
  8. Save را بزنید.

بلوک Post Content جای محتوای واقعی نوشته را در Template نشان می‌دهد. حذف آن باعث می‌شود متن نوشته‌ها نمایش داده نشود. هنگام ویرایش Template باید میان بلوک محتوایی پویا و متن ثابت تفاوت قائل شوید.

ساخت Template سفارشی

می‌توانید Template جدیدی برای یک صفحه یا گروهی از صفحات بسازید. برای مثال Landing Page بدون Header، صفحه خدمات با عرض بیشتر یا برگه دارای Sidebar.

  1. از بخش Templates گزینه Add New Template را انتخاب کنید.
  2. نوع Template یا Custom Template را تعیین کنید.
  3. ساختار را با Group و Template Part بسازید.
  4. Post Content را در محل صحیح قرار دهید.
  5. Template را ذخیره کنید.
  6. در تنظیمات برگه، Template جدید را انتخاب کنید.

Front Page و Home چه تفاوتی دارند؟

Front Page قالب صفحه اصلی سایت است. Home قالب صفحه فهرست نوشته‌ها یا Blog Index است. اگر Front Page Template در Site Editor تعریف شود، می‌تواند نسبت به تنظیم صفحه اصلی در Settings → Reading اولویت داشته باشد.

این تفاوت یکی از علت‌های سردرگمی کاربران است. اگر محتوای برگه خانه تغییر می‌کند اما صفحه اصلی چیز دیگری نشان می‌دهد، Template Front Page و Query Loop داخل آن را بررسی کنید.

Template Part چیست؟

Template Part بخش تکرارشونده‌ای از ساختار سایت است؛ مانند Header، Footer یا Sidebar. به‌جای ساخت هدر در هر Template، یک Header Part ایجاد می‌کنید و آن را در همه قالب‌ها قرار می‌دهید.

ویرایش Template Part همگام است. تغییر Header می‌تواند تمام Templateهایی را که از همان Part استفاده می‌کنند به‌روزرسانی کند.

ساخت Header در Site Editor

یک Header معمولاً شامل Group یا Row، Site Logo، Site Title، Navigation و دکمه است. برای ساخت:

  1. به Patterns → Manage My Patterns → Template Parts بروید.
  2. Header موجود را باز یا Header جدید بسازید.
  3. یک Row تمام‌عرض اضافه کنید.
  4. Site Logo و Navigation را قرار دهید.
  5. تراز، Padding، رنگ و رفتار موبایل را تنظیم کنید.
  6. Template Part را ذخیره کنید.
  7. همه Templateهای اصلی را بررسی کنید.

ساخت Footer

Footer می‌تواند شامل لوگو، توضیح کوتاه، Navigation، Social Icons، اطلاعات تماس و Copyright باشد. برای Layout چندستونه از Columns یا Grid استفاده کنید و در موبایل ترتیب ستون‌ها را بررسی کنید.

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

Patterns در Site Editor

بخش Patterns برای مدیریت Patternهای شخصی، Synced Pattern و Template Part استفاده می‌شود. Pattern معمولی پس از درج مستقل است؛ Synced Pattern میان همه نمونه‌ها همگام باقی می‌ماند.

در WordPress 7.0، Patternها به‌طور پیش‌فرض بیشتر به سمت Content-only Editing هدایت شده‌اند تا کاربران بدون خراب کردن Layout بتوانند فقط محتوا را تغییر دهند. رفتار دقیق به نوع Pattern و تنظیمات قالب وابسته است.

Pattern معمولی چه کاربردی دارد؟

برای Hero، معرفی خدمات، کارت تیم، قیمت، FAQ یا CTA که ساختار یکسان اما محتوای متفاوت دارند.

Synced Pattern چه کاربردی دارد؟

برای اعلان عمومی، اطلاعات تماس، بنر پشتیبانی، فرم ثابت یا CTA که باید در همه صفحات یکسان بماند.

Template Part و Synced Pattern چه تفاوتی دارند؟

هر دو قابل استفاده مجدد و همگام‌اند، اما Template Part بیشتر برای بخش‌های ساختاری Template مانند Header و Footer طراحی شده است. Synced Pattern می‌تواند داخل محتوای نوشته، برگه یا Template استفاده شود و برای بلوک‌های تکراری عمومی مناسب است.

Theme Blocks در Site Editor

Theme Blocks برای نمایش داده‌های پویا و ساخت Template طراحی شده‌اند. بلوک‌های مهم عبارت‌اند از:

  • Site Logo
  • Site Title
  • Site Tagline
  • Navigation
  • Post Title
  • Post Content
  • Post Featured Image
  • Post Date
  • Post Author
  • Post Terms
  • Query Loop
  • Template Part
  • Comments
  • Search
  • Login/out

این بلوک‌ها محتوای واقعی را براساس صفحه جاری نمایش می‌دهند. برای مثال Post Title در Template هر نوشته، عنوان همان نوشته را نشان می‌دهد.

Query Loop چیست؟

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

داخل Query Loop یک Post Template قرار دارد و بلوک‌هایی مانند Featured Image، Post Title، Excerpt و Date برای هر نتیجه تکرار می‌شوند. تنظیم Query مشخص می‌کند چه محتواهایی، با چه ترتیب و فیلتری نمایش داده شوند.

ساخت صفحه وبلاگ با Query Loop

  1. Template مربوط به Home یا صفحه Blog را باز کنید.
  2. Query Loop را اضافه کنید.
  3. یک Pattern Grid یا List انتخاب کنید.
  4. Post Template را در List View باز کنید.
  5. تصویر، عنوان، خلاصه و تاریخ را تنظیم کنید.
  6. Pagination را اضافه کنید.
  7. نمای موبایل و Empty Results را بررسی کنید.

ویرایش صفحه 404

Template 404 زمانی نمایش داده می‌شود که URL پیدا نشود. یک صفحه 404 مفید باید پیام روشن، جست‌وجو، لینک خانه و مسیرهای اصلی را ارائه کند.

در Site Editor، Template 404 را باز کنید و بلوک Search، Navigation یا Query Loop مقالات جدید را اضافه کنید. صفحه را شلوغ نکنید و از ایجاد Soft 404 با ریدایرکت همه خطاها به خانه خودداری کنید.

ویرایش صفحه Search

Search Template معمولاً Search Block، Query Title و Query Loop دارد. مشخص کنید در صورت نبود نتیجه چه پیامی نمایش داده شود. کارت نتایج باید عنوان و خلاصه قابل فهم داشته باشد.

List View در Site Editor

List View برای Templateهای تودرتو ضروری است. Header، Group، Query Loop، Post Template و Footer می‌توانند چند سطح تو در تو باشند. از List View برای انتخاب والد، جابه‌جایی، تغییر نام و تشخیص Template Part استفاده کنید.

قبل از حذف یک بلوک، مطمئن شوید Post Content یا Template Part حیاتی را انتخاب نکرده‌اید.

Command Palette

Command Palette با Ctrl+K در ویندوز و Cmd+K در مک باز می‌شود. می‌توانید Template، Page یا Pattern را جست‌وجو و فرمان‌های مختلف را اجرا کنید. در نسخه‌های جدید، Command Palette در صفحات بیشتری از مدیریت وردپرس قابل استفاده است.

Block Locking در Templateها

می‌توانید بلوک‌ها را برای جلوگیری از حذف یا جابه‌جایی قفل کنید. این قابلیت در تیم‌های تولید محتوا مفید است؛ مدیر Layout را قفل می‌کند و نویسنده محتوای مجاز را تغییر می‌دهد.

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

Export کردن Site Editor

Site Editor امکان Export Templateها و Styles را ارائه می‌دهد. فایل ZIP خروجی می‌تواند شامل تغییرات Template، Part و theme.json باشد. این قابلیت برای انتقال طراحی به محیط توسعه یا ساخت Child Block Theme مفید است.

Export جایگزین بکاپ کامل نیست و محتوا، افزونه، رسانه یا دیتابیس کامل سایت را منتقل نمی‌کند.

Reset کردن Template

اگر Template را ویرایش کرده‌اید، ممکن است گزینه Clear Customizations یا Reset نمایش داده شود. این گزینه نسخه ذخیره‌شده کاربر را حذف و فایل اصلی قالب را دوباره فعال می‌کند.

قبل از Reset، Export یا Revision بگیرید. تغییرات اختصاصی ممکن است کاملاً از بین بروند.

تغییر قالب بلوکی چه اثری دارد؟

Template و Styles به قالب مرتبط‌اند. هنگام تغییر Block Theme، ساختار و Style Variation جدید فعال می‌شود. Patternهای شخصی و محتوای صفحات ممکن است باقی بمانند، اما Templateها و Partهای اختصاصی قالب قبلی قابل استفاده مستقیم نباشند.

تعویض را ابتدا در Staging انجام دهید و Header، Footer، Navigation و صفحات آرشیو را بازسازی کنید.

Site Editor و سئو

Site Editor می‌تواند ساختار HTML، ترتیب Heading، لینک داخلی و نمایش محتوا را تغییر دهد. حذف Post Title، Post Content یا Canonical افزونه سئو از طریق Template نامناسب می‌تواند تجربه موتور جست‌وجو را مختل کند.

  • در هر صفحه فقط یک H1 منطقی داشته باشید.
  • Breadcrumb را هماهنگ با Rank Math تنظیم کنید.
  • Query Loop صفحات تکراری بی‌هدف نسازد.
  • Header و Footer لینک‌های مفید و محدود داشته باشند.
  • صفحه 404 واقعاً کد 404 برگرداند.
  • Archiveهای مهم دارای عنوان و توضیح باشند.

Site Editor و سرعت سایت

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

بعد از تغییر Template، Core Web Vitals، تعداد DOM Element، CSS و JavaScript را بررسی کنید.

Site Editor و دسترس‌پذیری

  • Navigation با صفحه‌کلید قابل استفاده باشد.
  • کنتراست رنگ کافی باشد.
  • Headingها ترتیب منطقی داشته باشند.
  • Site Logo دارای Alt مناسب باشد.
  • دکمه‌ها متن روشن داشته باشند.
  • Focus State حذف نشود.
  • Overlay Menu قابل بستن باشد.

تفاوت Site Editor با WoodMart

در Site Editor، Header، Footer و Templateها با بلوک ساخته می‌شوند. در WoodMart این بخش‌ها معمولاً با Header Builder، HTML Blocks، Theme Settings و Layout Builder مدیریت می‌شوند. بنابراین مسیرهای آموزشی متفاوت‌اند.

  • Site Editor: Appearance → Editor
  • WoodMart Header: WoodMart → Header Builder
  • WoodMart Global Settings: Theme Settings
  • WoodMart Reusable Content: HTML Blocks
  • WoodMart Layouts: Layout Builder

برای آزمایش Site Editor روی این سایت، بهتر است یک نصب لوکال یا Staging با قالب بلوکی بسازید و قالب اصلی فروشگاه را تغییر ندهید.

اشتباهات رایج در Site Editor

  • ویرایش سایت اصلی بدون بکاپ
  • تغییر Template به‌جای محتوای یک Page
  • حذف Post Content از Single Template
  • ویرایش Header بدون توجه به همه Templateها
  • استفاده بیش از حد از رنگ و فونت سفارشی
  • ویرایش Synced Pattern بدون بررسی محل‌های استفاده
  • ساخت Front Page Template و نادیده گرفتن Reading Settings
  • استفاده از Query Loop بدون Pagination
  • تست نکردن Navigation در موبایل
  • Reset کردن Template بدون Export

رفع مشکل نمایش ندادن Appearance → Editor

ابتدا نام و نوع قالب فعال را بررسی کنید. اگر قالب کلاسیک مانند WoodMart، Astra کلاسیک یا قالب اختصاصی PHP فعال است، Site Editor کامل نمایش داده نمی‌شود. یک Block Theme را فقط در Staging فعال و دوباره منو را بررسی کنید.

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

رفع مشکل ذخیره نشدن تغییرات

خطای REST API، مجوز کاربر، Firewall، ModSecurity یا تداخل افزونه می‌تواند ذخیره را مختل کند. کنسول مرورگر و Site Health را بررسی کنید. کش مدیریت را پاک و درخواست ذخیره را در Network مشاهده کنید.

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

رفع مشکل تغییر ناخواسته همه صفحات

احتمالاً به‌جای محتوای یک Page، Template یا Template Part را ویرایش کرده‌اید. Revision را باز کنید یا Template را Reset کنید. سپس تغییر اختصاصی را داخل محتوای همان Page یا Template سفارشی انجام دهید.

پرسش‌های متداول Site Editor

آیا Site Editor در همه قالب‌های وردپرس وجود دارد؟

خیر. Site Editor کامل فقط با Block Theme فعال می‌شود.

چرا در WoodMart گزینه Editor را نمی‌بینم؟

WoodMart از سیستم قالب و Builder اختصاصی استفاده می‌کند و Block Theme کامل نیست. از Theme Settings و Header Builder استفاده کنید.

آیا Site Editor جایگزین Elementor است؟

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

Template و Page چه تفاوتی دارند؟

Page محتوای اختصاصی یک صفحه است؛ Template ساختار نمایش یک یا چند صفحه را تعیین می‌کند.

تغییر Header روی چند صفحه اثر می‌گذارد؟

اگر Templateها از همان Header Template Part استفاده کنند، تغییر روی همه آن‌ها اثر می‌گذارد.

آیا می‌توان تغییرات Site Editor را Export کرد؟

بله، Templateها و Styles قابل Export هستند؛ اما این خروجی بکاپ کامل سایت نیست.

آیا Site Editor برای فروشگاه ووکامرس مناسب است؟

با Block Theme سازگار با WooCommerce می‌توان بخش‌های زیادی را طراحی کرد، اما Checkout، Cart و Product Templateها باید با نسخه ووکامرس و قالب تست شوند.

آیا فایل‌های قالب با ویرایش Site Editor تغییر می‌کنند؟

معمولاً تغییرات کاربر در پایگاه داده ذخیره می‌شوند و فایل اصلی قالب دست‌نخورده می‌ماند.

چک‌لیست نهایی کار با Site Editor

  • Block Theme روی Staging فعال است.
  • بکاپ فایل و دیتابیس موجود است.
  • Navigation و منوی موبایل تست شده‌اند.
  • Global Styles هماهنگ‌اند.
  • Templateهای Single، Page، Archive، Search و 404 بررسی شده‌اند.
  • Header و Footer به‌صورت Template Part مدیریت می‌شوند.
  • Post Content در Templateها وجود دارد.
  • Query Loop دارای Empty State و Pagination است.
  • Patternهای همگام آگاهانه ویرایش شده‌اند.
  • Style و Template Revision بررسی شده‌اند.
  • Export طراحی تهیه شده است.
  • موبایل، سئو، سرعت و دسترس‌پذیری تست شده‌اند.

جمع‌بندی

Site Editor در وردپرس ابزار طراحی کل سایت با بلوک‌هاست و فقط با قالب بلوکی فعال می‌شود. Navigation منوها را مدیریت می‌کند، Styles ظاهر عمومی را کنترل می‌کند، Templates ساختار انواع صفحه را می‌سازند و Patterns و Template Parts بخش‌های تکرارشونده را نگهداری می‌کنند.

مهم‌ترین مهارت در Site Editor تشخیص تفاوت Content، Template و Template Part است. ویرایش اشتباه Template می‌تواند همه صفحات را تغییر دهد، در حالی که ویرایش Page فقط همان محتوا را تحت‌تأثیر قرار می‌دهد. پیش از تغییرات بزرگ، Staging، Backup و Export داشته باشید.

در سایت فعلی dev-source.ir که از WoodMart استفاده می‌کند، Site Editor کامل فعال نیست و برای مدیریت ظاهر باید ابزارهای اختصاصی WoodMart استفاده شوند. این آموزش برای یادگیری معماری قالب‌های بلوکی و اجرای پروژه روی یک Block Theme ارائه شده است.

منابع رسمی

📌 همچنین بخوانید: دسترس‌پذیری در Gutenberg و Site Editor وردپرس، طراحی ریسپانسیو در Gutenberg و Site Editor وردپرس و ساخت لندینگ پیج با Gutenberg در وردپرس

آموزش‌های تازه، کد آماده و رفع خطاهر هفته در کانال Dev Source؛ رایگان.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *