ایران نت
زیرساخت، امنیت و رشد دیجیتال کسب‌وکارها میزبانی، دامنه، طراحی، پشتیبانی و اتوماسیون در یک مجموعه
Selected Technical Guide راهنمای فنی منتخب

آموزش ویرایش هدر وردپرس و المنتور

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

حدود ۱۵ دقیقه مطالعه Customizer، Site Editor و Elementor همراه چک‌لیست بکاپ و تست
فهرست مطالب
  1. هدر سایت چیست؟
  2. روش ویرایش را تشخیص دهید
  3. ویرایش با Customizer
  4. ویرایش با Site Editor
  5. ویرایش با Elementor
  6. لوگو، منو و دکمه تماس
  7. هدر موبایل و Sticky
  8. خطاها و مشکل کش
  9. چک‌لیست قبل و بعد از تغییر
  10. پرسش‌های متداول

در وردپرس یک مسیر ثابت برای ویرایش هدر وجود ندارد. قالب‌های کلاسیک معمولاً از سفارشی‌ساز استفاده می‌کنند، قالب‌های Block از Site Editor، و سایت‌های ساخته‌شده با المنتور ممکن است هدر را در Theme Builder یا یک افزونه جدا نگهداری کنند. بنابراین اولین کار، کلیک کردن تصادفی روی «ویرایش با المنتور» نیست؛ اولین کار تشخیص سازنده هدر است.

قبل از تغییر ساختاری بکاپ بگیرید

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

شناخت بخش

هدر سایت چیست و چه اجزایی دارد؟

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

هویت برند

لوگو، نام برند، رنگ‌ها و گاهی پیام کوتاه یا نشان اعتماد.

ناوبری

منوی اصلی، زیرمنو، Mega Menu، لینک حساب کاربری یا سبد خرید.

اقدام اصلی

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

رفتار واکنش‌گرا

نسخه دسکتاپ، منوی موبایل، حالت چسبان و تغییر ظاهر هنگام اسکرول.

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

مرحله تشخیص

قبل از ویرایش، روش ساخت هدر را پیدا کنید

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

  1. 01
    نمایش ← سفارشی‌سازی

    اگر گزینه سفارشی‌سازی وجود دارد و بخش‌هایی مانند Header، Site Identity یا Header Builder می‌بینید، احتمالاً قالب کلاسیک هدر را کنترل می‌کند.

  2. 02
    نمایش ← ویرایشگر

    وجود بخش Design، Templates و Patterns نشانه استفاده از قالب Block و Site Editor است.

  3. 03
    Templates یا Theme Builder

    در المنتور یا افزونه سازنده قالب، Templateهایی با نوع Header و شرط نمایش Entire Site را پیدا کنید.

  4. 04
    تنظیمات خود قالب

    بعضی قالب‌ها پنل اختصاصی دارند و هدر را خارج از Customizer یا با Header Builder داخلی مدیریت می‌کنند.

Customizer دارید؟قالب کلاسیک را بررسی کنید
Site Editor دارید؟Template Part هدر را باز کنید
Header Template دارید؟شرط نمایش را کنترل کنید
ممکن است چند هدر داشته باشید

سایت فروشگاهی، صفحه فرود، نسخه موبایل یا بخش اعضا می‌تواند Template هدر جدا داشته باشد. نام Template و Display Conditions را یادداشت کنید.

روش اول

ویرایش هدر از Customizer قالب

در قالب‌های کلاسیک مسیر معمول نمایش ← سفارشی‌سازی است. نام گزینه‌ها بسته به قالب فرق دارد، اما معمولاً بخش‌های Site Identity، Header، Menus، Colors و Additional CSS دیده می‌شوند.

1

پیش‌نمایش را روی صفحه درست بگذارید

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

2

Site Identity را بررسی کنید

لوگو، عنوان سایت، شعار و آیکن سایت معمولاً در این بخش هستند.

3

Header Builder را باز کنید

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

4

Publish را بزنید و تست کنید

فقط دیدن تغییر در پنل کافی نیست؛ صفحه عمومی و موبایل را در حالت ناشناس بررسی کنید.

اگر Customizer باز می‌شود اما گزینه Header ندارد

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

روش دوم

ویرایش هدر در WordPress Site Editor

قالب‌های Block به‌جای Customizer از ویرایشگر سایت استفاده می‌کنند. مسیر معمول نمایش ← ویرایشگر است. از بخش Design می‌توانید وارد Patterns یا Template Parts شوید و Header را باز کنید.

  • Navigation Block: منوی اصلی، لینک‌ها و رفتار منوی موبایل را کنترل می‌کند.
  • Site Logo Block: تصویر لوگوی سایت و لینک آن را مدیریت می‌کند.
  • Group و Row: چیدمان، فاصله، عرض و رنگ پس‌زمینه هدر را می‌سازند.
  • Buttons Block: برای دکمه تماس، خرید یا درخواست مشاوره استفاده می‌شود.
Template Part سراسری است

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

ذخیره چند تغییر هم‌زمان

Site Editor هنگام ذخیره، فهرستی از بخش‌های تغییرکرده نشان می‌دهد. بررسی کنید فقط Header یا Navigation موردنظر انتخاب شده باشد و ناخواسته Style سراسری یا Template دیگری را ذخیره نکنید.

روش سوم

