چگونه در وردپرس یک منوی واکنشگرا برای موبایل بسازیم؟

آیا می‌خواهید با وردپرس، یک منوی responsive (ریسپانسیو یا واکنشگرا)  برای موبایل ایجاد کنید؟ تعداد کسانی که با موبایل از وبسایت‌ها بازدید می‌کنند، از تعداد کسانی که با کامپیوتر یا لب تاب استفاده می‌کنند، پیشی گرفته‌اند. افزودن یک منوی واکنشگرا برای موبایل، باعث می‌شود تا کاربران راحت تر در وب سایت شما گردش کنند. در این مقاله به شما نشان خواهیم داد که چگونه به راحتی یک منوی وردپرس واکنش گرا برای موبایل ایجاد کنید.

این یک آموزش جامع است. ما هم روش استفاده از افزونه را برای مبتدیان (بدون کدنویسی) و هم روش کدنویسی برای کاربران حرفه‌ای آموزش خواهیم داد.

آماده‌اید؟ بیایید شروع کنیم.

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

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

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

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

پس از فعال سازی، این افزونه یک آیتم جدید در منو، با عنوان ” Responsive Menu (منوی واکنشگرا)” به نوار مدیریت وردپرس شما اضافه می‌کند. با کلیک بر روی آن به صفحه تنظیمات افزونه هدایت می‌شوید.

ابتدا باید عرض صفحه را وارد کنید که در آن نقطه، افزونه شروع به نمایش منوی واکنشگرا می‌کند. مقدار پیش فرض، ۸۰۰ پیکسل است که برای اکثر وب سایت ها کار می‌کند.

پس از آن، باید منوی مورد نظر خود را، انتخاب کنید. اگر هنوز منویی ایجاد نکرده‌اید، می‌توانید با مراجعه به “Appearance (نمایش)” سپس “Menu (منو)“، یک منو ایجاد کنید. می‌توانید راهنمای ما در مورد نحوه اضافه کردن منو در وردپرس را بخوانید.

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

فراموش نکنید که برای ذخیره تنظیمات خود بر روی دکمه ” Update Option (به روز رسانی گزینه ها)” کلیک کنید.

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

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

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

راه دیگر برای افزودن یک منوی واکنشگرا، افزودن یک منوی کشویی است. این روش به هیچ گونه مهارت کدنویسی نیاز ندارد، بنابراین به مبتدیان پیشنهاد می‌شود.

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

پس از فعال سازی، برای تنظیمات افزونه، باید به  “Appearance (نمایش)” سپس به “Responsive Select” بروید.

باید به بخش “Activate theme locations (فعال کردن مکان‌های تم)” به پایین بروید. به‌طور پیش‌فرض، این افزونه در همه قسمت‌های قالب فعال می‌شود. می‌توانید قسمت‌های موردنظرتان از قالب را جداگانه، انتخاب کنید.

فراموش نکنید که روی دکمه “save (ذخیره)” کلیک کنید تا تغییرات شما ذخیره شود.

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

روش ۳ : ایجاد منوی واکنشگرا برای موبایل به وسیله تغییر حالت

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

در این روش شما باید کد سفارشی را به فایل‌های وردپرس خود اضافه کنید. اگر قبلاً این کار را انجام نداده‌اید، به راهنمای ما در مورد چگونگی اضافه کردن کد سفارشی به وردپرس نگاهی بیندازید .

ابتدا باید یک ویرایشگر متنی مانند notepad را باز کنید و این کد را Paste کنید.

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

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

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

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

اکنون باید navigation menu (منوی ناوبری) را به قالب وردپرس خود اضافه کنید. معمولا منوی ناوبری به header.php فایل قالب اضافه می‌شود.

ما فرض می‌کنیم که محل قالب تعریف شده توسط قالب شما “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;
    }
     
    }

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

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

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

یکی دیگر از روش‌های رایج برای افزودن منوی تلفن همراه، استفاده از منوی پنل اسلاید است (همانطور که در روش ۱ گفته شد).

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

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

(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 ندارد، باید tit را ایجاد کنید و سپس فایل خود را آپلود کنید.

پس از آن، باید فایل menu.png را در مسیر زیر، آپلود کنید.

/wp-content/themes/your-theme/images/

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

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

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

در این‌جا، می‌خواهید منوی ناوبری موجود را با کد 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 را برای جلوگیری از خطاهای مختلف، تغییر دهید.

در اینجا نحوه ظاهر آن را می‌توانید ببینید:

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

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

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