آموزش ساخت هدر و فوتر با Site Editor در وردپرس؛ از صفر تا حرفه‌ای

ساخت هدر و فوتر با Site Editor یکی از مهم‌ترین قابلیت‌های قالب‌های بلوکی وردپرس است. در این روش، Header و Footer دیگر فایل‌های ثابت PHP نیستند؛ بلکه به‌صورت Template Part ساخته می‌شوند و با بلوک‌هایی مانند Site Logo، Site Title، Navigation، Search، Buttons، Social Icons، Group، Row و Columns قابل طراحی‌اند. هر تغییری که روی Template Part اصلی انجام دهید، در تمام Templateهایی که از همان بخش استفاده می‌کنند نمایش داده می‌شود.

در این آموزش، ابتدا تفاوت هدر و فوتر بلوکی با روش کلاسیک را توضیح می‌دهیم، سپس یک هدر حرفه‌ای با لوگو، منوی دسکتاپ، منوی موبایل، دکمه اقدام و نوار اطلاع‌رسانی می‌سازیم. بعد از آن یک فوتر چندستونه با منو، اطلاعات تماس، شبکه‌های اجتماعی، حق نشر و بخش پایانی طراحی می‌کنیم. در ادامه نیز Header شفاف، Sticky Header، هدر متفاوت برای صفحات خاص، مدیریت Navigation، قفل‌گذاری، طراحی واکنش‌گرا، سرعت، سئو، دسترس‌پذیری، Export و رفع خطاها را بررسی خواهیم کرد.

هدر و فوتر در قالب بلوکی چگونه کار می‌کنند؟

در قالب بلوکی، هدر و فوتر معمولاً به‌صورت Template Part تعریف می‌شوند. Template Part بخشی تکرارشونده از ساختار سایت است که می‌تواند در چند Template استفاده شود. برای مثال Single Post، Page، Archive و Search همگی ممکن است از یک Header مشترک استفاده کنند.

وقتی Header Template Part را ویرایش می‌کنید، تغییر روی تمام Templateهایی که همان Header را فراخوانی می‌کنند اعمال می‌شود. همین موضوع هم مزیت است و هم مسئولیت؛ زیرا یک تغییر اشتباه ممکن است ظاهر کل سایت را تغییر دهد.

در فایل‌های یک Block Theme، Header و Footer ممکن است در مسیرهای زیر قرار داشته باشند:

parts/header.html
parts/footer.html

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

پیش‌نیازهای ساخت هدر و فوتر با Site Editor

• فعال بودن یک Block Theme
• نسخه به‌روز وردپرس
• سطح دسترسی مدیر یا کاربری با مجوز ویرایش تنظیمات قالب
• تهیه بکاپ کامل قبل از تغییرات گسترده
• ترجیحاً داشتن Staging برای آزمایش
• آشنایی اولیه با Gutenberg و List View

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

ورود به بخش Header و Footer در Site Editor

دو مسیر اصلی برای ویرایش Template Part وجود دارد:

1. از پیشخوان به Appearance → Editor بروید.
2. بخش Design یا Patterns را باز کنید.
3. Template Parts را انتخاب کنید.
4. Header یا Footer مورد نظر را باز کنید.

مسیر دیگر این است که یکی از Templateها مانند Single یا Page را باز کنید و از داخل List View روی Header یا Footer کلیک کنید. سپس گزینه Edit را بزنید تا همان Template Part در حالت جداگانه باز شود.

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

شناخت ساختار استاندارد یک هدر حرفه‌ای

هدر حرفه‌ای معمولاً از چند لایه تشکیل می‌شود:

• نوار اطلاع‌رسانی یا Top Bar
• بخش اصلی شامل لوگو، منو و دکمه
• منوی موبایل یا Overlay Navigation
• در صورت نیاز Search، Social Icons یا Account Link

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

مرحله اول: باز کردن یا ساخت Header Template Part

