آموزش ساخت منو در وردپرس برای مبتدیان

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

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

در وردپرس، منو (Menu) یک گروه قابل نام‌گذاری از لینک‌هاست که شما آن را می‌سازید و بعد به یک «موقعیت» (Location) در قالب وصل می‌کنید. این تفکیک کلید ماجراست: منو یک موجودیت مستقل در دیتابیس است و قالب فقط تصمیم می‌گیرد آن را کجا نمایش دهد. برای همین است که می‌توانید منوی یکسان را در چند قالب مختلف استفاده کنید. اگر با مفهوم قالب و لایه‌بندی آن آشنا نیستید، پیش از ادامه، مقالهٔ قالب وردپرس چیست و چگونه قالب مناسب انتخاب کنیم را بخوانید؛ منو در واقع آخرین لایه از همان ساختار است.

انواع منو در وردپرس را می‌توان به شکل زیر دسته‌بندی کرد:

• منوی اصلی (Primary): معمولاً در سربرگ سایت؛ همان نوار افقی که کاربر اول از همه می‌بیند.
• منوی فوتر: لینک‌های کمکی مثل قوانین، تماس و شبکه‌های اجتماعی.
• منوهای فرعی: مثل منوی سیدبار یا منوی صفحات فرود که قالب فعال به آن‌ها اجازهٔ نمایش می‌دهد.
• منوی اجتماعی: در قالب‌های جدید، بعضی از موقعیت‌ها مخصوص آیکون‌های شبکه‌های اجتماعی هستند.

نکتهٔ مهمی که در تجربهٔ کارم زیاد دیده‌ام: هر قالب، مجموعه‌ای از موقعیت‌های منو را تعریف می‌کند. تعداد این موقعیت‌ها می‌تواند از یک عدد در قالب‌های مینیمال تا بیش از ده موقعیت در قالب‌های فروشگاهی متغیر باشد. این را از همان اول بدانید تا وقتی دیدید گزینهٔ «Primary Menu» در پیشخوان شما وجود ندارد، تعجب نکنید — یعنی قالب فعلی آن موقعیت را تعریف نکرده است.

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

پیش‌نیازهای ساخت منو

پیش از ساختن منو، سه چیز باید آماده باشد. اول، برگه‌های اصلی سایت: اگر هنوز صفحات «درباره ما»، «تماس با ما» و «خدمات» را نساخته‌اید، اول آن‌ها را بسازید؛ چرا که منو در نهایت به همین برگه‌ها اشاره می‌کند. مراحل ساختشان در چگونه برگه در وردپرس بسازیم؟ راهنمای ساده آمده است. دوم، قالب فعال: اگر قالب نصب و فعال نیست، ممکن است حتی گزینهٔ منو هم در پیشخوان درست کار نکند؛ مسیر نصب قالب در چگونه قالب وردپرس را نصب و فعال کنیم؟ توضیح داده شده. سوم، آشنایی با پیشخوان: منو از مسیر «نمایش ← فهرست‌ها» یا «Appearance ← Menus» مدیریت می‌شود؛ اگر با پیشخوان وردپرس آشنایی کافی ندارید، مقالهٔ آشنایی با پیشخوان وردپرس برای مبتدیان نقطهٔ شروع خوبی است.

ساخت اولین منو گام‌به‌گام

1. وارد پیشخوان وردپرس شوید و از منوی کناری روی «نمایش» و بعد «فهرست‌ها» کلیک کنید.
2. در بالای صفحه، یک نام برای منو انتخاب کنید؛ مثلاً «منوی اصلی». نام فقط برای شما و تیم‌تان است و در سایت دیده نمی‌شود.
3. روی «ساخت منو» بزنید. حالا منو ساخته شده ولی هنوز خالی است.
4. در ستون سمت چپ، بخش‌های «برگه‌ها»، «نوشته‌ها»، «دسته‌بندی‌ها»، «برچسب‌ها»، «پیوندهای سفارشی» و «دسته‌بندی محصولات» (اگر ووکامرس نصب است) را می‌بینید. تیک هر موردی که می‌خواهید را بزنید و روی «افزودن به منو» کلیک کنید.
5. ترتیب آیتم‌ها را با درگ‌اند‌دراپ (Drag and Drop — کشیدن و رها کردن) در بخش سمت راست تنظیم کنید.
6. پایین صفحه، بخش «تنظیمات منو» را باز کنید و «موقعیت نمایش» را مشخص کنید. اگر این بخش را نادیده بگیرید، منو ساخته می‌شود ولی هیچ‌جا نمایش داده نمی‌شود — رایج‌ترین اشتباه مبتدی‌ها.
7. روی «ذخیره فهرست» کلیک کنید.

