نحوه ایجاد یک منوی کشویی وردپرس و بهبود ناوبری سایت

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

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

روش ایجاد منوی کشویی وردپرس به صورت دستی

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

به خاطر داشته باشید که برخی از تم ها از منوهای کشویی پشتیبانی نمی کنند. مستندات موضوع خود را بررسی کنید تا مطمئن شوید کاری که می خواهید انجام دهید امکان پذیر است.

برای ایجاد یک منوی کشویی سفارشی در وردپرس مراحل زیر را دنبال کنید:

1. آیتم های منو را ایجاد کنید

ابتدا باید منوی استاندارد را ایجاد کنیم. هدایت به ظاهر منوها از داشبورد وردپرس شما. در داخل ویرایش منوها برگه را خواهید دید ساختار منو بخشی که در آن می توانید یک منوی جدید ایجاد کنید.

به خاطر داشته باشید که ظاهر این بخش بستگی دارد روی قالب وردپرس فعال شما

بخش منوهای موضوع فعالبخش منوهای موضوع فعال

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

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

تب Edit Menus که قسمت Add Menu Items را برجسته می کندتب Edit Menus که قسمت Add Menu Items را برجسته می کند

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

بخش Menu Structure، تمام آیتم های منو که اضافه شده اند را نمایش می دهدبخش Menu Structure، تمام آیتم های منو که اضافه شده اند را نمایش می دهد

2. منو را سبک کنید

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

بخش Show Advanced Menu Properties، با برجسته کردن چک باکس CSS Classesبخش Show Advanced Menu Properties، با برجسته کردن چک باکس CSS Classes

اگر یک آیتم منو را باز کنید، یک جعبه متن جدید با برچسب مشاهده خواهید کرد کلاس های CSS. اینجا جایی است که کلاس های CSS وردپرس را برای سفارشی کردن سبک منوی کشویی اضافه می کنید.

کلاس های CSS در بخش This is a Parent Pageکلاس های CSS در بخش This is a Parent Page

3. منو را منتشر کنید

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

بخش تنظیمات منوبخش تنظیمات منو

در این مثال، منو را در بالا قرار می دهیم.

نمونه ای از منوی کشویی اضافه شده به بالای a pageنمونه ای از منوی کشویی اضافه شده به بالای a page

کلیک کنید بر روی ذخیره منو برای ذخیره تغییرات و انتشار منوی کشویی در گوشه پایین سمت راست دکمه را فشار دهید.

دکمه Save Menu در تب Edit Menusدکمه Save Menu در تب Edit Menus

روش اضافه کردن منوی کشویی وردپرس با ویرایشگر سایت

وردپرس 6.2 قابلیت کشیدن و رها کردن را به آن اضافه کرد جهت یابی مسدود کردن، سازماندهی آیتم های منو و ایجاد زیر منوها را آسان تر می کند. می توانید از این بلوک برای ایجاد یک منوی کشویی در ویرایشگر سایت استفاده کنید. در اینجا روش انجام آن آمده است:

  1. سر به ظاهر ویرایشگر از داشبورد وردپرس شما.
  2. کلیک کنید بر روی (+علامت ) را در نوار منوی بالا جستجو کنید جهت یابی مسدود کردن. بخش ناوبری را در هر نقطه از رابط ویرایشگر بکشید و رها کنید.
بلوک ناوبری در ویرایشگر سایت وردپرسبلوک ناوبری در ویرایشگر سایت وردپرس
  1. در تنظیمات نوار کناری، یک آیتم منوی موجود را به سطح پایین تر بکشید و آن را به منوی کودک تبدیل کنید.
تنظیمات بلوک ناوبری با منوهای خدمات و تماس که در ویرایشگر سایت برجسته شده اندتنظیمات بلوک ناوبری با منوهای خدمات و تماس که در ویرایشگر سایت برجسته شده اند
  1. برای ایجاد یک منوی کشویی با یک پیوند سفارشی، را انتخاب کنید گزینه ها پیوند منوی فرعی را اضافه کنید در کنار آیتم منوی والد مورد نظر.
دکمه پیوند زیر منوی افزودن در تنظیمات بلوک ناوبری در ویرایشگر سایتدکمه پیوند زیر منوی افزودن در تنظیمات بلوک ناوبری در ویرایشگر سایت
  1. کلیک روی (+) را علامت بزنید و یک بلوک متفاوت را برای ایجاد یک منوی فرعی برای نوع محتوای دیگر انتخاب کنید. آن را بکشید و زیر آیتم منوی والد مورد نظر خود رها کنید.
