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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. سر به ظاهر → ویرایشگر از داشبورد وردپرس شما.
2. کلیک کنید بر روی (+علامت ) را در نوار منوی بالا جستجو کنید جهت یابی مسدود کردن. بخش ناوبری را در هر نقطه از رابط ویرایشگر بکشید و رها کنید.

3. در تنظیمات نوار کناری، یک آیتم منوی موجود را به سطح پایین تر بکشید و آن را به منوی کودک تبدیل کنید.

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

5. کلیک روی (+) را علامت بزنید و یک بلوک متفاوت را برای ایجاد یک منوی فرعی برای نوع محتوای دیگر انتخاب کنید. آن را بکشید و زیر آیتم منوی والد مورد نظر خود رها کنید.

6. کلیک روی آیتم های منوی فردی برای پیکربندی تنظیمات پیوند، مانند برچسب، URL و توضیحات.

7. برای ایجاد یک زیر منوی جدید تحت همان آیتم منوی والد، (+) در زیر آیتم منوی فرزند موجود.

8. نتیجه نهایی به صورت زیر خواهد بود:

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

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

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

1. افزونه منوی کشویی افزونه را نصب و فعال کنید.

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

3. این افزونه به طور پیش فرض سبک تم شما را به ارث می برد. باز کن تم های منو اگر می‌خواهید سبک، انیمیشن و اندازه منو را تغییر دهید، آن را انتخاب کنید. مطمئن شوید که موضوع را برای ویرایش انتخاب کنید گزینه به منوی اصلی شما اشاره می کند.

4. هدایت به ظاهر → منوها و با فعال بودن قابلیت Max Mega Menu، موارد را به منوی پیش فرض یا اصلی اضافه کنید. کلیک ذخیره منو پس از اتمام کار

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نتیجه

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

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

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

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

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