آموزش ایجاد منو های همبرگری یا Burger Menu در سایت های وردپرسی

محتوانوشته

اگر از موبایل خود برای وبگردی استفاده کرده باشید، حتما به سایت های زیادی برخورده اید که از Burger Menu یا همان منوی همبرگری استفاده می کنند. این ها منوهایی هستند که در پشت یک آیکون “همبرگر” مانند پنهان شده اند و برای نمایش آنها میبایست بر روی آن آیکون کلیک کرد. علت اینکه به به آنها منو همبرگری گفته می شود این است که آیکون مورد نظر که شامل سه خط است بسیار شبیه به لایه های یک همبرگر است. از اسم که بگذریم، اضافه کردن منوی همبرگری به سایت وردپرس باعث بهبود تجربه کاربری برای آن دسته از کاربرانی می شود که از موبایل برای مشاهده سایت شما استفاده می کنند. شما می توانید از یکی افزونه های ساخت منو در وردپرس در این زمینه برای ایجاد منوی همبرگری استفاده کنید. یا می توانید از قالبی استفاده کنید که به صورت پیش فرض این قابلیت را روی خود دارد. در ادامه مطلب همراه ما باشید تا شما را با آموزش ایجاد منو های همبرگری یا Burger Menu آشنا کنیم.

منوی همبرگری چیست؟

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

افزونه های امنیتی و سرعتی: خرید افزونه وردفنس | خرید افزونه آیتم سکوریتی پرو | خرید افزونه ssl | خرید افزونه راکت

مزایای استفاده از منوی همبرگری

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

خرید افزونه المنتور پرو | خرید افزونه دیجیتس | خرید افزونه گرویتی فرمز | خرید افزونه دکان پرو

معایب استفاده از منو همبرگری

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

خرید افزونه یواست سئو | خرید افزونه رنک مث

چه زمانی از منوی همبرگری استفاده کنیم؟

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

بیشتر بخوانید: خرید افزونه اپلیکیشن ساز

در چه صورتی از منو همبرگری بپرهیزیم؟

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

افزونه اسلایدر روولوشن | خرید افزونه داپلیکیتور پرو | خرید افزونه پرفومترز

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

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

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

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

آموزش ایجاد منو های همبرگری با المنتور

یکی از بهترین و ساده ترین روش ها برای ایجاد منو های همبرگری در وردپرس، استفاده از صفحه ساز المنتور می باشد. با المنتور و نصب افزودنی PowerPack می توانید به سادگی منو های همبرگری بسیار جذابی را ایجاد کنید. ( برای خرید افزودنی PowerPack المنتور کلیک کنید).

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

PowerPack یک ویجت اختصاصی برای ایجاد منوهای کاملاً کاربردی و چشمگیر در وب سایت های وردپرس شما با استفاده از صفحه ساز المنتور ارائه می دهد. با استفاده از ویجت “منوی پیشرفته” می توانید به راحتی یک منوی همبرگر ایجاد کنید، به علاوه طرح بندی های مختلف منو و همه چیز را در یک بسته از یک ویجت ارائه می دهد.

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

آموزش ایجاد منو های همبرگری

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

اولین زیربخشی که در برگه محتوا دریافت خواهید کرد، «طرح بندی Layout » است. این بخش ویژگی های مختلفی را برای سفارشی کردن طرح بندی نوار منو ارائه می دهد.

– منو Menu

آموزش ایجاد منو های همبرگری

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

– طرح بندی Layout

آموزش ایجاد منو های همبرگری

طرح نوار منوی خود را به صورت عمودی یا افقی انتخاب کنید.

– تراز کردن Align

تراز منوی خود را از گزینه های تراز، مانند چپ، مرکز، راست یا کشش تنظیم کنید.

– اشاره گر Pointer

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

آموزش ایجاد منو های همبرگری

همچنین اگر نمی‌خواهید نشانگر نمایش داده شود، می‌توانید گزینه None را انتخاب کنید.

– انیمیشن Animation

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

