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

طراحی منو در وردپرس

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

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

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

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

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

ساخت منوی زیبا در وردپرس چرا انقدر حیاتیه؟

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

یه نقل قول از جان دون هست که میگه: هیچ سایتی جزیره نیست.

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

به طور کلی در سایت و بطور خاص در منوها ما دو تا مخاطب رو باید به یک اندازه مهم قرار بدیم: انسان و ربات.

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

ساخت منو در المنتور

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

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

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

برا همینه که سهولت در پیمایش یکی از بهبود دهندگان تجربه کاربریه که در نهایت به بهبود سئوی سایت شما، رتبه سایت و شاید هم جوایز  Rich Snippet منتهی میشه.

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

5 استایل اصلی منوی پیمایش یا ناو منو در المنتور Navigation menu

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

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

1. منوی سایت کلاسیک

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

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

هیچ چیز پیچیده ای درباره چیدمان منوی ناوبری کلاسیک  وجود نداره.

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

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

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

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

مگا منو در وردپرس

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

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

ساخت منوی ریسپانسیو در وردپرس

2.سبک همبرگر یا آیکن منوی پیمایش

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

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

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

منوی همبرگری سایت

بعضی از طراحان سایت سعی میکنن آیکن همبرگری رو دستکاری کنن استایل دهی کنن و رنگ بدن. اینکار تا جایی قابل قبوله که کاربر متوجهبشه این آیکن منو هست. یادتون باشه بیشتر کاربران سایت شما مثل شما نیستن و ممکنه اطلاعات زیادی از آیکن های سایتها نداشته باشن.

3. منوی چسبنده سایتها یا Sticky menu

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

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

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

البته در مواردی هم نیاز داریم توجه کاربر رو به سمت منو جلب کنیم. 

4. منوی پاپ آپ در وبسایت وردپرسی

اگه فقط یه سبک وجود داشته باشه که اهمیت بیشتری به بقیه قسمتهای پیج به‌غیر از منو بده سبک پنجره پاپ آپ منوی پیمایش سایتهاست.

منوی پاپ آپ

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

در همه این سبکهای منو که تا اینجا گفتیم هم میتونم منو رو افقی تنظیم کنیم و هم عمودی اما در بین کارشناسان UX در استفاده از منوی عمودی بحثی هست که برخی معتقدند برای تجربه کاربری در حالت موبایلی استفاده از منوی عمودی جالب نیست.

5. منوی پیمایش دو لایه

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

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

برای اینکار اول باید از داشبورد وردپرس قسمت نمایش——> فهرست دو تا فهرست درست کنیم بعد یه هدر دو ردیفه در المنتور ایجاد کنیم و در هر ردیف یه ویجت ناو منو بذاریم و هر فهرست رو به یه ویجت اختصاص بدیم. ساخت هدر سایت در المنتور رو ببینین.

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

منوی دو لایه در المنتور

باید ها و نباید ها موقع طراحی منوی سایت در المنتور

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

آینده منوی پیمایش سایتها متعلق به المنتوریهاست

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

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

و یه قانون غیرقابل انکار درباره همه این منو ها بهتون بگم:

منوی سایتتون رو نگهش دارین

مثل همیشه عاشق شنیدن نظراتتون هستم.

راحیل دست پیمان

راحیل دست پیمان

پر امید و پر انگیزه ادامه بده. موفق میشی. من بهت قول میدم!

برا دوستاتون بفرستین:

آخرین مطالبمون:

یه پیام برام بفرست

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *