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

سایت منو موبایل در المنتور همیشه برای دارندگان سایت‌های المنتوری چالش بوده است یا به‌درستی نمایش داده نمی‌شود یا مشکلات فنی دارد یا محدودیت‌های زیاد دارد و یا سئو شده و بهینه نیست. امروز می‌خواهم به شما آموزش ساخت منو موبایل در المنتور را طوری یاد بدهم که برای همیشه با موارد گفته شده و چالش‌های آن خداحافظی کنید.

ساخت منو موبایل در المنتور به روش حرفه‌ای

این منو شامل ۳ بخش می‌شود که همه قسمت‌های آن در اختیار شما قرار می‌گیرد:

• دیزاین در المنتور
• کد Css
• کد jQuery

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

برای شروع کار نیاز است که حتماً از المنتور پرو استفاده کنید اگر به المنتور پرو دسترسی ندارید می‌توانید افزونه المنتور پرو را از آدرسی کانال استاد سئو که در انتهای مقاله است دانلود کنید.

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

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

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

در صفحه باز شده درصورتی‌که پاپ‌آپی نمایش داده شد و منو های پیش‌فرض را به شما نشان داد آن را با دکمه ضربدر گوشه صفحه ببندید تا محیط ویرایش المنتور برای شما نمایش داده شود.

شاید برای شما مفید باشد: آموزش ساخت منو در المنتور

ما به ۲ کانتینر کلی که در دل خود موارد دیگری دارند نیاز داریم یک کانتینر برای منو معمولی و دیگری برای منو موبایل. پس طبق تصویر زیر از ویجت‌های موجود ۲ کانتینر به صفحه اضافه می‌کنیم:

به کانتینر اول خود ۲ ویجت باید اضافه کنیم یکی ویجت آیکن و دیگری وردپرس منو (wordpress menu) که منو ما را نمایش دهد این همان منو است که در قسمت پنل وردپرس بخش فهرست‌ها ایجاد کرده‌اید. آیکن برای آن است که شکل منو همبرگری را داشته باشیم و با کلیک روی آن در حالت موبایل منو باز شود. طب تصویر زیر شما باید این ۲ ویجت را قرار دهید.

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

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

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

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

شاید مفید باشد: آموزش ساخت فرم ورود و ثبت‌نام در المنتور

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

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

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

	
const ostadseomenubox = document.querySelector('.ostadseomenubox');
const ostadseomenuicon = document.querySelector('.ostadseomenuicon');
const ostadseoclosemenu = document.querySelector('.ostadseoclosemenu');

	ostadseomenuicon.onclick = () =>{
		ostadseomenubox.classList.add('active');	
	};
	ostadseoclosemenu.onclick = () =>{
		ostadseomenubox.classList.remove('active');
	};
	document.addEventListener('click', function(event) {
    if (!ostadseomenubox.contains(event.target) && !ostadseomenuicon.contains(event.target)) {
        ostadseomenubox.classList.remove('active');
    }
});

به پنل وردپرس خود بروید در منو سمت راست المنتور را پیدا کنید و از زیر منو های آن روی کد سفارشی (Custom Code) کلیک کنید. در صفحه باز شده مطابق تصویر زیر یک نام برای کد خود بگذارید سپس بنویسید <script> و یک اینتر بزنید کد بالا را در این قسمت قرار دهید دوباره یک اینتر بزنید و بنویسید </script> تا کد به‌درستی کار کند. مانند تصویر زیر محل (Location) را روی پایان body بگذارید و روی دکمه انتشار کلیک کنید.

بعد از زدن گزینه انتشار المنتور از شما می‌خواهد که برایش مشخص کنید این کد در چه صفحه یا صفحاتی اعمال شود. ازآنجایی‌که این کد در منو است و باید در تمام صفحات اعمال شود نیاز به تغییر چیزی نیست و در این مرحله کافی‌ست روی دکمه ذخیره و بستن (save & close) کلیک کنید.

به صفحه ویرایش المنتور خود برگردید رو منو کلیک کنید و از تنظیمات آن مطابق تصویر زیر Layout را روی Dropdown بگذارید و Toggle Button را روی none تنظیم کنید.

خوب حال نوبت ساخت کلاس‌ها است برای این که کد JS درست کار کند باید کلاس‌های آن را به ویجت‌های خود بدهیم ما ۳ کلاس داریم که به ترتیب به شما می‌گویم هر کدام را در کجا قرار دهید.

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

کلاس بعدی مربوط به آیکن ضربدر است که برای بستن منو موبایل در کانتینر دوم قرار دادیم مثل روش قبل روی آیکن کلیک کرده و به قسمت پیشرفته بروید و در باکس کلاس‌های css مقدار ostadseoclosemenu را وارد کنید.

و در نهایت هم کلاس کل منو یا همان باکس منو موبایلی را باید وارد کنیم. این کلاس را باید به کل کانتینر دوم بدهیم روی کل کانتینر دوم کلیک کنید و در تب پیشرفته در باکس کلاس‌های css مقدار ostadseomenubox را وارد کنید.

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

.ostadseomenubox{
	height:100vh;
	position:fixed;
	top:0;
	width:75%;
	right:-100%;
	z-index:99999;
	overflow-y:scroll;
	transition: 0.3s;
}
.ostadseomenubox.active{
	right:0;
}

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

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

نکات سئویی مهم در ساخت منو موبایل در المنتور

در خیلی از موارد دیده شده در آموزش‌ها منو موبایل را با پاپ‌آپ می‌سازند و آموزش می‌دهند. هرگز برای ساخت منو از پاپ‌آپ استفاده نکنید. ماهیت پاپ‌آپ به این‌گونه است، تا زمانی که باز نشده است دیتای آن توسط گوگل وانده نمی‌شود و این یعنی گوگل تا زمان باز نشدن پاپ‌آپ نمی‌تواند آن را بخواند و فرض کنید منو که مهم‌ترین قسمت سایت شما به‌حساب می‌آید توسط گوگل دیده نمی‌شود. پیشنهاد می‌کنم برای اطلاعات بیشتر این مقاله از سایت element.how که مربوط به ضرر پاپ‌آپ برای سئو است را بخوانید Why Elementor Pro Popups Are Not Good For SEO.

اگر می‌خواهید برای خود یا کسب‌و‌کار خود سایت راه‌اندازی کنید بهترین گزینه برای شما خدمات طراحی سایت وردپرس استاد سئو است.

آدرس کانال افزونه‌های استاد سئو جهت دانلود افزونه المنتور پرو