آموزش ساخت فهرست‌های واکنش‌گرا Burger Menu

سلام و درود خدمت شما دوستان عزیز و همراهان مِستر آموز.

 

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

 

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

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

برای ساخت این منو به 2 مورد در سایت خود نیاز دارید:

1- داشتن یک سایت وردپرسی که از فهرست های واکنش گرا پشتیبانی کند.

2- استفاده از قالب اصلی یا قالب فرزند برای شخصی سازی منوها

 

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

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

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

اکنون قالب ما به صورت پیش فرض و معمولی نمایش داده می شود.

در حال حاضر قالب ما به صورت کاملا معمولی منو را در نمایش عموم قرار می‌دهد. به شکل زیر:

 

 

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

 

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

 

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

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

 

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

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

 

کد زیر برای تعیین رنگ و موقعیت نمایش منو در وردپرس اضافه کنید.

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

 

در کد های بالا ما در فایل style.css کوئری درج کردیم. که با کد های زیر آن را تکمیل می کنیم. کدهای زیر را درون کد کوئری  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;
}

کد بالا دو کار مهم را برای منوی سایت شما انجام می‌دهد:

1- نشان دادن فهرست‌های واکنش‌گرا در وردپرس به صورت تمام صفحه در هنگام نمایش منو توسط کاربر است.

2- این کد به شما کمک می‌کند تا منوی تمام صفحه شما با بک‌گراند سفید به نمایش درآید.

3- این کد باعث نمایش تمامی منو‌های ul شما در وردپرس خواهد شد.

4- بخشی از این کد را کدهای جاوا اسکریپت تشکیل می‌دهند که باعث نمایش منو در صورت کلیک کاربر بر روی آیکون به شکلی زیبا و منحصر به فرد خواهد شد.

5- این کد منوهای شما را از حالت شناور یا Floats خارج می‌کند و منوها به عنوان بلاکی ثابت در سایت نمایش داده می‌شوند.

 

 

سپس جهت زیباتر نشان دادن منوی خود کدهای جاوا اسکریپت زیر را به فایل 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' );

 

سپس کدهای زیر را نیز در ادامه‌ی آن اضافه کنید:

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

 

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

 

موفق و پیروز باشید.