// ترتیب استاندارد آیتم‌های یک منوی اصلی:
// صفحه اصلی → درباره ما → خدمات → وبلاگ → تماس با ما

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

انواع آیتم‌ها که می‌توانید به منو اضافه کنید

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

• برگه‌ها (Pages): پایهٔ اصلی منو؛ معمولاً ۵ تا ۷ آیتم اول از همین جنس‌اند.
• نوشته‌ها (Posts): برای مقاله‌های مهمی که می‌خواهید مستقیم در منو باشند.
• دسته‌بندی‌ها (Categories): نمایش گروهی از نوشته‌ها زیر یک نام واحد.
• پیوندهای سفارشی (Custom Links): هر URL دلخواه؛ مثلاً یک صفحهٔ فرود بیرونی یا آدرس کانال تلگرام.
• دستهٔ محصول (ووکامرس): اگر فروشگاه دارید، گروه‌بندی محصولات در منو معمولاً از همین بخش ساخته می‌شود.

یک نکتهٔ عملی که در پروژه‌های شرکتی زیاد استفاده می‌کنم: «پیوندهای سفارشی» را برای ساخت آیتم‌های لنگر (Anchor) به کار ببرید؛ مثلاً یک آیتم «تماس سریع» که مستقیم به بخش فرم در صفحهٔ اصلی می‌رود و کاربر را از پیمودن صفحات اضافه نجات می‌دهد.

زیرمنو و منوهای چندسطحی

برای ساخت زیرمنو، کافی است در پنل منو، آیتم فرزند را کمی به سمت راست (یا در RTL به سمت راست نسبت به والد) بکشید و رها کنید. آن آیتم حالا یک سطح پایین‌تر می‌نشیند و در سایت به‌شکل یک منوی کشویی (Dropdown) نمایش داده می‌شود. وردپرس به‌طور پیش‌فرض تا چند سطح تودرتو را پشتیبانی می‌کند ولی تجربهٔ کاربری می‌گوید بیش از دو سطح را نگذارید — چرا که در موبایل، منوی سطح سوم عملاً غیرقابل‌استفاده می‌شود.

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

خدمات (سطح ۱)
├── طراحی سایت (سطح ۲)
├── سئو (سطح ۲)
└── پشتیبانی فنی (سطح ۲)
وبلاگ (سطح ۱)
تماس (سطح ۱)

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

اختصاص منو به موقعیت‌های قالب

همان‌طور که اشاره کردم، منو تا زمانی که به یک موقعیت (Location) متصل نشود، دیده نمی‌شود. هر قالب، فهرست موقعیت‌های خود را در یک فایل مشخص تعریف می‌کند و وردپرس آن‌ها را در پنل منو نشان می‌دهد. نکتهٔ ظریفی که در پروژه‌های واقعی زیاد به کارم آمده: اگر از قالب فرزند (Child Theme) استفاده می‌کنید، موقعیت‌های منو در فایل توابع فرزند هم قابل تعریف هستند و می‌توانید موقعیت‌های جدیدی که والد ندارد بسازید. مفهوم چایلد تم و نقش آن در سفارشی‌سازی، در قالب وردپرس چایلد چیست و چه زمانی به آن نیاز داریم توضیح داده شده است.

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

منو در موبایل: چرا به‌هم می‌ریزد؟

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