آموزش ایجاد منو های همبرگری

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

– نمایش منوی فرعی روشن (Show Submenu On)

از این گزینه می توانید منوی فرعی را در هاور یا کلیک کنید.

آموزش ایجاد منو های همبرگری

– نشانگر منوی فرعی (Submenu Indicator)

می‌توانید یک نشانگر منوی فرعی را از کتابخانه نماد انتخاب کنید یا اگر نمی‌خواهید نشان داده شود، گزینه «هیچ» را انتخاب کنید.

آموزش ایجاد منو های همبرگری

– ریسپانسیو (Responsive)

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

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

نقطه شکست Breakpoint

از این گزینه می توانید نقطه شکست را برای نوار منو خود انتخاب کنید. از آنجایی که ما در حال ایجاد یک منوی همبرگر برای سایت خود هستیم، گزینه Always for a Breakpoint را انتخاب نمائید.

آموزش ایجاد منو های همبرگری

همچنین اگر می خواهید منوی همبرگر را فقط روی موبایل یا تبلت نمایش دهید، به ترتیب Mobile و Tablet را در گزینه Breakpoint انتخاب کنید.

نوع منو Menu Type

در مرحله بعد، می توانید نوع منو را به صورت Off-Canvas ،Full Screen یا Default انتخاب کنید.

آموزش ایجاد منو های همبرگری یا Burger Menu در سایت های وردپرسی

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

برای این که از این آموزش استفاده کنید، شما به موارد زیر نیاز دارید:

داشتن یک سایت وردپرس که قبلا فهرستی در آن ایجاد کرده اید.
قالب دلخواه خود

در این مقاله میخواهیم این قابلیت را روی قالب خود پیاده سازی کنیم. در این مقاله هدف ما استفاده از منوی ناوبری اصلی سایت بوده و کلاس CSS که برای آن در این مقاله استفاده میکنیم .menu.main است.

در حال حاضر منویی که از آن استفاده می کنیم و در نسخه دسکتاپ سایت نمایش داده می شود چیزی شبیه به تصویر زیر است – این منو در زیر هدر قرار گرفته است:

تصویر منو در نسخه دسکتاپ

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

میتوان برای رفع مشکل آیتم های منوی مذکور را وسط چین کرد، اما با این کار فضای بیشتری اشغال می شود. به جای آن می توان از Burger Menu استفاده کرد به این صورت که در صفحه نمایش های کوچک منو مخفی بوده و تا زمانی که کاربر روی آیکون مورد نظر کلیک نکند، منو نمایش داده نخواهد شد.

بیشتر بخوانید: چگونه یک گالری آلبوم عکس بدون استفاده از افزونه در وردپرس ایجاد کنیم؟

اضافه کردن آیکون مربوط به منوی همبرگری

اولین قدم اضافه کردن آیکون مربوطه است. این کار را می توانید با ویرایش header.php قالب سایت خود انجام دهید. برای این کار کافی است لینکی را در پایین کد مربوط به منوی ناوبری اصلی قرار دهید. مانند نمونه کدی که ما از آن استفاده کرده ایم:

کپی کد
<?php wp_nav_menu( array( ‘container_class’ => ‘main-nav’, ‘theme_location’ => ‘primary’ ) ); ?>
<a class="toggle-nav" href="#">☰</a>

این کد لینکی با کلاس toggle-nav ایجاد می کند. درون این لینک آیکون مربوطه گنجانده شده است آن هم به صورت نمادی که با HTML تعریف شده است. در این صورت دیگر نیازی به استفاده از آیکون گرافیکی و یا FontAwesome هم نیست.

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

این تمام چیزی است که باید در header.php قالب سایت خود قرار دهید، بعد از انجام تغییرات کافی است آنها را ذخیره کنید. حالا اگر صفحه سایت خود را بروز کنید، می توانید آیکون مربوطه را که به قالب اضافه شده است مشاهده کنید:

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

مشاهده کنید: لیست قالب سایت بازی