در Site Editor به بخش Patterns یا Template Parts بروید. اگر Header آماده وجود دارد، آن را Duplicate کنید تا نسخه اصلی حفظ شود. اگر Header جدید می‌سازید:

1. روی Add New Pattern یا Add Template Part کلیک کنید.
2. نامی مانند Main Header انتخاب کنید.
3. Area را روی Header قرار دهید.
4. یک Group یا Row به‌عنوان والد اصلی اضافه کنید.
5. عرض، Padding و رنگ پس‌زمینه را تنظیم کنید.

انتخاب Area روی Header فقط برای سازمان‌دهی و تشخیص بهتر است. سپس باید این Template Part را در Templateهای مورد نظر قرار دهید تا در Front-end نمایش داده شود.

مرحله دوم: ساخت نوار اصلی هدر

یک Group تمام‌عرض اضافه کنید و داخل آن یک Row قرار دهید. Group بیرونی پس‌زمینه و عرض کلی را کنترل می‌کند و Row داخلی عناصر را کنار هم قرار می‌دهد.

تنظیمات پیشنهادی برای Group بیرونی:

• Alignment: Full Width
• Content Width: مطابق عرض اصلی قالب
• Padding بالا و پایین: متوسط
• Padding چپ و راست: هماهنگ با Layout عمومی
• Background: رنگ اصلی یا سفید

در Row داخلی، Justification را روی Space Between قرار دهید تا لوگو در یک طرف و منو و دکمه در سمت دیگر قرار گیرند. در سایت فارسی، جهت RTL را در Preview واقعی بررسی کنید.

مرحله سوم: افزودن لوگوی سایت

بلوک Site Logo را اضافه کنید. این بلوک با لوگوی ثبت‌شده سایت ارتباط دارد و می‌تواند در تمام Templateها یکسان باشد.

تنظیمات مهم لوگو

• عرض لوگو را ثابت و منطقی انتخاب کنید.
• گزینه Link image to home را فعال کنید.
• Crop یا Aspect Ratio را فقط در صورت نیاز تغییر دهید.
• از فایل SVG امن یا WebP بهینه استفاده کنید.
• Alt لوگو را با نام برند تنظیم کنید.

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

Site Title و Site Tagline؛ استفاده کنیم یا نه؟

اگر لوگوی تصویری نام برند را نشان نمی‌دهد، می‌توانید Site Title را کنار آن قرار دهید. Site Tagline برای شعار کوتاه برند مناسب است، اما در بسیاری از هدرها فضای اضافه ایجاد می‌کند.

از نظر سئو، وجود Site Title در هدر الزامی نیست. ساختار Heading صفحه مهم‌تر است. Site Title را به‌عنوان H1 در همه صفحات تنظیم نکنید، زیرا ممکن است با عنوان اصلی نوشته یا برگه تداخل ایجاد کند.

مرحله چهارم: ساخت منوی هدر با Navigation Block

Navigation Block یک بلوک والد برای مدیریت لینک‌های منوست. ابتدا آن را به Row هدر اضافه کنید. سپس یکی از منوهای موجود را انتخاب یا منوی جدید بسازید.

افزودن آیتم منو

• Page Link برای برگه‌ها
• Post Link برای نوشته خاص
• Category Link برای دسته
• Custom Link برای URL دلخواه
• Home Link برای صفحه اصلی
• Search در صورت نیاز

ساخت منو در Site Editor و قرار دادن Navigation Block دو مرحله مرتبط‌اند. طبق مستندات رسمی، منوی ساخته‌شده باید به Navigation Block داخل Header متصل شود تا نمایش داده شود.

ساخت زیرمنو در Navigation

برای ساخت زیرمنو، آیتم فرزند را داخل Submenu والد قرار دهید. این کار از List View یا Drag & Drop قابل انجام است.

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

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

در تنظیمات Navigation Block، رفتار Responsive و Overlay Menu را بررسی کنید. معمولاً می‌توانید مشخص کنید منو در چه اندازه‌ای به آیکن همبرگری تبدیل شود.

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

• آیکن باز و بسته شدن قابل مشاهده باشد.
• منو با صفحه‌کلید قابل کنترل باشد.
• Overlay روی محتوا یا تمام صفحه به‌درستی نمایش داده شود.
• زیرمنوها قابل باز شدن باشند.
• Focus داخل منو گم نشود.
• لینک‌ها فاصله لمسی کافی داشته باشند.
• Scroll صفحه هنگام باز بودن منو رفتار قابل قبول داشته باشد.

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

مرحله پنجم: افزودن دکمه اقدام به هدر

بلوک Buttons را کنار Navigation قرار دهید و یک Button با متن روشن بسازید؛ مانند «شروع همکاری»، «دریافت مشاوره» یا «مشاهده دوره‌ها».

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

افزودن Search به هدر

Search Block را می‌توانید به‌صورت آیکن، دکمه یا فرم کامل نمایش دهید. برای وبلاگ و فروشگاه، جست‌وجو اهمیت بیشتری دارد. در سایت ساده شرکتی، ممکن است ضرورتی نداشته باشد.

عرض فرم، Placeholder، Label و رفتار موبایل را بررسی کنید. Label را فقط به دلیل ظاهر حذف نکنید؛ دسترس‌پذیری جست‌وجو باید حفظ شود.

افزودن Social Icons

Social Icons برای لینک شبکه‌های اجتماعی مناسب است. تعداد آیکن‌ها را محدود کنید و فقط شبکه‌های فعال را نمایش دهید. لینک‌ها را به آدرس دقیق پروفایل متصل کنید.

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

ساخت Top Bar یا نوار اطلاع‌رسانی

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

Top Bar نباید ارتفاع زیادی داشته باشد. برای پیام‌های موقت می‌توان از Pattern یا Synced Pattern استفاده کرد، اما ساختار اصلی هدر همچنان بهتر است Template Part باقی بماند.

ساخت هدر دو ردیفه

برای هدر دو ردیفه، داخل Template Part دو Group یا Row بسازید:

1. ردیف اول: لوگو، جست‌وجو، حساب کاربری و دکمه
2. ردیف دوم: Navigation اصلی یا دسته‌بندی‌ها

این ساختار برای فروشگاه یا سایت محتوایی بزرگ مفید است. در موبایل بهتر است ردیف دوم به Overlay Menu تبدیل شود تا فضای صفحه اشغال نشود.

آیا می‌توان Sticky Header ساخت؟

پشتیبانی Sticky به قالب و تنظیمات Position بستگی دارد. در بعضی Block Themeها می‌توانید Position والد هدر را روی Sticky قرار دهید و مقدار Top را صفر بگذارید.

اگر گزینه Sticky در رابط وجود ندارد، ممکن است قالب آن را غیرفعال کرده باشد یا به CSS سفارشی نیاز باشد. نمونه CSS ساده:

.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}

کلاس را در Advanced → Additional CSS Class وارد کنید. قبل از استفاده، رفتار Admin Bar، موبایل، Overlay Menu و عناصر دارای z-index را آزمایش کنید.

ساخت هدر شفاف روی Hero

هدر شفاف معمولاً نیاز دارد روی بخش Hero قرار گیرد. در Site Editor می‌توانید پس‌زمینه Header را شفاف کنید، اما قرار گرفتن واقعی روی Hero به ساختار Template و Position بستگی دارد.

این طراحی فقط زمانی مناسب است که رنگ متن و لوگو روی تصویر خوانا باشند. ممکن است نیاز به لوگوی روشن، Overlay یا تغییر رنگ لینک‌ها داشته باشید. در صفحات بدون Hero، همان هدر شفاف ممکن است خوانایی ضعیفی ایجاد کند؛ بنابراین هدر اختصاصی برای Template یا Page خاص بهتر است.

