آموزش ساخت صفحه اصلی با Gutenberg و Site Editor در وردپرس
🗓 آخرین به‌روزرسانی:
ساخت صفحه اصلی با Gutenberg و Site Editor یکی از بهترین تمرین‌ها برای یادگیری واقعی طراحی بلوکی وردپرس است. صفحه اصلی باید در چند ثانیه به کاربر توضیح دهد سایت چه کاری انجام می‌دهد، برای چه کسی ساخته شده، مهم‌ترین مزیت آن چیست و قدم بعدی کاربر کدام است. در قالب‌های بلوکی میتوانید این صفحه را با Hero، Group، Columns، Buttons، Media & Text، Query Loop، Pattern و Global Styles بسازید و ساختار کلی آن را از Front Page Template مدیریت کنید.
در این آموزش، از انتخاب صفحه اصلی ثابت شروع می‌کنیم و سپس یک صفحه حرفه‌ای شامل هدر، Hero، معرفی مزایا، خدمات، اعتمادسازی، مقالات جدید، پرسش‌های متداول، Call to Action و فوتر می‌سازیم. تفاوت محتوای برگه خانه با Front Page Template، نقش تنظیمات Reading، طراحی واکنش‌گرا، سئو، سرعت، دسترس‌پذیری، Patternها، Query Loop و تفاوت مسیر قالب بلوکی با WoodMart نیز بررسی می‌شوند.
نسخه بررسی‌شده
این مقاله در ژوئیه ۲۰۲۶ براساس WordPress 7.0.2 و مستندات رسمی Site Editor، Front Page و Query Loop بازبینی شده است. مسیر بعضی گزینه‌ها می‌تواند براساس قالب و افزونه‌های فعال متفاوت باشد.
فهرست مطالب
- صفحه اصلی خوب چه وظیفه‌ای دارد؟
- Gutenberg و Site Editor چه نقشی دارند؟
- تفاوت Front Page، Home و برگه خانه
- نکته مهم درباره Front Page Template
- پیش‌نیازهای پروژه
- مرحله اول: ساخت برگه خانه
- مرحله دوم: ساخت برگه وبلاگ
- مرحله سوم: تنظیم صفحه اصلی ثابت
- مرحله چهارم: بررسی یا ساخت Front Page Template
- ساختار پیشنهادی صفحه اصلی
- مرحله پنجم: ساخت Hero حرفه‌ای
- ساخت Hero با Columns
- ساخت Hero با Cover
- تیتر H1 صفحه اصلی
- دکمه‌های Hero
- مرحله ششم: ساخت نوار اعتماد یا آمار
- مرحله هفتم: ساخت بخش مزایا
- مرحله هشتم: معرفی خدمات یا دسته‌های اصلی
- ساخت بخش خدمات با Pattern
- مرحله نهم: معرفی برند یا فرایند کار
- نمایش فرایند با Steps
- مرحله دهم: ساخت بخش مقالات جدید با Query Loop
- فیلتر مقالات صفحه اصلی
- مرحله یازدهم: نمایش محصولات یا نمونه‌کارها
- مرحله دوازدهم: نظرات مشتریان
- مرحله سیزدهم: ساخت FAQ
- مرحله چهاردهم: CTA پایانی
- هدر و فوتر صفحه اصلی
- تنظیم رنگ و فونت صفحه اصلی
- مدیریت فاصله‌ها
- عرض محتوا و Section تمام‌عرض
- طراحی واکنش‌گرا
- ترتیب محتوا در موبایل
- سئو صفحه اصلی
- Rank Math در صفحه اصلی
- سرعت صفحه اصلی
- LCP و تصویر Hero
- دسترس‌پذیری صفحه اصلی
- ساخت صفحه اصلی با Pattern آماده
- ذخیره Sectionها به‌صورت Pattern
- صفحه اصلی در WoodMart
- آیا باید برای ساخت صفحه اصلی قالب را تغییر دهیم؟
- رفع مشکل نمایش صفحه وبلاگ به‌جای خانه
- رفع مشکل نمایش ندادن محتوای خانه
- رفع مشکل تغییر صفحه اصلی اما دیده نشدن نتیجه
- رفع مشکل تمام‌عرض نشدن بخش‌ها
- رفع مشکل به‌هم‌ریختگی موبایل
- اشتباهات رایج
- چک‌لیست نهایی صفحه اصلی
- پرسش‌های متداول
- جمع‌بندی
- منابع رسمی
صفحه اصلی خوب چه وظیفه‌ای دارد؟
صفحه اصلی فقط مجموعه‌ای از بخش‌های زیبا نیست. هر بخش باید یک سؤال کاربر را پاسخ دهد:
- این سایت چیست؟
- چه مشکلی را حل می‌کند؟
- چرا باید به آن اعتماد کنم؟
- چه محصولات، خدمات یا محتواهایی دارد؟
- قدم بعدی من چیست؟
اگر صفحه اصلی ده‌ها پیام، بنر و دکمه متضاد داشته باشد، کاربر مسیر اصلی را پیدا نمی‌کند. قبل از طراحی، یک هدف اصلی تعیین کنید؛ مانند مشاهده خدمات، خرید محصول، عضویت، رزرو مشاوره یا مطالعه آموزش‌ها.
Gutenberg و Site Editor چه نقشی دارند؟
Gutenberg یا Block Editor برای ساخت محتوای برگه خانه استفاده میشود. Site Editor در قالب بلوکی، Template، Header، Footer، Global Styles و ساختار عمومی صفحه را کنترل می‌کند.
- محتوای برگه خانه: Hero، خدمات، مزایا، مقالات و CTA اختصاصی
- Front Page Template: هدر، فوتر، Post Content و ساختار عمومی صفحه اصلی
- Global Styles: رنگ، فونت، عرض و استایل عمومی
- Patterns: بخش‌های آماده یا تکرارشونده
برای آشنایی کامل با رابط بلوکی، مقاله آموزش Gutenberg در وردپرس را مطالعه کنید.
تفاوت Front Page، Home و برگه خانه
این سه مفهوم اغلب با یکدیگر اشتباه گرفته می‌شوند:
- Front Page: صفحه‌ای که در آدرس اصلی دامنه نمایش داده میشود.
- Home Template: قالب فهرست نوشته‌ها یا Blog Index.
- برگه خانه: یک Page عادی که می‌تواند به‌عنوان صفحه اصلی ثابت انتخاب شود.
اگر سایت آخرین نوشته‌ها را در صفحه اصلی نمایش دهد، Home و Front Page می‌توانند یک خروجی باشند. اگر یک برگه ثابت به‌عنوان خانه انتخاب شود، صفحه اصلی و صفحه وبلاگ از هم جدا می‌شوند.
نکته مهم درباره Front Page Template
در قالب بلوکی، اگر Front Page Template ساخته شده باشد، وردپرس آن را برای صفحه اصلی استفاده می‌کند. ممکن است این Template شامل Post Content باشد و محتوای برگه انتخاب‌شده را نمایش دهد، یا کل طراحی را مستقیماً داخل Template نگه دارد.
برای نگهداری بهتر، معمولاً توصیه میشود محتوای اختصاصی صفحه داخل برگه خانه و ساختار عمومی داخل Template قرار گیرد. این تفکیک باعث میشود نویسنده بدون دست زدن به Header و Footer، محتوای خانه را ویرایش کند.
پیش‌نیازهای پروژه
- وردپرس به‌روز
- Block Theme برای استفاده کامل از Site Editor
- بکاپ کامل یا محیط Staging
- لوگو و پالت رنگ مشخص
- تصاویر بهینه
- متن کوتاه معرفی، مزایا و CTA
- حداقل چند نوشته برای Query Loop
اگر سایت فعال و تجاری است، طراحی جدید را ابتدا روی Staging اجرا کنید.
مرحله اول: ساخت برگه خانه
- از پیشخوان به Pages → Add New بروید.
- عنوان برگه را «خانه» یا «صفحه اصلی» بگذارید.
- پیوند یکتا را کوتاه نگه دارید.
- در ابتدا فقط یک ساختار ساده بسازید.
- برگه را Publish کنید.
عنوان برگه لازم نیست در Front-end نمایش داده شود. نمایش Post Title را میتوان از Template کنترل کرد.
مرحله دوم: ساخت برگه وبلاگ
اگر صفحه اصلی ثابت می‌خواهید، یک برگه خالی با عنوان «وبلاگ» یا «مقالات» بسازید. محتوای این برگه معمولاً توسط Home Template یا تنظیمات قالب نمایش داده میشود.
مرحله سوم: تنظیم صفحه اصلی ثابت
- به Settings → Reading بروید.
- Your homepage displays را روی A static page قرار دهید.
- Homepage را روی برگه خانه بگذارید.
- Posts page را روی برگه وبلاگ تنظیم کنید.
- تغییرات را ذخیره و صفحه اصلی را بررسی کنید.
در قالب بلوکی، وجود Front Page Template می‌تواند روی خروجی نهایی اولویت داشته باشد؛ بنابراین اگر نتیجه مطابق انتظار نیست، Site Editor → Templates → Front Page را بررسی کنید.
مرحله چهارم: بررسی یا ساخت Front Page Template
- به Appearance → Editor بروید.
- Templates را باز کنید.
- Front Page را انتخاب کنید.
- اگر وجود ندارد، Add Template → Front Page را بزنید.
- Header Template Part را اضافه کنید.
- Post Content را در بخش اصلی قرار دهید.
- Footer Template Part را اضافه کنید.
- Template را ذخیره کنید.
وجود Post Content ضروری است اگر محتوای صفحه اصلی را در برگه خانه ساخته‌اید. حذف آن باعث میشود برگه خانه خالی به نظر برسد.
برای آموزش دقیق Templateها، مقاله ساخت Template نوشته و برگه با Site Editor را ببینید.
ساختار پیشنهادی صفحه اصلی
- Hero
- نوار اعتماد یا آمار
- مزایا
- خدمات یا دسته‌های اصلی
- معرفی برند یا فرایند
- نمونه‌کار یا محصولات منتخب
- نظرات مشتریان
- مقالات جدید
- FAQ
- CTA پایانی
همه سایت‌ها به تمام این بخش‌ها نیاز ندارند. ترتیب باید براساس هدف تجاری و مسیر کاربر تنظیم شود.
مرحله پنجم: ساخت Hero حرفه‌ای
Hero اولین بخش محتوایی صفحه است. یک Group، Cover یا Columns برای آن بسازید.
اجزای اصلی Hero
- تیتر اصلی واضح
- توضیح کوتاه
- یک CTA اصلی
- یک CTA ثانویه در صورت نیاز
- تصویر یا ویدئوی سبک
- یک نشانه اعتماد کوتاه
تیتر باید نتیجه یا ارزش را بیان کند، نه فقط نام شرکت. برای مثال «آموزش عملی وردپرس از نصب تا طراحی سایت» روشن‌تر از «به سایت ما خوش آمدید» است.
ساخت Hero با Columns
- یک Group تمام‌عرض اضافه کنید.
- Padding مناسب بدهید.
- داخل آن Columns با نسبت ۵۰/۵۰ قرار دهید.
- در ستون متن، Heading، Paragraph و Buttons بگذارید.
- در ستون تصویر، Image یا Cover قرار دهید.
- گزینه Stack on mobile را بررسی کنید.
برای زبان فارسی، ترتیب متن و تصویر در موبایل باید منطقی باشد. معمولاً متن باید قبل از تصویر دیده شود.
ساخت Hero با Cover
Cover برای پس‌زمینه تصویری مناسب است. Overlay را طوری تنظیم کنید که متن خوانا بماند. تصویر پس‌زمینه باید فشرده و متناسب با نمایش بزرگ باشد.
Hero تمام‌صفحه همیشه انتخاب مناسبی نیست. ارتفاع زیاد می‌تواند محتوای اصلی را از دید اولیه خارج کند.
تیتر H1 صفحه اصلی
صفحه اصلی باید یک H1 اصلی و روشن داشته باشد. Site Title یا لوگو را بدون دلیل به H1 تبدیل نکنید. تیتر Hero معمولاً بهترین H1 است.
دکمه‌های Hero
دکمه اصلی باید کار مهم را نشان دهد؛ مانند «شروع آموزش»، «مشاهده خدمات» یا «ورود به فروشگاه». دکمه ثانویه می‌تواند «درباره ما» یا «مشاهده نمونه‌کارها» باشد.
از چند CTA هم‌سطح با رنگ‌های متفاوت پرهیز کنید. یک دکمه باید اولویت بصری بیشتری داشته باشد.
مرحله ششم: ساخت نوار اعتماد یا آمار
پس از Hero میتوانید یک Row یا Columns کوتاه برای نمایش آمار، مزیت یا نشانه اعتماد بسازید:
- تعداد مشتریان
- سال تجربه
- تعداد آموزش‌ها
- پشتیبانی
- رضایت کاربران
فقط آمار واقعی و قابل دفاع استفاده کنید. داده ساختگی اعتماد را کاهش می‌دهد.
مرحله هفتم: ساخت بخش مزایا
یک Group با Heading و سه یا چهار ستون بسازید. هر ستون می‌تواند شامل Icon یا Image، Heading و Paragraph باشد.
ساختار هر کارت مزیت
- عنوان کوتاه
- توضیح یک یا دو جمله‌ای
- آیکن ساده
- لینک فقط در صورت نیاز
مزایا باید از دید کاربر نوشته شوند؛ «پشتیبانی سریع» بهتر از «دارای تیم پشتیبانی» است.
مرحله هشتم: معرفی خدمات یا دسته‌های اصلی
برای معرفی خدمات از Columns، Grid یا Pattern آماده استفاده کنید. تعداد گزینه‌ها را محدود کنید تا انتخاب ساده بماند.
هر کارت خدمت می‌تواند تصویر، عنوان، توضیح و لینک داشته باشد. اگر خدمات برگه‌های مستقل دارند، عنوان و دکمه را به آن صفحه متصل کنید.
ساخت بخش خدمات با Pattern
اگر همین Layout در صفحات دیگر نیز استفاده میشود، آن را Pattern معمولی بسازید. اگر متن و لینک‌ها باید همه‌جا یکسان بمانند، Synced Pattern مناسب است.
راهنمای کامل در مقاله Pattern و Synced Pattern در وردپرس ارائه شده است.
مرحله نهم: معرفی برند یا فرایند کار
Media & Text برای این بخش مناسب است. یک تصویر واقعی در کنار توضیح کوتاه قرار دهید و فرایند را در سه یا چهار مرحله توضیح دهید.
متن درباره ما در صفحه اصلی باید خلاصه باشد. لینک ادامه را به برگه درباره ما بدهید.
نمایش فرایند با Steps
میتوانید Row یا Columns بسازید و هر مرحله را با شماره، عنوان و توضیح کوتاه نشان دهید:
- انتخاب خدمت
- ارسال درخواست
- بررسی و اجرا
- تحویل و پشتیبانی
مرحله دهم: ساخت بخش مقالات جدید با Query Loop
Query Loop برای نمایش خودکار نوشته‌های جدید مناسب است. وقتی مقاله جدید منتشر میشود، صفحه اصلی بدون ویرایش دستی به‌روزرسانی خواهد شد.
- یک Heading با عنوان «آخرین مقالات» اضافه کنید.
- Query Loop را درج کنید.
- Query Type را Custom انتخاب کنید.
- Post Type را Posts بگذارید.
- ترتیب را Newest to Oldest قرار دهید.
- تعداد نتایج را ۳ یا ۶ انتخاب کنید.
- Post Template را Grid کنید.
- Featured Image، Title، Excerpt و Date اضافه کنید.
- یک دکمه «مشاهده همه مقالات» زیر بخش بگذارید.
برای جزئیات کامل، مقاله آموزش Query Loop در وردپرس را مطالعه کنید.
فیلتر مقالات صفحه اصلی
میتوانید فقط مطالب یک دسته مهم را نمایش دهید. Filters → Taxonomies را باز و دسته مورد نظر را انتخاب کنید.
اگر چند بخش مقاله در صفحه دارید، Queryها را سبک و محدود نگه دارید. تعداد زیاد Query Loop سرعت و پیچیدگی صفحه را افزایش می‌دهد.
مرحله یازدهم: نمایش محصولات یا نمونه‌کارها
در سایت فروشگاهی، WooCommerce Blocks یا ابزار قالب ممکن است برای نمایش محصول مناسب‌تر باشند. در سایت نمونه‌کار، اگر Post Type عمومی باشد میتوان از Query Loop استفاده کرد.
کارت محصول باید قیمت، تصویر، عنوان و CTA روشن داشته باشد. از قرار دادن ده‌ها محصول در صفحه اصلی پرهیز کنید؛ محصولات منتخب یا پرفروش را نمایش دهید.
مرحله دوازدهم: نظرات مشتریان
برای Testimonial میتوانید Columns یا Pattern بسازید. هر نظر باید کوتاه، واقعی و دارای نام یا مشخصات قابل قبول باشد.
اگر نظرها زیاد هستند، Slider ممکن است وسوسه‌کننده باشد؛ اما Slider سنگین، کنترل دشوار و دسترس‌پذیری ضعیف می‌تواند تجربه را خراب کند. چند کارت ثابت اغلب بهتر است.
مرحله سیزدهم: ساخت FAQ
برای پرسش‌های متداول از Heading و Details Block استفاده کنید. سؤال‌ها باید براساس ابهام واقعی کاربران باشند.
همه پاسخ‌ها را پنهان نکنید اگر اطلاعات اصلی هستند. FAQ تکمیل‌کننده صفحه است، نه جایگزین توضیح خدمات.
مرحله چهاردهم: CTA پایانی
در انتهای صفحه یک Group با پس‌زمینه متفاوت بسازید. تیتر کوتاه، توضیح و یک دکمه اصلی قرار دهید.
نمونه ساختار:
- تیتر: «برای شروع آماده‌اید؟»
- توضیح: نتیجه یا مرحله بعدی
- دکمه: «مشاهده خدمات»
CTA پایانی می‌تواند Synced Pattern باشد تا در صفحات دیگر نیز استفاده شود.
هدر و فوتر صفحه اصلی
در Front Page Template از Header و Footer Template Part استفاده کنید. اگر صفحه فرود خاصی دارید، میتوانید Header ساده‌تر یا Footer متفاوت بسازید.
مقاله آموزش ساخت هدر و فوتر با Site Editor این فرایند را کامل توضیح می‌دهد.
تنظیم رنگ و فونت صفحه اصلی
از Global Styles استفاده کنید تا فونت، پالت رنگ و استایل دکمه‌ها هماهنگ باشند. رنگ و فونت را برای هر بلوک جداگانه تنظیم نکنید مگر اینکه واقعاً استثنا باشد.
راهنمای کامل در مقاله Global Styles و تنظیم رنگ و فونت موجود است.
مدیریت فاصله‌ها
برای فاصله عمودی Sectionها از Padding و Block Gap استفاده کنید. Spacerهای متعدد در موبایل مشکل ایجاد می‌کنند.
- Padding داخل Section
- Margin میان Sectionها
- Block Gap میان فرزندان
یک مقیاس ثابت برای فاصله‌ها انتخاب کنید تا صفحه منظم بماند.
عرض محتوا و Section تمام‌عرض
Group بیرونی می‌تواند Full Width باشد و Group داخلی عرض محتوا را محدود کند. این الگو برای پس‌زمینه تمام‌عرض و متن خوانا مناسب است.
اگر Full Width کار نمی‌کند، تنظیمات Template و Layout قالب را بررسی کنید.
طراحی واکنش‌گرا
صفحه اصلی باید در Desktop، Tablet و Mobile بررسی شود. موارد مهم:
- Hero در موبایل بیش از حد بلند نباشد.
- ستون‌ها به ترتیب منطقی Stack شوند.
- دکمه‌ها سطح لمس کافی داشته باشند.
- تیتر از عرض صفحه خارج نشود.
- تصاویر Crop نامناسب نداشته باشند.
- Grid مقالات در موبایل یک‌ستونه یا دو‌ستونه منطقی باشد.
- فاصله‌ها در موبایل کاهش یابند.
ترتیب محتوا در موبایل
در Hero دو ستونه، متن معمولاً باید قبل از تصویر باشد. در بخش Media & Text نیز بررسی کنید اطلاعات مهم در بالا قرار گیرند.
فقط به Preview ویرایشگر اعتماد نکنید؛ صفحه واقعی را روی موبایل آزمایش کنید.
سئو صفحه اصلی
- یک H1 اصلی و مشخص داشته باشید.
- Title و Meta Description اختصاصی تنظیم کنید.
- خدمت یا موضوع اصلی را در متن اولیه توضیح دهید.
- لینک داخلی به صفحات مهم بدهید.
- تصاویر Alt مناسب داشته باشند.
- از متن تکراری و عمومی پرهیز کنید.
- Schema سازمان یا وب‌سایت را با افزونه سئو تنظیم کنید.
- صفحه اصلی Canonical صحیح داشته باشد.
صفحه اصلی نباید برای همه کلمات کلیدی سایت هدف‌گذاری شود. تمرکز آن باید روی برند و موضوع اصلی باشد.
Rank Math در صفحه اصلی
اگر صفحه خانه یک برگه ثابت است، تنظیمات SEO همان برگه را تکمیل کنید. اگر قالب یا افزونه تنظیمات جداگانه برای Homepage دارد، از ایجاد Title و Description متناقض جلوگیری کنید.
سرعت صفحه اصلی
صفحه اصلی معمولاً بیشترین بازدید و بیشترین عناصر را دارد. بهینه‌سازی آن اهمیت ویژه‌ای دارد.
- تصویر Hero را فشرده کنید.
- ویدئوی خودکار سنگین استفاده نکنید.
- Sliderهای غیرضروری را حذف کنید.
- تعداد Query Loop و محصولات را محدود کنید.
- فونت‌ها و وزن‌ها را کاهش دهید.
- تصاویر پایین صفحه را Lazy Load کنید.
- DOM تودرتو را محدود نگه دارید.
- کش و CDN را بررسی کنید.
LCP و تصویر Hero
تصویر Hero می‌تواند عنصر LCP باشد. ابعاد صحیح، فشرده‌سازی، فرمت مناسب و جلوگیری از Lazy Load اشتباه روی تصویر اصلی اهمیت دارد.
Preload باید فقط برای منابع حیاتی و پس از اندازه‌گیری استفاده شود.
دسترس‌پذیری صفحه اصلی
- Headingها ترتیب منطقی داشته باشند.
- کنتراست رنگ کافی باشد.
- دکمه‌ها متن روشن داشته باشند.
- Focus State حذف نشود.
- Navigation با صفحه‌کلید کار کند.
- تصاویر تزئینی Alt خالی و تصاویر محتوایی Alt توضیحی داشته باشند.
- ویدئو کنترل و زیرنویس داشته باشد.
- Slider در صورت استفاده قابل توقف باشد.
ساخت صفحه اصلی با Pattern آماده
بعضی Block Themeها هنگام ساخت Front Page، Patternهای آماده پیشنهاد می‌دهند. میتوانید یک Pattern را انتخاب و سپس متن، تصویر و رنگ را تغییر دهید.
Pattern آماده را بدون بررسی منتشر نکنید؛ ممکن است لینک آزمایشی، متن لاتین، تصویر خارجی یا ساختار نامناسب موبایل داشته باشد.
ذخیره Sectionها به‌صورت Pattern
Hero، خدمات، FAQ و CTA را میتوانید Pattern کنید. Pattern معمولی برای ساختار مشابه با محتوای متفاوت مناسب است. Synced Pattern برای بخشی است که باید همه‌جا یکسان بماند.
صفحه اصلی در WoodMart
قالب فعال dev-source.ir یعنی WoodMart 8.3.7 از Site Editor کامل استفاده نمی‌کند. در این سایت صفحه اصلی معمولاً به‌صورت یک برگه با Gutenberg، Elementor یا WPBakery ساخته میشود و Layout، Header و تنظیمات عمومی از ابزارهای WoodMart می‌آیند.
- Header: WoodMart Header Builder
- رنگ و فونت: Theme Settings
- بخش‌های تکراری: HTML Blocks
- Layout فروشگاه: Layout Builder
- محتوای برگه: Gutenberg یا Page Builder فعال
برای آزمایش Front Page Template واقعی، یک Block Theme را روی لوکال یا Staging فعال کنید.
آیا باید برای ساخت صفحه اصلی قالب را تغییر دهیم؟
خیر. اگر WoodMart نیازهای سایت را پوشش می‌دهد، صرفاً برای استفاده از Site Editor قالب را تغییر ندهید. مهاجرت قالب فروشگاهی باید همراه تست کامل محصول، سبد خرید، حساب کاربری، فیلتر و سئو انجام شود.
رفع مشکل نمایش صفحه وبلاگ به‌جای خانه
Settings → Reading را بررسی کنید و Homepage را روی برگه خانه قرار دهید. سپس Front Page Template و کش سایت را کنترل کنید.
رفع مشکل نمایش ندادن محتوای خانه
در Front Page Template باید Post Content وجود داشته باشد. اگر طراحی کل صفحه مستقیماً داخل Template ساخته شده باشد، محتوای برگه خانه ممکن است استفاده نشود.
رفع مشکل تغییر صفحه اصلی اما دیده نشدن نتیجه
- کش وردپرس، سرور و CDN را پاک کنید.
- بررسی کنید برگه صحیح را ویرایش کرده باشید.
- Front Page Template را بررسی کنید.
- Pattern همگام را کنترل کنید.
- حالت ناشناس مرورگر را آزمایش کنید.
- CSS یا Page Builder قدیمی را بررسی کنید.
رفع مشکل تمام‌عرض نشدن بخش‌ها
Group یا Cover را روی Align Full قرار دهید. سپس Width و Layout والد، Template و تنظیمات قالب را بررسی کنید.
رفع مشکل به‌هم‌ریختگی موبایل
Columns، Row، Padding، Font Size، Min Height و Aspect Ratio را بررسی کنید. Spacerهای زیاد و ارتفاع ثابت از علت‌های رایج هستند.
اشتباهات رایج
- استفاده از پیام مبهم در Hero
- چند H1 در صفحه
- دکمه‌های زیاد و هم‌سطح
- استفاده از تصاویر بسیار سنگین
- نمایش همه خدمات و محصولات
- Sliderهای متعدد
- آمار و نظر ساختگی
- ویرایش Front Page Template به‌جای محتوای برگه
- حذف Post Content
- تست نکردن موبایل
- استفاده از آموزش Block Theme روی WoodMart بدون تطبیق
چک‌لیست نهایی صفحه اصلی
- هدف اصلی صفحه مشخص است.
- برگه خانه و وبلاگ تنظیم شده‌اند.
- Front Page Template بررسی شده است.
- Post Content در Template وجود دارد.
- Hero پیام روشن و CTA اصلی دارد.
- مزایا و خدمات کوتاه و واقعی‌اند.
- Query Loop مقالات درست کار می‌کند.
- موبایل و تبلت بررسی شده‌اند.
- H1 و ساختار Heading منطقی‌اند.
- تصاویر فشرده و دارای Alt هستند.
- Meta Title و Description تنظیم شده‌اند.
- سرعت و Core Web Vitals بررسی شده‌اند.
- فرم، لینک و دکمه‌ها تست شده‌اند.
- بکاپ یا Revision موجود است.
📌 همچنین بخوانید: دسترس‌پذیری در Gutenberg و Site Editor وردپرس، طراحی ریسپانسیو در Gutenberg و Site Editor وردپرس و ساخت لندینگ پیج با Gutenberg در وردپرس
پرسش‌های متداول
Gutenberg برای ساخت صفحه اصلی کافی است؟
برای بسیاری از سایتهای شرکتی، آموزشی و محتوایی بله. نیازهای بسیار پیچیده ممکن است به بلوک اختصاصی یا ابزار دیگر نیاز داشته باشند.
Site Editor در همه قالبها فعال است؟
خیر. Site Editor کامل فقط با Block Theme فعال میشود.
Front Page و Home چه تفاوتی دارند؟
Front Page صفحه اصلی دامنه و Home صفحه فهرست نوشتههاست.
چرا محتوای برگه خانه نمایش داده نمی‌شود؟
ممکن است Front Page Template فاقد Post Content باشد یا طراحی مستقیماً داخل Template ساخته شده باشد.
چگونه آخرین مقالات را نمایش دهیم؟
از Query Loop سفارشی با Post Type نوشته و ترتیب جدیدترین استفاده کنید.
آیا میتوان صفحه اصلی را به Pattern تبدیل کرد؟
میتوانید Sectionهای صفحه را Pattern کنید. تبدیل کل صفحه به Pattern همیشه برای نگهداری بهترین روش نیست.
در WoodMart از Site Editor استفاده کنیم؟
Site Editor کامل مسیر اصلی WoodMart نیست. محتوا را با ویرایشگر فعال و تنظیمات عمومی را با ابزارهای WoodMart مدیریت کنید.
جمع‌بندی
ساخت صفحه اصلی با Gutenberg و Site Editor ترکیبی از طراحی محتوای برگه و مدیریت Front Page Template است. برگه خانه باید Hero روشن، مزایا، خدمات، اعتمادسازی، محتوای پویا و CTA مشخص داشته باشد. Template نیز Header، Footer و Post Content را مدیریت می‌کند.
برای نتیجه حرفه‌ای، ابتدا هدف صفحه را مشخص کنید، سپس Sectionها را با Group، Columns، Pattern و Query Loop بسازید. از Global Styles برای رنگ و فونت استفاده کنید، تصاویر را بهینه نگه دارید و نسخه موبایل را دقیق آزمایش کنید.
در dev-source.ir با WoodMart 8.3.7، طراحی صفحه اصلی باید مطابق ابزارهای WoodMart و ویرایشگر فعال انجام شود. برای یادگیری Site Editor واقعی، Block Theme را روی محیط آزمایشی فعال کنید.