ساخت منوی موبایل برای قالب وردپرس

آیا می خواهید منوی موبایلی برای وب سایت وردپرسی خودتان درست کنید؟ در این مطلب قصد دارم یک روش ساده و سریع برای ساخت منوی موبایل رو با شما به اشتراک بذارم.

در این روش با استفاده از کدهای html و css و کمی هم کد جاوا اسکریپت منوی موبایل قالب وردپرسمان را درست می کنیم.

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

ساختار منوی موبایل

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

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

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

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

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

<!-- Mobile Menu Button -->
<div class='mobile-menu-btn'>
    <span onclick="openNav()"><i class='fa fa-bars'></i></span>
</div>
<!-- Mobile Menu slide -->
<div id='mobile-menu-box-id' class="mobile-menu-box">
   <div class='close-menu-btn'>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
      </a>
   </div>
   <?php wp_nav_menu(
      array('theme_location'=>'mobile_menu',
            'menu_class'=> 'mobile-menu',
            'container' => 'ul', 
            'current-menu-item','main-menu-item' ));?>
</div>

کد HTML بالا را باید در قسمت هدر سایت قرار دهید. در وردپرس معمولا کد های مربوط به هدر در فایل header.php نوشته می شود.

خط 2 تا 4 کد بالا مربوط به دکمه منو است. در خط اول یک div با کلاس mobile-menu-btn داریم که داخل آن یک span با اتریبیوت onclick وجود دارد. مقدار onclick برابر با openNav() می باشد که این مقدار نام یک تابع جاوا اسکریپتی است که باعث می شود دکمه منو اسلایدر منو را باز کند.

openNav() در ادامه و در فوتر سایت (جایی که کد های جاوا اسکریپت را می نویسیم) تعریف می کنیم.

تک i با کلاس fa fa-bars برای نمایش منوی همبرگری است. برای استفاده از این کلاس باید کتابخانه آیکون های fontawsome در قالب یا سایت وردپرسی شما اضافه شده باشد. درصورتی که کتابخانه fontawsome را روی سایت خودتان ندارید می توانید بجای تگ i از یک تصور استفاده کنید.

بخش دوم کد های HTML مربوط به اسلایدری هست که آیتم های منو داخل آن قرار می گیرند. این بخش با یک تگ div دارای اتیبیوت id برابر با مقدار mobile-menu-box-id می باشد. این دایو از خط 5 تا 16 است که شامل دو ایتم است. در خط های 6 تا 10 دکمه بستن منو قرار دارد. عبارت × علامت ضربدر را در صفحه سایت نمایش می دهد. تابع closeNav() داخل اتریبیوت onclick تگ a را در فوتر سایت تعریف می کنیم.

از خظ 11 تا 15 کدهای php شامل تابع wp-nav-menu است. این تابع از توابع وردپرس است که یک آرایه از اطلاعات مربوط به منو را می گیرد و منوی مورد نظر ما را در قالب نمایش می دهد.

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

/* mobile menu */
.mobile-menu-box{
    background: #2c3338;
    position: absolute;
    height: 100%;
    left: 0px;
    top: 0px;
    display: none;
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

}
.mobile-menu-box ul li{
text-align: center;
padding: 15px 5px;
}
.mobile-menu-box ul li a{
    color: #fff;
}
.mobile-menu-btn{
    display: block;
    float: left;
    font-size: 2rem;
    padding-left: 15px;
    display: none;
}
.close-menu-btn{
    text-align: left;
}
.close-menu-btn a{
    font-size: 2.5em;
    color: #ffffff;
    font-weight: 900;
    padding: 15px;
}

کد CSS بالا استایل اجزای مختلف منوی موبایل ما را مشخص می کند. این کدهایی css را می توانید در فایل style.css قالب وردپرس خودتان قرار دهید. نکته مهم این است که اگر قالب را از جایی خریداری کرده اید و خودتان آن را ننوشته اید استایل های CSS را در فایل style.css قرار ندهید. بجای آن می توانید از Child-theme استفاده کنید و کد استایل بالا را درون فایل style.css داخل child-theme قرار دهید.

کدهای جاوا اسکریپت برای ساخت منوی موبایل وردپرس

<script>
/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("mobile-menu-box-id").style.width = "80%";
  }
  
  /* Set the width of the side navigation to 0 */
  function closeNav() {
    document.getElementById("mobile-menu-box-id").style.width = "0";
  }

</script>

کد جاوا اسکریپت بالا در فایل footer.php و قبل از بسته شدن تگ body قرار می گیرد. در این بخش کد جاوا اسکریپت توابع openNav() و closeNav() تعریف شده اند. تابع openNav() متصل به دکمه همبرگر منو است و کار باز شدن اسلاید منو را انجام می دهد و تابع closeNav() کا بسته شدن اسلاید منو را اجام می دهد و به دکمه ضربدر داخل منو متصل است.

مجددا تاکید می کنم که در صورتی که قالب شما نوشته خودتان نیست کدهای بالا را در child-theme قرار دهید.