ساخت Header متفاوت برای صفحات مختلف

می‌توانید چند Header Template Part بسازید؛ برای مثال:

• Main Header
• Landing Header
• Shop Header
• Minimal Header
• Transparent Header

سپس در Templateهای مختلف، Template Part مناسب را انتخاب کنید. برای نمونه Landing Page می‌تواند هدر ساده بدون منو داشته باشد، در حالی که Single Post از هدر اصلی استفاده کند.

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

مرحله ششم: ساخت Footer Template Part

در Site Editor به Template Parts بروید و Footer موجود را Duplicate یا Footer جدید بسازید. Area را روی Footer قرار دهید.

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

ساخت فوتر چندستونه

یک Columns Block با سه یا چهار ستون اضافه کنید. نمونه ساختار:

• ستون اول: لوگو و معرفی کوتاه
• ستون دوم: لینک‌های مهم
• ستون سوم: خدمات یا دسته‌بندی‌ها
• ستون چهارم: تماس و شبکه‌های اجتماعی

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

افزودن لوگو و توضیح برند در فوتر

از Site Logo یا Image استفاده کنید. اگر می‌خواهید لوگوی فوتر با هدر متفاوت باشد، Image Block مستقل مناسب‌تر است.

توضیح برند را کوتاه نگه دارید. فوتر محل مقاله طولانی درباره شرکت نیست. دو یا سه جمله روشن کافی است.

ساخت منوی فوتر

برای فوتر می‌توانید Navigation Block مستقل با منوی جداگانه بسازید. این منو معمولاً شامل لینک‌های زیر است:

• درباره ما
• تماس با ما
• حریم خصوصی
• شرایط استفاده
• سؤالات متداول
• راهنمای خرید یا پشتیبانی

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

افزودن اطلاعات تماس

شماره تلفن، ایمیل و آدرس را با Paragraph، List یا Buttons نمایش دهید. برای تماس مستقیم می‌توانید از لینک‌های tel: و mailto: استفاده کنید.

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

ساخت بخش شبکه‌های اجتماعی در فوتر

Social Icons را اضافه کنید و اندازه و فاصله را تنظیم کنید. عنوان کوتاهی مانند «ما را دنبال کنید» می‌تواند قبل از آن قرار گیرد.

آیکن‌ها باید قابل لمس، دارای کنتراست و دارای Label قابل فهم باشند.

ساخت Copyright یا نوار پایانی

در پایین ستون‌ها یک Separator یا Border قرار دهید و سپس Row کوچکی بسازید. یک طرف متن حق نشر و طرف دیگر لینک‌های قانونی یا سازنده سایت قرار گیرد.

نمونه متن:

© 2026 Brand Name. All rights reserved.

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

افزودن فرم خبرنامه به فوتر

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

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

استفاده از Pattern برای هدر و فوتر

Pattern می‌تواند نقطه شروع طراحی Header یا Footer باشد. برخی قالب‌ها چند Pattern آماده برای Header و Footer ارائه می‌دهند.

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

تفاوت Template Part با Synced Pattern

هر دو همگام و قابل استفاده مجدد هستند، اما کاربرد اصلی متفاوت است:

• Template Part: بخش ساختاری سایت مانند Header، Footer یا Sidebar
• Synced Pattern: بخش محتوایی یا طراحی تکرارشونده مانند CTA، اعلان یا اطلاعات تماس

قرار دادن Template Part داخل Pattern معمولاً ساختار را پیچیده می‌کند. برای Header و Footer مستقیماً از Template Part استفاده کنید.

استایل عمومی هدر و فوتر با Global Styles

از Site Editor → Styles می‌توانید رنگ، تایپوگرافی، Layout و استایل بلوک‌ها را تنظیم کنید. بهتر است رنگ و فونت هدر و فوتر از پالت و Presetهای قالب استفاده کنند.