پاپ آپی که انواع محتوای مختلف را برای یک زیر منوی جدید در ویرایشگر سایت نشان می دهدپاپ آپی که انواع محتوای مختلف را برای یک زیر منوی جدید در ویرایشگر سایت نشان می دهد
  1. کلیک روی آیتم های منوی فردی برای پیکربندی تنظیمات پیوند، مانند برچسب، URL و توضیحات.
تنظیمات پیوند آیتم منوی نمونه کارها در ویرایشگر سایتتنظیمات پیوند آیتم منوی نمونه کارها در ویرایشگر سایت
  1. برای ایجاد یک زیر منوی جدید تحت همان آیتم منوی والد، (+) در زیر آیتم منوی فرزند موجود.
نماد (+) در زیر آیتم منوی فرزند موجود در ویرایشگر سایتنماد (+) در زیر آیتم منوی فرزند موجود در ویرایشگر سایت
  1. نتیجه نهایی به صورت زیر خواهد بود:
پیشنهاد می‌کنیم بخوانید:  تابع get_posts وردپرس چیست و چگونه از آن برای ساخت لیست پست های PHP استفاده کنیم
نمای نهایی یک منوی کشویی که با استفاده از ویرایشگر سایت وردپرس و بلوک ناوبری ساخته شده استنمای نهایی یک منوی کشویی که با استفاده از ویرایشگر سایت وردپرس و بلوک ناوبری ساخته شده است
روش ایجاد یک منوی کشویی وردپرس و بهبود ناوبری سایت 54

روش اضافه کردن منوی کشویی در وردپرس با استفاده از یک افزونه

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

ما به شما نشان می دهیم که چگونه با استفاده از یک منوی کشویی ایجاد کنید مگا منوی Max:

  1. افزونه منوی کشویی افزونه را نصب و فعال کنید.
ورودی افزونه Max Mega Menu در فهرست افزونه های وردپرسورودی افزونه Max Mega Menu در فهرست افزونه های وردپرس
  1. هدایت به مگا منو از داشبورد وردپرس شما. در مکان های منو بخش، کلیک کنید روی منوی اصلی خود را علامت بزنید و کادر را علامت بزنید تا عملکرد کشویی فعال شود. در همان بخش، رویدادی را انتخاب کنید که منوی فرعی و انیمیشن منوی کشویی را فعال می‌کند. روی دسکتاپ و موبایل و انتخاب کنید ذخیره تغییرات.
تب Menu Locations افزونه Mega Menuتب Menu Locations افزونه Mega Menu
  1. این افزونه به طور پیش فرض سبک تم شما را به ارث می برد. باز کن تم های منو اگر می‌خواهید سبک، انیمیشن و اندازه منو را تغییر دهید، آن را انتخاب کنید. مطمئن شوید که موضوع را برای ویرایش انتخاب کنید گزینه به منوی اصلی شما اشاره می کند.
گزینه Select theme to edit در تب Menu Themesگزینه Select theme to edit در تب Menu Themes
  1. هدایت به ظاهر منوها و با فعال بودن قابلیت Max Mega Menu، موارد را به منوی پیش فرض یا اصلی اضافه کنید. کلیک ذخیره منو پس از اتمام کار
تنظیمات Max Mega Menu در داخل منوهای وردپرس pageتنظیمات Max Mega Menu در داخل منوهای وردپرس page

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

منوهای ناوبری شما برخی از اولین عناصر وب سایتی هستند که بازدیدکنندگان شما خواهند دید. علاوه بر تأثیرگذاری بر کل سیستم ناوبری سایت، منوهای وردپرس همچنین می توانند تجربه کاربر را ایجاد یا خراب کنند. شما یک نوار منو می خواهید که به بازدیدکنندگان کمک کند اطلاعات مورد نیاز خود را به سرعت پیدا کنند.

بنابراین، مهم است که منوی اصلی شما برای استفاده آسان و از نظر بصری جذاب باشد. نکات زیر را بررسی کنید روی بهینه سازی استفاده از منوهای کشویی برای تجربه کاربری بهتر.

از ویژوال استفاده کنید

یکی از بهترین راه‌ها برای تعاملی‌تر کردن منوهای کشویی اضافه کردن آیکون‌های تصویر به آیتم‌های آن‌ها با استفاده از یک افزونه است.

این تصویر منو به عنوان مثال، افزونه مجموعه عظیمی از نمادهای FontAwesome و DashIcons را برای انتخاب فراهم می کند. می‌توانید عناصر مورد نظر را در موقعیت‌های مختلف به منوی کشویی اضافه کنید یا آن‌ها را به‌عنوان انیمیشن‌های فعال شده اضافه کنید روی شناور موس

بنر افزونه Menu Imageبنر افزونه Menu Image