• الگوی درست اول — همبرگری استاندارد: همهٔ آیتم‌های منو در یک دکمهٔ منو جمع می‌شوند و با لمس، پنل کناری باز می‌شود.
• الگوی درست دوم — منوی چسبیده به پایین (Bottom Navigation): برای اپلیکیشن‌گونه‌ها و سایت‌های خدماتی که کاربر بیشتر با یک آیتم کار می‌کند.
• الگوی درست سوم — منوی اولویت‌دار: فقط سه آیتم اصلی در نوار بالا و بقیه در منوی کشویی.
• الگوی غلط: اسلایدر افقی؛ چرا که کاربر نمی‌فهمد آیتم‌های دیگر هم وجود دارد و روی نوار لمس نمی‌کند.

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

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

جدول تصمیم: کدام نوع منو برای چه سایتی؟

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

در قالب‌های بلوکی (Block Themes) که از وردپرس مدرن با ویرایشگر سایت پشتیبانی می‌کنند، مفهوم منو کمی تغییر کرده و به‌شکل «بلوک ناوبری» در ویرایشگر سایت قابل مدیریت است. ولی در پشت صحنه، همان ساختار موقعیت‌ها و آیتم‌ها برقرار است. برای توسعه‌دهنده‌ها، سه فیلتر کلیدی وجود دارد که در پروژه‌های حرفه‌ای زیاد استفاده می‌کنم:

// حذف کلاس‌های پیش‌فرض از آیتم‌های منو
add_filter( 'nav_menu_css_class', 'my_clean_menu_classes', 10, 3 );

// افزودن ویژگی به لینک‌های منو (مثلاً برای ردگیری)
add_filter( 'nav_menu_link_attributes', 'my_menu_link_attributes', 10, 4 );

// جایگزینی کل خروجی منو
add_filter( 'wp_nav_menu', 'my_custom_menu_output', 10, 2 );

برای درک دقیق‌تر اینکه این فیلترها در چه مرحله‌ای از اجرای وردپرس فعال می‌شوند، مراجعه به هوک‌های وردپرس چیستند و چگونه کار می‌کنند و نحوه استفاده از add_filter در وردپرس ضروری است. اگر روی پروژه‌ای هستید که تیم بزرگی آن را نگهداری می‌کند، توصیه می‌کنم فیلترهای منو را داخل یک افزونهٔ کوچک اختصاصی قرار دهید نه در فایل functions.php قالب — این‌طور روزی که قالب عوض شود، رفتار منو هم دست‌نخورده می‌ماند. یک پروندهٔ واقعی که یادم هست: در سایتی که سه سال پیش راه‌اندازی کرده بودیم، تیم بازاریابی یک آیتم منو با پارامتر کمپین اضافه کرد و ماه بعد، به‌دلیل تغییر قالب، آن آیتم کدِ ردگیری‌اش را از دست داد و آمار کمپین یک ماه ناقص ماند. درسش این بود که منو، اگر قرار است «کارکرد بازاریابی» داشته باشد، باید در لایه‌ای پایدارتر از قالب زندگی کند — یعنی افزونه، نه پوسته.

اشتباهات رایج مبتدی‌ها

• ساختن منو بدون ذخیره در موقعیت: منو ساخته می‌شود ولی چون به موقعیت وصل نشده، نمایش داده نمی‌شود و کاربر فکر می‌کند قالب خراب است.
• قرار دادن بیش از ده آیتم در منوی اصلی: در موبایل به‌هم می‌ریزد، در دسکتاپ هم برای کاربر خسته‌کننده است.
• استفاده از «صفحه اصلی» به‌عنوان آیتم اول به‌جای لوگو: اکثر کاربران انتظار دارند با کلیک روی لوگو به خانه برگردند؛ یک آیتم «صفحه اصلی» در منو، فضای گران‌بهایی را هدر می‌دهد.
• پیوندهای سفارشی با آدرس اشتباه: مثل آدرس با http به‌جای https که باعث هشدار مرورگر می‌شود. یک بار چک‌کردن همهٔ لینک‌های منو، ده ثانیه وقت می‌برد و از فاجعهٔ سئویی جلوگیری می‌کند.
• بی‌توجهی به کنتراست رنگ آیتم‌ها: متن خاکستری روی پس‌زمینهٔ طوسی، منوی شما را برای کاربران کم‌بینا عملاً ناپدید می‌کند. حداقل کنتراست ۴٫۵:۱ را از همان روز اول رعایت کنید.

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