اگر برای هر بلوک رنگ دلخواه وارد کنید، تغییر برند در آینده دشوار می‌شود. با Global Styles می‌توانید همه Buttonها، Navigation Linkها یا Headingها را به‌صورت مرکزی هماهنگ کنید.

تنظیم فاصله و عرض حرفه‌ای

سه مفهوم اصلی را جدا کنید:

• Padding: فاصله داخل بخش
• Margin: فاصله بیرون بخش
• Block Gap: فاصله میان فرزندان یک Group یا Row

برای هدر، ارتفاع زیاد باعث اشغال فضای صفحه می‌شود. برای فوتر، فاصله کافی میان ستون‌ها و نوار پایانی لازم است. از Spacerهای متعدد استفاده نکنید؛ فاصله را از Dimensions کنترل کنید.

طراحی واکنش‌گرا

هدر و فوتر باید روی Desktop، Tablet و Mobile تست شوند. مشکلات رایج عبارت‌اند از:

• لوگوی بزرگ در موبایل
• دکمه‌ای که کنار منو جا نمی‌شود
• Navigation Overlay خراب
• ستون‌های فوتر با ترتیب نامناسب
• متن طولانی بدون Wrap
• آیکن‌های بسیار کوچک
• Padding زیاد در صفحه کوچک

در WordPress و قالب‌های مختلف، کنترل‌های Responsive ممکن است متفاوت باشند. گاهی برای مخفی کردن یا تغییر ترتیب عناصر به CSS یا قابلیت اختصاصی قالب نیاز است.

دسترس‌پذیری هدر و فوتر

• لوگو به صفحه اصلی لینک شود.
• Navigation دارای ساختار و Label روشن باشد.
• منوی موبایل با صفحه‌کلید باز و بسته شود.
• Focus State حذف نشود.
• کنتراست متن و پس‌زمینه کافی باشد.
• لینک‌های فوتر فقط با رنگ از متن متمایز نشوند.
• Social Icon دارای نام قابل فهم باشد.
• ترتیب Heading منطقی بماند.

هدر مهم‌ترین مسیر ناوبری سایت است. خطای دسترس‌پذیری در این بخش می‌تواند دسترسی کاربر به کل سایت را مختل کند.

سئو هدر و فوتر

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

• منو را با ده‌ها لینک غیرضروری شلوغ نکنید.
• از Anchor Text روشن استفاده کنید.
• لینک‌های حقوقی را در فوتر قرار دهید.
• Site Title را H1 تکراری نکنید.
• صفحات بی‌ارزش را فقط برای افزایش لینک داخلی وارد منو نکنید.
• لینک شکسته یا Redirect Chain را حذف کنید.

افزونه سئو مانند Rank Math متا و Schema را مدیریت می‌کند، اما ساختار Navigation و لینک‌های عمومی همچنان بر عهده طراحی سایت است.

بهینه‌سازی سرعت هدر و فوتر

هدر و فوتر در بیشتر صفحات بارگذاری می‌شوند، بنابراین هر Script، فونت یا تصویر سنگین در آن‌ها هزینه تکرارشونده دارد.

• لوگو را فشرده و در ابعاد واقعی آپلود کنید.
• از ویدئو یا Slider سنگین در هدر استفاده نکنید.
• تعداد فونت و وزن‌ها را محدود کنید.
• افزونه منو یا آیکن غیرضروری نصب نکنید.
• DOM تودرتوی بیش از حد نسازید.
• فرم و Script فوتر را بررسی کنید.
• Sticky Header را روی موبایل تست کنید.

قفل کردن ساختار Header و Footer

اگر چند کاربر در سایت فعالیت می‌کنند، بلوک‌های اصلی را Lock کنید تا جابه‌جا یا حذف نشوند. می‌توانید Navigation، Logo یا Group اصلی را قفل کنید.

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