از شلوغی بیش از حد فضا با نمادهای غیر ضروری خودداری کنید زیرا این امر می تواند به خوانایی منو آسیب برساند و توجه کاربران را از کاوش در سایت وردپرس شما منحرف کند.

پیشنهاد می‌کنیم بخوانید:  15 وب سایت مجنتو برای الهام بخشیدن به وب سایت تجارت الکترونیک خود

CSS سفارشی اضافه کنید

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

رفتن به ظاهر شخصی سازی از داشبورد وردپرس خود استفاده کنید و از آن استفاده کنید CSS اضافی قابلیت اضافه کردن کد خود را ما در این مثال رنگ فونت منوی بالا را به آبی تغییر دادیم.

ویژگی اضافی CSS on سفارشی ساز وردپرسویژگی اضافی CSS on سفارشی ساز وردپرس

از ابزار inspect element در مرورگر خود برای پیدا کردن CSS تم خود استفاده کنید #شناسه انتخابگر – برای انتخاب یک عنصر خاص برای سفارشی سازی به آن نیاز دارید.

انتخابگر شناسه تم از طریق ابزار بازرسی Google نمایش داده می شودانتخابگر شناسه تم از طریق ابزار بازرسی Google نمایش داده می شود

کدی که برای تغییر رنگ فونت استفاده کردیم در اینجا آمده است:

#top-menu li.menu-item a {
color:#0051D7;
}

CSS و آموزش های طراحی وب زیادی برای یادگیری آنلاین وجود دارد. به راحتی می توانید سبک های مختلف CSS را آزمایش کنید یا از کدهای از پیش ساخته شده برای ساده سازی طراحی استفاده کنید process.

منوهای کشویی چند سطحی را فعال کنید

قرار دادن یک مورد فرزند در زیر یک مورد والد یا سطح بالا page به طور خودکار یک رابطه فرزند و والدین ایجاد می کند و عملکرد کشویی چند سطحی را فعال می کند.

یک آیتم منوی والد می تواند چندین مورد فرعی داشته باشد. با این حال، توصیه می کنیم بیش از هفت مورد فرعی در هر آیتم اصلی نداشته باشید تا به ناوبری سایت وردپرس شما آسیب نرساند.

نمونه ای از رابطه آیتم های منوی فرزند و والدین on وردپرسنمونه ای از رابطه آیتم های منوی فرزند و والدین on وردپرس

یک مگا منوی کشویی ایجاد کنید

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

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

نمونه ای از یک مگا منو که با استفاده از افزونه Max Mega Menu ساخته شده استنمونه ای از یک مگا منو که با استفاده از افزونه Max Mega Menu ساخته شده است

افزونه های وردپرس زیادی وجود دارد که به شما در ایجاد یک مگا منوی سفارشی کمک می کند. نمونه طراحی مگا منو را در بالا با استفاده از افزونه Max Mega Menu طراحی کردیم. دیگر پلاگین های قابل توجه مگا منو عبارتند از WP Mega Menu و مگا منوی قهرمان.

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

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

دکمه Manage with Live Preview در داخل منوها pageدکمه Manage with Live Preview در داخل منوها page

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

ظاهر سفارشی ساز وردپرس از طریق حالت پیش نمایش زندهظاهر سفارشی ساز وردپرس از طریق حالت پیش نمایش زنده

نتیجه

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

در این مقاله مراحل ایجاد منوی کشویی در وردپرس به صورت دستی و با استفاده از یک افزونه توضیح داده شده است. ما همچنین نکاتی را برای بهینه سازی منوهای کشویی ارائه کردیم.

امیدواریم این مقاله به تمام سوالات شما در مورد این نوع منوی وردپرس پاسخ داده باشد. موفق باشید!

سوالات متداول منوی کشویی وردپرس

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

چگونه ترتیب آیتم ها را در منوی کشویی در وردپرس تغییر دهیم؟

برای تغییر ترتیب آیتم ها در منوی کشویی وردپرس، به ظاهر → منوها. سپس منو را انتخاب کنید، آیتم مورد نظر را در موقعیت جدید بکشید و رها کنید، با کشیدن آیتم ها به سمت راست منوهای فرعی ایجاد کنید و تغییرات خود را ذخیره کنید.

چگونه می توانم منوی کشویی خود را قابل مشاهده کنم روی همه صفحات در وردپرس؟

رفتن به ظاهر → منوها تا منوی کشویی وردپرس قابل مشاهده باشد روی تمام صفحات را انتخاب کنید و منوی مورد نظر برای ویرایش را انتخاب کنید. کلیک روی را مدیریت مکان ها برگه، مکان منوی کشویی خود را انتخاب کنید، سپس کلیک کنید ذخیره تغییرات. اکنون منوی کشویی ظاهر می شود روی تمام صفحات.