چگونه یک منوی موبایلی را به قالب وردپرس اضافه کنیم

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

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

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

به چه چیزهایی احتیاج داریم

یک قالب وردپرسی: اگر که شما مشغول طراحی یک قالب از اول یا استفاده از یک فریمورک برای این کار هستید باید بدانید که این آموزش بسیار برای شما مناسب است. البته بدانید که اگر از یک قالب وردپرسی هم استفاده می‌کنید هیچ مشکلی نخواهد بود. «فقط مطمئن شوید که اگر لازم بود باید از Child Theme استفاده کنید.»
SlickNav : یک کتابخانه کاملاً رایگان و منعطف. با این کتابخانه می‌توانید منوهای زیبایی برای حالت موبایل درست کنید، حتی اگر مرورگر شما از جاوا اسکریپت پشتیبانی نمی کند، این کتابخانه کار می کند. برای فعال شدن این کتابخانه از فایل‌های جی کوئری موجود در هسته وردپرس استفاده می شود.
Web Hosting Account : برای اجرا شدن وردپرس شما به این آیتم احتیاج دارید، می‌توانید از حالت لوکالهاست نیز استفاده کنید.

قدم اول: SlickNav را آپلود کنید:

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

jquery.slicknav.min.js
slicknav.css

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

قدم دوم: یک فایل جاوا اسکریپت بسازید

SlickNav برای تعاملی کردن منو به چند خط دستور جاوا اسکریپت احتیاج دارد. با وجود اینکه می‌توانید این کدها را در فایل header.php مربوط به قالبتان قرار دهید. اما پیشنهاد می‌شود که آن را در یک فایل خارجی بنویسید. پس یک فایل جاوا اسکریپتی بسازید و هر نامی که دوست دارید را به آن بدهید در این مثال از نام siteloader.js استفاده شده است.

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

// Add SlickNav Mobile Menu

jQuery(function(){

jQuery('#primary-menu').slicknav();

});

primary-menu اشاره دارد به اینکه آی دی منوی اصلی یا هر منوی دیگر از قالب شما که می‌خواهید آن را تغییر دهید، کدام است. شما می‌توانید این آی دی را به هر مقدار دیگری تغییر دهید.

نکته : به یاد داشته باشید که این منو را در قسمت فهرست های وردپرس به منوی اصلی وبسایت تغییر دهید.

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

قدم سوم : ویرایش فایل functions.php

در این مرحله باید فایل کدهای جاوا اسکریپت را به فایل function.php مربوط به پوسته وردپرسی اضافه کنیم. با این کار کدهای اسکریپتی ما همزمان با فایل‌های مربوط به وردپرس بارگذاری می شوند. برای اینکار کدهای زیر را وارد کنید:

// Load Mobile Navigation

function mobilenav_scripts() {



// Load SlickNav

wp_enqueue_script( 'mobilenav-slickjs', get_template_directory_uri() . '/path/to/jquery.slicknav.min.js', array('jquery') );



wp_register_style( 'slicknav-css', get_stylesheet_directory_uri() . '/path/to/slicknav.css');

wp_enqueue_style( 'slicknav-css' );



// Load Custom JS File

wp_enqueue_script( 'mobilenav-init', get_template_directory_uri() . '/path/to/siteloader.js', array('jquery'));



}

/path/to/ منظور آدرس فایل است، شما می‌توانید آن را تغییر دهید.

نکته : ممکن است کدهایی که برای شما مناسب است با این کدها متفاوت باشد، برای بیشتر خواندن در این رابطه می‌توانید به توابع و مستندات مرتبط به کتابخانه در سایت مراجعه کنید.

قسمت چهارم : اضافه کردن کدهای CSS

اگر شما تمام قدم‌های بالا را با موفقیت انجام دادید و فایل‌ها را روی سرور قرار دادید، slicknav به کار می افتد. اما مشکلی که در راه اندازی وجود دارد این است که slicknav هنوز بر اساس اندازه دستگاه کاربر اطلاعات را نشان نمی‌دهد «واکنشگرا نشده». خب باید کاری کنیم که منوها نسبت به اندازه‌ای نشان داده شوند یا پنهان بمانند. برای این کار کدهای زیر را در فایل مربوط به CSS قالب خود قرار دهید.

.slicknav_menu {

display:none;

}

@media screen and (max-width: 800px;) {

/* #primary-menu is your theme’s original menu */

#primary-menu {

display:none;

}

.slicknav_menu {
   display:block;
}

}

خاصیت max-width بیان می‌کند که حداکثر اندازه مورد نظر برای نمایش چقدر باشد و primary-menu اشاره به منوی اصلی وبسایت دارد.

نکته: از وجود دستور meta viewport در فایل header.php خود اطمینان پیدا کنید، در اکثر قالب‌ها می‌توانید این گزینه را مشاهده کنید اما اگر فایل حاوی دستورات نبود، به آن اضافه کنید.

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

در نهایت شما باید سه فایل زیر را حتماً آپلود کرده باشید:

فایل مربوط به جاوا اسکریپت (siteloader.js )
فایل functions.php
فایل CSS ویرایش شده

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

برای دیدن طرح ها و ایده‌های بیشتر راجب به منوهای وبسایت می‌توانید به این نوشته نیز مراجعه کنید. منبع