ساخت نسخه پشتیبان و Export

پیش از تغییرات بزرگ، از سایت بکاپ بگیرید. Site Editor همچنین امکان Export طراحی را فراهم می‌کند و می‌تواند Templateها، Template Parts و تنظیمات Styles را در قالب فایل خروجی ارائه دهد.

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

Reset کردن Header یا Footer

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

قبل از Reset، از طراحی Export بگیرید؛ زیرا ممکن است تغییرات شما حذف شوند.

رفع مشکل نمایش ندادن Header جدید

ساخت Header Template Part به‌تنهایی کافی نیست. باید Template مورد نظر را باز کنید و مطمئن شوید همان Header داخل آن قرار گرفته است.

موارد زیر را بررسی کنید:

• Template صحیح در حال استفاده است.
• Header جدید به Template اضافه شده است.
• کش وردپرس، سرور و CDN پاک شده است.
• Template دیگری برای Front Page فعال نیست.
• Header داخل Pattern یا Group پنهان نشده است.

رفع مشکل تغییر Header در بعضی صفحات

ممکن است صفحات مختلف از Templateهای متفاوت استفاده کنند. Single، Page، Front Page و Archive را جداگانه باز کنید و نام Header Template Part را در List View بررسی کنید.

اگر هدف استفاده از یک Header مشترک است، همه Templateها باید به همان Template Part متصل باشند.

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

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

همچنین کنتراست متن، Display، Overlay و CSS سفارشی را کنترل کنید؛ گاهی منو وجود دارد اما رنگ آن با پس‌زمینه یکسان است.

رفع مشکل منوی موبایل

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

• کنسول JavaScript را بررسی کنید.
• تداخل افزونه کش یا Minify را آزمایش کنید.
• Navigation Block را به نسخه هسته برگردانید.
• z-index هدر و Overlay را بررسی کنید.
• قفل Scroll و Focus را تست کنید.
• افزونه‌های بلوکی را در Staging غیرفعال کنید.

رفع مشکل Sticky Header

والد Header باید فضای مناسب و Position صحیح داشته باشد. اگر Sticky کار نمی‌کند، یکی از والدها ممکن است overflow: hidden یا overflow: auto داشته باشد.

همچنین Admin Bar وردپرس می‌تواند مقدار Top را تغییر دهد. برای کاربران واردشده باید فاصله مناسب در نظر گرفته شود.

ساخت هدر و فوتر در WoodMart

در سایت فعلی dev-source.ir، روش این مقاله مستقیماً برای هدر اصلی قابل اجرا نیست، زیرا WoodMart قالب بلوکی کامل نیست. مسیرهای اصلی عبارت‌اند از:

• WoodMart → Header Builder برای هدر
• Theme Settings برای رنگ، فونت و Layout
• HTML Blocks برای بخش‌های قابل استفاده مجدد
• Widgets یا Footer Builder براساس تنظیمات قالب
• Layout Builder برای Templateهای فروشگاهی

می‌توانید محتوای نوشته‌ها را با Gutenberg بسازید، اما Header و Footer سایت باید مطابق معماری WoodMart مدیریت شوند.

آیا باید برای Site Editor قالب سایت را تغییر دهیم؟

نه صرفاً برای این قابلیت. تعویض WoodMart با Block Theme روی سایت فروشگاهی می‌تواند Header، Footer، Product Layout، Mini Cart، Filters و بخش‌های وابسته را تغییر دهد. این کار باید روی Staging و به‌عنوان پروژه مهاجرت انجام شود.

برای یادگیری، یک نصب لوکال یا Staging با قالبی مانند یکی از قالب‌های بلوکی رسمی وردپرس بسازید.

چک‌لیست نهایی هدر