ویرایش هدر با Elementor Theme Builder

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

  1. 01
    Template فعال را پیدا کنید

    ممکن است چند Header وجود داشته باشد. Templateای را باز کنید که Published است و شرط نمایش آن با صفحه شما تطابق دارد.

  2. 02
    لوگو و منو را از Widget درست ویرایش کنید

    Site Logo یا Image برای لوگو و Nav Menu برای منوی اصلی استفاده می‌شود. منبع منو را در تنظیمات Widget کنترل کنید.

  3. 03
    Responsive Mode را بررسی کنید

    عرض ستون‌ها، نمایش یا مخفی بودن اجزا و منوی همبرگری را در Desktop، Tablet و Mobile جداگانه ببینید.

  4. 04
    Display Conditions را ذخیره کنید

    اگر شرط روی Entire Site نیست، مشخص کنید هدر باید در کدام صفحات نمایش داده شود و با Header دیگری تداخل نداشته باشد.

روشنشانه اصلیمحل هدرریسک رایج
Customizerنمایش ← سفارشی‌سازیتنظیمات قالب یا Header Builderویرایش بخش اشتباه قالب
Site Editorنمایش ← ویرایشگرTemplate Part یا Patternتغییر Style یا Template سراسری
ElementorTheme Builder / TemplatesHeader Templateشرط نمایش اشتباه یا چند Header هم‌زمان
اجزای اصلی

تغییر لوگو، منو و دکمه تماس

تغییر لوگو بدون افت کیفیت

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

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

تغییر منوی اصلی

در قالب‌های کلاسیک معمولاً از نمایش ← فهرست‌ها یا بخش Navigation در Customizer استفاده می‌شود. در Site Editor، Navigation Block منبع لینک‌هاست. در Elementor، Widget منو به یکی از منوهای ثبت‌شده وردپرس متصل می‌شود.

اول منو را بسازید، بعد Widget را متصل کنید

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

دکمه تماس و CTA

دکمه هدر باید یک اقدام اصلی و واضح داشته باشد. برای تماس تلفنی از لینک tel:، برای ایمیل از mailto: و برای فرم از URL همان صفحه استفاده کنید. چند CTA هم‌وزن در هدر باعث سردرگمی می‌شود.

نمونه لینک تماس
<a href="tel:+982100000000">تماس با ما</a>
رفتار پیشرفته

هدر موبایل و Sticky Header

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

هدر موبایل مناسب

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

نشانه‌های مشکل

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

فعال کردن هدر چسبان

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

  • هدر Sticky نباید بیش از حد از ارتفاع موبایل را اشغال کند.
  • زیرمنو و Mega Menu باید بالاتر از محتوای صفحه باز شوند.
  • نوار مدیریت وردپرس برای کاربر واردشده نباید روی هدر بیفتد.
  • تغییر رنگ پس‌زمینه هنگام Sticky باید لوگو و متن را خوانا نگه دارد.
عیب‌یابی

خطاهای متداول و مشکلات Cache

تغییر ذخیره شده اما دیده نمی‌شود

صفحه را در پنجره ناشناس باز کنید، کش مرورگر و افزونه کش را پاک کنید و در صورت وجود CDN، Purge Cache انجام دهید.

هدر فقط در یک صفحه تغییر کرده

Display Conditions، Template صفحه و Headerهای اختصاصی را بررسی کنید. ممکن است صفحه فرود هدر جدا داشته باشد.

دو هدر روی هم دیده می‌شود

هدر قالب و Header Template المنتور هم‌زمان فعال‌اند. یکی را از تنظیمات صفحه یا قالب غیرفعال کنید.

منوی موبایل باز نمی‌شود

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

لوگو در Sticky ناپدید می‌شود

رنگ لوگو با پس‌زمینه یکی است یا قالب نسخه جداگانه‌ای برای حالت Sticky دارد. تنظیم لوگوی Sticky را پیدا کنید.

بعد از آپدیت طراحی به‌هم ریخته

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

ترتیب پیشنهادی پاک کردن کش

  1. 1
    مرورگر یا پنجره ناشناس

    ابتدا مطمئن شوید مشکل فقط در مرورگر شما نیست.

  2. 2
    افزونه کش وردپرس

    کش صفحه، CSS و JavaScript را پاک کنید.

  3. 3
    کش سرور یا هاست

    در صورت وجود Object Cache یا Page Cache سمت سرور آن را بازسازی کنید.

  4. 4
    CDN

    فقط بعد از اطمینان از ذخیره نسخه درست، کش CDN را Purge کنید.

کش را قبل از ذخیره نسخه درست پاک نکنید

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

کنترل نهایی

چک‌لیست امن قبل و بعد از تغییر هدر

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

تغییر ظاهری ساده است؛ تشخیص معماری اشتباه می‌تواند کل سایت را تحت تأثیر قرار دهد.

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

FAQ

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

چرا گزینه ویرایش هدر در المنتور دیده نمی‌شود؟

Elementor معمولی فقط محتوای همان صفحه را ویرایش می‌کند. هدر معمولاً با Theme Builder، قالب سایت یا افزونه‌ای جدا ساخته شده است و ممکن است به نسخه Pro یا ابزار سازنده قالب نیاز داشته باشد.

چرا لوگوی جدید بعد از ذخیره نمایش داده نمی‌شود؟

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

آیا می‌توان برای موبایل هدر جدا ساخت؟

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

چطور هدر را چسبان یا Sticky کنیم؟

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

آیا تغییر هدر ممکن است سایت را خراب کند؟

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

چرا هدر فقط در بعضی صفحات تغییر کرده است؟

احتمالاً چند هدر با شرط نمایش متفاوت دارید؛ مثلاً هدر صفحه اصلی، فروشگاه، نوشته‌ها یا موبایل جداست. Display Conditions و Templateهای فعال را بررسی کنید.