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

اگر از موبایل خود برای وبگردی استفاده کرده باشید، حتما به سایت های زیادی برخورده اید که از Burger Menu استفاده می کنند. این ها منوهایی هستند که در پشت یک آیکون “همبرگر” مانند پنهان شده اند و برای نمایش آنها میبایست بر روی آن آیکون کلیک کرد.

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

از اسم که بگذریم، اضافه کردن Burger Menu به سایت وردپرس باعث بهبود تجربه کاربری برای آن دسته از کاربرانی می شود که از موبایل برای مشاهده سایت شما استفاده می کنند.

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

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

به چه چیزهایی نیاز خواهید داشت

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

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

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

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

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

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

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

اضافه کردن آیکون مربوط به 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 نیز استفاده شده تا اگر کد مشابهی وجود دارد، این کد نسبت به آن ارجعیت پیدا کند.

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

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

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

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

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

@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 که از نحوه عملکرد منو تهیه شده را نیز در زیر مشاهده کنید.

Burger Menu و بهبود تجربه کاربری

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

پایان…