• لوگو به صفحه اصلی لینک است.
• Navigation به منوی صحیح متصل است.
• زیرمنوها کار می‌کنند.
• Overlay موبایل تست شده است.
• CTA روشن و قابل کلیک است.
• کنتراست و Focus مناسب است.
• ارتفاع هدر در موبایل زیاد نیست.
• Sticky و Transparent در صفحات مختلف بررسی شده‌اند.
• لینک شکسته وجود ندارد.
• Header در همه Templateهای لازم قرار دارد.

چک‌لیست نهایی فوتر

• ستون‌ها متعادل‌اند.
• منوی فوتر مستقل و کاربردی است.
• اطلاعات تماس صحیح است.
• لینک‌های قانونی وجود دارند.
• Social Icons به پروفایل صحیح متصل‌اند.
• فرم خبرنامه تست شده است.
• نمای موبایل مرتب است.
• سال و متن Copyright صحیح‌اند.
• فونت و کنتراست خوانا هستند.
• Script یا تصویر سنگین غیرضروری وجود ندارد.

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

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

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

Site Editor کامل فقط با Block Theme فعال می‌شود. در قالب‌هایی مانند WoodMart باید از Builder اختصاصی قالب استفاده کنید.

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

Template Part برای بخش ساختاری تکرارشونده مانند Header و Footer است. Pattern برای چیدمان آماده یا محتوای تکراری استفاده می‌شود.

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

اگر همه Templateها از همان Header Template Part استفاده کنند، بله. اگر Templateهای مختلف Header متفاوت داشته باشند، فقط صفحات مرتبط تغییر می‌کنند.

چگونه هدر متفاوت برای صفحه فرود بسازیم؟

یک Header Template Part جدید بسازید، سپس Template اختصاصی Landing Page ایجاد و Header جدید را داخل آن قرار دهید.

آیا می‌توان هدر را Sticky کرد؟

اگر قالب و بلوک از Position Sticky پشتیبانی کنند، بله. در غیر این صورت CSS سفارشی و تست دقیق لازم است.

چگونه منوی موبایل بسازیم؟

Navigation Block را روی Overlay یا Responsive Menu تنظیم کنید و آیکن باز و بسته شدن، زیرمنو و دسترس‌پذیری را آزمایش کنید.

آیا می‌توان چند Footer داشت؟

بله. چند Footer Template Part بسازید و در Templateهای مختلف از نسخه مناسب استفاده کنید.

چرا فوتر در صفحه اصلی متفاوت است؟

ممکن است Front Page Template از Footer دیگری استفاده کند. Template صفحه اصلی را در Site Editor بررسی کنید.

آیا ساخت هدر با Site Editor روی سئو اثر دارد؟

بله، از نظر ساختار Navigation، Heading و لینک داخلی. نوع ابزار به‌تنهایی عامل رتبه‌بندی نیست؛ خروجی نهایی و تجربه کاربر مهم‌اند.

جمع‌بندی

ساخت هدر و فوتر با Site Editor بر پایه Template Part انجام می‌شود. Header و Footer بخش‌های عمومی و همگام سایت هستند و باید با بلوک‌های ساختاری، Navigation، Global Styles و طراحی واکنش‌گرا ساخته شوند.

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

مهم‌ترین نکته این است که Site Editor فقط در قالب بلوکی کامل در دسترس است. روی dev-source.ir با WoodMart 8.3.7 باید از Header Builder و ابزارهای اختصاصی WoodMart استفاده شود. برای تمرین این آموزش، Block Theme را روی لوکال هاست یا Staging فعال کنید.

برای تکمیل این مسیر، مقاله آموزش کامل Site Editor، راهنمای ویرایشگر بلوکی وردپرس و مقایسه قالب بلوکی و کلاسیک را نیز مطالعه کنید.

منابع رسمی

• مستندات رسمی Site Editor
• راهنمای Template Part Block
• مدیریت Navigation در Site Editor
• راهنمای Navigation Block
• مستندات توسعه Template Parts
• مقایسه Pattern و Template Part