نحوه ایجاد منوی ریسپانسیو در وردپرس برای موبایل

نحوه ایجاد منوی ریسپانسیو در وردپرس برای موبایل

آیا می خواهید با نحوه ایجاد منوی ریسپانسیو در وردپرس آشنا شوید؟ تعداد کاربران تلفن همراه از تعداد کاربران دسکتاپ برای بسیاری از وب سایت ها پیشی گرفته اند. اضافه کردن یک منوی ریسپانسیو برای موبایل، کار کردن با سایت را برای کاربران آسانتر می کند. در این مقاله ، ما شما را با نحوه ایجاد منوی ریسپانسیو در وردپرس برای موبایل آشنا خواهیم کرد پس همراه ما باشید😉.

نحوه ایجاد منوی ریسپانسیو در وردپرس
نحوه ایجاد منوی ریسپانسیو در وردپرس

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

  • روش اول: با استفاده از افزونه (بدون برنامه نویسی) که برای مبتدیان تدارک دیده ایم و
  • روش دوم: با استفاده از کدنویسی که برای کاربران پیشرفته مناسب است.

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

آماده ای؟ پس بزن بریم .

روش 1: اضافه کردن یک منوی ریسپانسیو در وردپرس با استفاده از افزونه

این روش آسانتر است و برای مبتدیان توصیه می شود زیرا نیازی به کدنویسی اختصاصی ندارد.

در این روش ، منوی همبرگر را ایجاد می کنیم که در صفحه موبایل پخش می شود, درست مانند شکل زیر :

افزودن منوی واکنشگرا با افزونه
افزودن منوی واکنشگرا با افزونه

اولین کاری که باید انجام دهید نصب و فعال سازی افزونه Responsive Menu است. برای اطلاعات بیشتر ، به راهنمای مرحله به مرحله ما درباره نحوه نصب افزونه وردپرس مراجعه کنید.

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

افزونه Responsive Menu
افزونه Responsive Menu

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

ابتدا باید عرض صفحه را وارد کنید که در آن نقطه افزونه شروع به نشان دادن منوی ریسپانسیو می کند. مقدار پیش فرض 800px است که باید برای اکثر وب سایت ها کار کند( یعنی منویی که قرار است بسازید در صفحه نمایش های با عرض کمتر از 800 پیکسل نمایش داده خواهد شد و در عرض های بیشتر از 800 پیکسل منوی شما بصورت پنهان خواهد ماند).

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

آخرین گزینه روی صفحه نمایش تهیه کلاس CSS برای منوی غیر ریسپانسیو فعلی شما است. این کار باعث می شود افزونه, منوی غیر ریسپانسیو را روی صفحه های کوچکتر از عرض 800 پیکسل (یا هر مقداری که برای حداقل عرض وارد کرده اید)مخفی کند.

فراموش نکنید که برای ذخیره تنظیمات خود ، روی دکمه “ذخیره” کلیک کنید.

اکنون می توانید به وب سایت خود مراجعه کرده و از صفحه مرورگر خود تغییر اندازه دهید تا از منوی ریسپانسیو در عمل دیدن کنید.

نمونه منو با افزونه Responsive Menu
نمونه منو با افزونه Responsive Menu

افزونه منوی ریسپانسیو دارای گزینه های بسیار دیگری است که به شما امکان می دهد رفتار و ظاهر منوی ریسپانسیو خود را تغییر دهید. می توانید این گزینه ها را در صفحه تنظیمات افزونه کاوش کرده و در صورت لزوم آنها را تنظیم کنید.

روش 2: افزودن منوی دراپ داون با استفاده از افزونه

روش دیگر برای افزودن یک منوی ریسپانسیو، اضافه کردن فهرست انتخاب به پایین (دارپ داون) است. این روش نیازی به مهارت کد نویسی ندارد ، بنابراین برای مبتدیان توصیه می شود.

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

اولین کاری که باید انجام دهید نصب و فعال سازی افزونه Responsive Select Menu است. برای اطلاعات بیشتر ، به راهنمای مرحله به مرحله ما درباره نحوه نصب افزونه در وردپرس مراجعه کنید.

پس از فعال سازی ، برای پیکربندی تنظیمات افزونه باید به ” نمایش »ریسپانسیو ” بروید.

افزونه Responsive Select Menu
افزونه Responsive Select Menu

باید به قسمت “فعال کردن مکانهای زمینه” بروید. به طور پیش فرض ، افزونه در همه مکان های منو در قالب فعال می شود. می توانید با روشن کردن انتخابی آن برای مکان های خاص منو در قالب، آن را تغییر دهید.

فراموش نکنید که برای ذخیره تغییرات ، بر روی دکمه “ذخیره همه تنظیمات” کلیک کنید.

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

روش 3: ایجاد منوی ریسپانسیو همراه با حالت تغییر وضعیت(toggle)

یکی از متداول ترین روش استفاده شده برای نمایش منو در صفحه های تلفن همراه ، استفاده از حالت Toggle است.

این روش شما را ملزم می کند که کد دلخواه خود را به پرونده های وردپرس خود اضافه کنید.

ابتدا باید ویرایشگر متنی مانند “نوت پد” را باز کنید و این کد را در آن قرار دهید:

