هدر سایت چیست؟ راهنمای کامل طراحی و ساخت

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

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

هدر سایت چیست و کجای صفحه قرار می‌گیره؟

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

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

تفاوت هدر با سربرگ محتوا و بالای صفحه

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

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

آیا هدر باید در همه صفحه‌ها یکسان باشه؟

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

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

هدر سایت معمولاً چه بخش‌هایی داره؟

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

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

هدر چه کاربردی برای سایت و کاربر داره؟

کمک به پیدا کردن بخش‌های مهم سایت

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

نمایش هویت و اعتبار برند

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

هدایت کاربر به اقدام اصلی

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

انواع هدر سایت کدوم هستن؟

هدر ثابت

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

هدر چسبان

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

هدر شفاف

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

هدر عمودی

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

هدر مخصوص موبایل

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

چطور در وردپرس هدر سایت رو بسازیم یا تغییر بدیم؟

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

ساخت هدر در قالب‌های بلوکی با ویرایشگر سایت

توی قالب بلوکی، هدر یک «بخش الگو» یا Template Part هست؛ یعنی بخشی که یک‌بار ساخته می‌شه و می‌تونید اون رو توی چند الگوی سایت به کار ببرید. برای ویرایش هدر این مراحل رو انجام بدید:

1. از پیشخوان وردپرس وارد نمایش ← ویرایشگر بشید.
2. بخش طراحی و بعد الگوها رو باز کنید. اسم گزینه‌ها ممکنه با توجه به نسخه وردپرس و زبان پیشخوان کمی فرق داشته باشه.
3. الگویی رو که می‌خواید باز کنید و بخش هدر اون رو انتخاب کنید. توی بعضی قالب‌ها هدر از بخش الگوها ← مدیریت همه الگوهای من در دسترسه.
4. لوگو، منو، رنگ‌ها و دکمه‌ها رو تغییر بدید. بعد روی ذخیره بزنید و ذخیره تغییرات بخش هدر رو هم تأیید کنید.

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

ساخت هدر در قالب‌های کلاسیک

تغییر هدر از بخش سفارشی‌سازی قالب

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

ساخت هدر با فایل header.php و تابع get_header()

توی قالب کلاسیک، فایل header.php معمولاً کدهای بخش ابتدایی صفحه و هدر رو نگه می‌داره. تابع get_header() هم این فایل رو داخل الگوهایی مثل index.php یا single.php فراخوانی می‌کنه.

برای این روش باید با HTML، CSS، PHP و ساختار قالب وردپرس آشنا باشید. فایل قالب اصلی رو هم مستقیم تغییر ندید، چون ممکنه بعد از به‌روزرسانی قالب، تغییراتتون از بین بره. برای شروع می‌تونید راهنمای توابع پرکاربرد وردپرس رو بخونید.

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

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

یک هدر خوب چه ویژگی‌هایی داره؟

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

ظاهر زیبا مهمه، ولی راحت بودن کار با هدر اهمیت بیشتری داره. اگه برای طراحی به یک دید کلی‌تر نیاز دارید، مقاله رابط کاربری یا UI چیست اصول این موضوع رو به زبان ساده توضیح می‌ده.

هدر سایت چه اثری روی سئو و سرعت داره؟

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

اثر هدر سنگین روی LCP، INP و CLS

Core Web Vitals گوگل سه معیار برای سنجیدن تجربه واقعی کاربر داره. LCP سرعت دیده شدن بزرگ‌ترین بخش مهم صفحه رو می‌سنجه. INP واکنش سایت بعد از کلیک یا لمس رو بررسی می‌کنه و CLS جابه‌جایی ناگهانی اجزای صفحه رو نشون می‌ده.

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

چرا محتوای اصلی باید سریع دیده بشه؟

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

لینک‌های منوی هدر چه کمکی به ساختار سایت می‌کنن؟

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

تگ header در HTML چیه و کجا استفاده می‌شه؟

تگ <header> یک عنصر معنایی توی HTML هست؛ یعنی به مرورگر و ابزارهای کمکی می‌گه این بخش نقش مقدمه یا سربرگ رو برای صفحه یا بخشی از محتوا داره. این تگ فقط مخصوص هدر اصلی سایت نیست و داخل یک مقاله یا بخش هم می‌تونه استفاده بشه.

ساختار ساده تگ header

<header>
  <a href="/">نام سایت</a>
  <nav aria-label="منوی اصلی">
    <!-- لینک‌های منو -->
  </nav>
</header>

توی این نمونه، تگ <nav> بخش مسیریابی رو مشخص می‌کنه. ویژگی aria-label هم یک نام قابل‌فهم برای ابزارهای کمکی می‌سازه. متن جایگزین لوگو، ترتیب درست عنوان‌ها و امکان کار با منو از راه صفحه‌کلید رو هم باید جداگانه بررسی کنید.

نقش هدر اصلی در دسترس‌پذیری سایت

وقتی <header> هدر اصلی صفحه باشه، معمولاً نقش دسترس‌پذیری banner رو می‌گیره. صفحه‌خوان نرم‌افزاریه که محتوای صفحه رو برای کاربران نابینا یا کم‌بینا می‌خونه و می‌تونه با کمک این نقش، ساختار صفحه رو بهتر تشخیص بده.

ولی اگه <header> داخل عناصری مثل <article>، <main> یا <section> باشه، نقش هدر اصلی صفحه رو نداره. معمولاً بهتره هر صفحه فقط یک بنر اصلی داشته باشه.

تفاوت تگ header با هد سایت

تگ <header> یک بخش قابل‌مشاهده از صفحه رو مشخص می‌کنه. در مقابل، تگ <head> اطلاعاتی مثل عنوان صفحه، توضیحات متا و لینک فایل‌های CSS رو نگه می‌داره و محتوای معمولی داخل اون روی صفحه دیده نمی‌شه. پس گول شباهت اسم این دو تگ رو نخورید؛ با دو چیز متفاوت طرف هستید.

اشتباه‌های رایج در طراحی هدر سایت

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

چک‌لیست طراحی یا بررسی هدر سایت

1. لوگو و منوی سایت رو بررسی کنید: لوگو باید واضح باشه و لینک صفحه اصلی کار کنه. گزینه‌های منو هم باید اسم‌های قابل‌فهمی داشته باشن.
2. نمایش هدر در موبایل رو آزمایش کنید: منو رو باز و بسته کنید و ببینید همه دکمه‌ها راحت لمس می‌شن یا نه.
3. سرعت و پایداری چیدمان رو بسنجید: بررسی کنید هدر دیر ظاهر می‌شه یا بعد از بارگذاری، محتوا رو جابه‌جا می‌کنه.
4. لینک‌ها و دکمه‌ها رو امتحان کنید: همه مسیرها باید به صفحه درست برن و باز یا بسته بودن منو مشخص باشه.
5. دسترسی سریع به محتوای اصلی رو بررسی کنید: هدر نباید بخش بزرگی از صفحه رو بپوشونه یا رسیدن به مطلب اصلی رو سخت کنه.

جمع‌بندی

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

سؤالات متداول درباره هدر سایت

تیم تولید محتوا

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