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

آخرین نسخه فشرده bigSlide.js را دانلود کنید. فایل را در پوشه theme /js خود کپی کنید.
توابع functions.php در ویرایشگر کد باز کنید و wp_enqueue_script را جستجو کنید. احتمالا چندین نمونه را مشاهده خواهید کرد، زیرا wp_enqueue_script روش استاندارد اضافه کردن اسکریپت به وردپرس است.
بعد از آخرین نمونه از wp_enqueue_script ، قطعه زیر را اضافه کنید و ذخیره کنید.

wp_enqueue_script( ‘my-responive-menu’, get_template_directory_uri() . ‘/js/bigSlide.min.js’, array(), ‘20161214’, true );

فایل header.php را باز کنید و کلاس push رو در هر جایی که مدنظر دارید بعد از تگ body (بدنه) قرار بدهید.

در آخر برای خاتمه دادن کد زیر را اضافه می کنید:

در حالی که هنوز داخل فایل header.php هستید site-navigation را search کنید.

در اکثر قالب ها به همین شکل خواهد بود اما اگر نبود به این شکل قرار بدهید کد زیر را:

<nav id=”primary-navigation” class=”site-navigation primary-navigation” role=”navigation”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
</nav>

اضافه کنید تگ لینک زیر رو قبل از بسته شدن تگ </nav> مانند کد زیر ضافه کنید.

در اینجا ما یک آیکن منوی موبایل ایجاد می کنیم.

فایل footer.php را باز می کنید و <?php wp_footer(); ?>را جستجو می کنید درست بعد از این خط، قطعه زیر را اضافه کنید:

<div id=”responsive-menu” class=”panel mobile-menu”><?php wp_nav_menu( array(‘theme_location’ => ‘primary’,) );?></div>
<script> jQuery(‘.menu-link’).bigSlide({
menu: ‘.mobile-menu’,
speed: 300,
side:”right”,
easyClose:true});</script>

حالا ما یک منوی پنهانی در پایین صفحه ایجاد می کنیم.

در آخر، style.css را باز کنید و بعد از آخرین خط، کد زیر را اضافه کنید:

.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;}

.push{position:relative;}

.menu-link{display:none;color:#fff;background:#fff;border-radius:4px;padding:2px 12px;float:right;}

.mobile-menu a{display:block;color:#fff;padding:10px 15px;}

.mobile-menu a:hover{background-color:#555;}

.mobile-menu li{border-bottom:1px #444 solid;}

@media only screen and (max-width:900px) {

#primary-menu{display:none;}

.mobile-menu #primary-menu{display:block;}

.menu-link{display:inline-block;}

}

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

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

دانلود bigSlide.js