( function() {
    var nav = document.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }
  
    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }
  
    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }
  
    button.onclick = function() {
        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
            menu.className = 'nav-menu';
        }
  
        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )(jQuery);

اکنون باید این فایل را به عنوان navigation.js در دسکتاپ خود ذخیره کنید.

در مرحله بعد ، شما باید یک سرویس دهنده FTP را برای بارگذاری این پرونده در پوشه wp-content/themes/your-theme/js در سایت وردپرس خود باز کنید.

نام قالب فعلی خود را به جای your-theme جایگزین کنید. اگر قالب شما دایرکتوری js ندارد ، پس باید آن را بسازید.

ثبت فایل جاوااسکریپت

بعد از بارگذاری پرونده جاوا اسکریپت ، قدم بعدی اطمینان حاصل شود که سایت وردپرس شما بارگذاری این JavaScript را انجام دهد. باید کد زیر را به پرونده function.php قالب خود اضافه کنید.

wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

حال باید منویی در قالب وردپرس خود اضافه کنید. معمولاً منوی پیمایش به پرونده header.php یک قالب اضافه می شود.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

ما فرض می کنیم که موقعیت مکانی تعریف شده توسط قالب شما “primary” نامیده می شود. اگر اینگونه نیست ، از مکان تعریف شده توسط قالب وردپرس خود استفاده کنید.

مرحله آخر اضافه کردن CSS است به گونه ای که در فهرست ما از CSS های مناسب برای جابجایی هنگام کار در دستگاه های تلفن همراه استفاده می شود.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}
  
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}
  
// CSS to use on mobile devices
  
@media screen and (min-width: 600px) {
  
.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
      
    }

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

منوی واکنشگرا با اثر Toggle
منوی واکنشگرا با اثر Toggle

عیب یابی: بسته به قالب وردپرس شما نیاز به تنظیم CSS دارید. برای فهمیدن تداخلات CSS با موضوع خود از ابزار inspect element استفاده کنید.

روش 4: اضافه کردن یک منوی اسلایدری موبایل در وردپرس

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

روش 4 شما را ملزم به اضافه كردن كدی به پرونده های قالب وردپرس خود می كند(دقیقا مثل روش قبل) ، و این فقط یك روش متفاوت برای دستیابی به نتایج مشابه با روش 1 است.

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

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

فراموش نکنید که example.com را با نام دامنه خود و نام قالب خود را با your-theme جایگزین کنید. این فایل را به عنوان slidepanel.js در دسکتاپ خود ذخیره کنید.

اکنون به تصویری نیاز خواهید داشت که به عنوان نماد منو مورد استفاده قرار گیرد. نماد همبرگر بیشتر به عنوان نماد منو استفاده می شود. هزاران تصویر این چنینی از وبسایت های مختلف پیدا خواهید کرد. ما از نماد منو از کتابخانه Google Material Icons استفاده خواهیم کرد.

پس از یافتن تصویری که می خواهید از آن استفاده کنید ، آن را به عنوان menu.png ذخیره کنید.

آپلود کرن فایل جاوااسکریپت

در مرحله بعد ، شما باید مدیریت FTP اکانت خود را باز کرده و پرونده slidepanel.js را در پوشه /wp-content/your-theme/js خود بارگذاری کنید.

اگر پوشه قالب شما پوشه JS ندارد ، پس باید آن را ایجاد کنید و سپس پرونده خود را بارگذاری کنید.

پس از آن ، شما باید پرونده menu.png را در پوشه /wp-content/your-theme/js خود بارگذاری کنید.

پس از بارگذاری پرونده ها ، باید اطمینان حاصل کنیم که قالب شما پرونده جاوا اسکریپت را که اخیراً اضافه کرده اید بارگیری می کند. ما با ثبت پرونده JavaScript به این هدف خواهیم رسید.

این کد را به پرونده function.php قالب خود اضافه کنید.

wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

اکنون برای نمایش منوی ناوبری باید کد واقعی را در پرونده header.php خود اضافه کنیم. شما باید به دنبال کد مشابه این باشید:

wp_nav_menu( array( 'theme_location' =&amp;gt; 'primary', 'menu_class' =&amp;gt; 'nav-menu' ) );

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

میخواهید منوی ناوبری موجود را با کد HTML بپیچید تا منوی پنل اسلایدها در صفحه های کوچکتر نمایش داده شود.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

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

مرحله آخر اضافه کردن CSS برای مخفی کردن نماد تصویر منو در صفحه های بزرگتر است. همچنین باید موقعیت نماد منو را تنظیم کنید.

نمونه CSS ای که می توانید به عنوان نقطه شروع استفاده کنید:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}
  
} 
  
@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}
  
  
#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;
  
}
  
.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}
  
.nav-menu li:hover { 
background:#CCC;
}
  
.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
}

بسته به قالب وردپرس شما ، ممکن است شما نیاز به تنظیم CSS برای جلوگیری از تداخل ها داشته باشید.

در اینجا وب سایت نسخه ی نمایشی ما آورده شده است:

منوی Slide-Mobile در وردپرس
منوی Slide-Mobile در وردپرس

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

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

دیدگاهتان را بنویسید