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

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

فهرست‌های واکنش‌گرا در وردپرس

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

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

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

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

برای شروع شخصی‌سازی اول کلاس CSS را برای اعمال شخصی‌سازی در کدهای خود پیدا کنید؛ برای مثال قالبی که ما می خواهیم آن را شخصی‌سازی نماییم کلاسی با نام menu.main دارد که باید کدهای آن را عوض کنیم. در حال حاضر قالب ما به صورت کاملا معمولی منو را در نمایش عموم قرار می‌دهد:

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

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

<?php wp_nav_menu(array('container_class'=>'main-nav','theme_location'=>'primary'));?>
<a class="toggle-nav" href="#">☰</a>

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

پنهان کردن منو در سایزهای بزرگ و نسخه دسکتاپ

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

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

با این کد نمایش فهرست‌های واکنش‌گرا در وردپرس به این سبک برای همه ی دستگاه‌های بازدیدکننده از سایت غیرفعال می‌شود. اکنون با افزودن قطعه کد دیگری مشخص می‌کنیم این منو برای دستگاه‌های تا سایز حداکثر ۴۸۰px در وردپرس نشان داده شود:

@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;
}

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

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

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' );

jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery('.menu.main ul').slideToggle(500);
e.preventDefault();
});
});