مخفی کردن آیکون اضافه شده در صفحه نمایش های بزرگ

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

.toggle-nav {
    display: none !important;
}

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

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

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

بیشتر بخوانید: چگونگی ادغام دو وبسایت وردپرسی بدون از دست دادن سئو

اضافه کردن استایل مربوط به منوی همبرگری در نسخه موبایل

حالا نوبت اضافه کردن کدهای استایل مربوط به نسخه موبایل منوی مذکور است، که زمانی نمایش داده می شود که کاربر بر روی آیکون مذکور کلیک کند.

ابتدا باید کد دستوری زیر را به فایل استایل قالب خود اضافه کنید:

@media screen and ( max-width: 480px) {
}

هدف ما صفحه نمایش هایی است که حداکثر عرض آنها ۴۸۰px است اما می توانید این مقدار را تغییر داده و در صورت نیاز آن را برای صفحه نمایش های عریض تر نیز استفاده کنید.

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

.toggle-nav {
padding: 15px;
margin: 15px;
display: inline-block !important;
color: #8D7F68;
color: #fff;
transition: color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration: none;
color: #8D7F68;
}

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

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

.menu.main {
display: inline-block;
position: relative;
background: #fff;
}
.menu.main ul {
display: none;
position: absolute;
top: 80%;
right: 0px;
padding-right: 15px;
background: #fff;
}
.menu.main li {
display: block;
float: none;
}

اضافه کردن اسکریپت

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

در پوشه مربوط به قالب سایت خود، پوشه ای به نام scripts ایجاد کرده و درون پوشه scripts فایلی خالی به نام burger-menu-script.js ایجاد کنید.

حالا فایل functions.php قالب سایت خود را ویرایش کرده و کد زیر را به آن اضافه کنید:

کپی کد
function wpmu_burger_menu_scripts() {
wp_enqueue_script( ‘burger-menu-script’, get_stylesheet_directory_uri() . ‘/scripts/burger-menu.js’, array( ‘jquery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘wpmu_burger_menu_scripts’ );

این کد به صورت کاملا اصولی اسکریپتی که شما ایجاد کرده اید را فراخوانی می کند. حالا باید کدهایی را درون آن فایل قرار دهید. فایل burger-menu-script.js را باز کرده و کدهای زیر را درون آن قرار دهید:

کپی کد
jQuery(document).ready(function() {
jQuery(‘.toggle-nav’).click(function(e) {
jQuery(‘.menu.main ul’).slideToggle(500);
e.preventDefault();
});
});

این کد المان .toggle-nav را که ما ایجاد کردیم، دریافت کرده و برای آن یک Click Call ایجاد می کند که تنها زمانی اجرا می شود که کاربر روی آیکون مذکور کلیک کند. سپس از .slideToggle استفاده کرده تا منوی ناوبری را نمایش دهد آن هم وقتیکه روی لینک و آیکون مذکور کلیک شده باشد.

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

و وقتیکه روی آیکون مذکور کلیک می کنیم، منوی ناوبری نمایش داده می شود:

کار تمام است و شما Burger Menu دلخواه خود را برای قالب سایت خود ایجاد کرده اید. در صورتیکه میخواهید می توانید تصویر gif که از نحوه عملکرد منو تهیه شده را نیز در زیر مشاهده کنید.

سوالات متداول

منوی همبرگری چیست؟

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

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

افزونه هایی مانند Elementor، Max Mega Menu و WP Responsive Menu گزینه های محبوب هستند.

آیا می توان منوی همبرگری را فقط برای موبایل فعال کرد؟

بله، اغلب قالب ها و افزونه ها امکان نمایش منو فقط در حالت موبایل را دارند.

آیا منوی همبرگری روی سئو تاثیر دارد؟

تاثیر مستقیم ندارد اما اگر تجربه کاربری را بهبود دهد می تواند غیر مستقیم مفید باشد.

-

جمع بندی: نحوه ایجاد منوی همبرگری

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