عنوان مقاله :

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

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 31 اردیبهشت 1396
دسته بندی ها : وردپرس

با یقین می‌شود گفت که مناسب کردن کارایی و وضعیت دیداری وبسایت برای دستگاه‌های موبایل نمی‌تواند یک انتخاب اختیاری باشد. موبایل ها در سال 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 استفاده کنید.

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

مقالات پیشنهادی

چگونه افزونه های وردپرس روی سرعت لود وبسایت شما تاثیر می گذارند؟ - قسمت اول

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

امنیت وردپرس در چند قدم – قسمت اول

سیستم مدیریت محتوا وردپرس در کل یک سیستم امن به حساب می آید و همواره تیم پشتیبانی این سیستم مشغول برطرف کردن مشکلات امنیتی و … وردپرس هستند اما گاهی ا...

WordFence مدافع وبسایت های وردپرسی

با بیشتر از یک میلیون نصب ، WordFence یکی از محبوب ترین پلاگین های وردپرس محسوب میشه . این پلاگین بعد از نصب کدهای شما را اسکن میکند و همینطور به عنوا...

40 قالب رایگان وردپرس | قالب شماره 2

Dazzling یک قالب رایگان خیره کننده است که با استفاده از bootstrap نوشته شده . که خودش رو با غرور به یک قالب کاملا رسپانسیو و mobile-friendli تبدیل کرد...

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
هیچ دیدگاهی تا به این لحظه برای این موضوع ثبت نشده است