آموزش تصویری ایجاد منوی رسپانسیو در وردپرس با Responsive Menu

سلام دوستان
آموزش وردپرس امروز خود را با آموزش تصویری افزونه رایگان وردپرس Responsive Menu آغاز میکنیم. دوستان قالب وردپرس شما از هر نوعی باشد، فروشگاهی، خبری یا دانلود و شرکتی، فرقی نمیکند، اگر میخواهید منوی قالب وردپرس خود را تغییر دهید، اگر منوی قالب شما رسپانسیو نیست یا نمیتوانید به خوبی از آن برای تجربه کاربری بهتر کاربران استفاده کنید. امروز را با ما باشید. میتوانید یکی از بهترین منوهای رسپانسیو و زیبای وردپرس را به صورت رایگان و با امکانات فراوان و به همراه آموزش تصویری، داشته باشید تا بتوانید بهترین منو در وردپرس را ایجاد کنید.
افزونه رایگان وردپرس منوی رسپانسیو و زیبا Responsive Menu
افزونه نام برده، با 80 هزار نصب فعال، نشان میدهد که کارایی خوبی دارد و توسط کاربران بسیاری مورد توجه قرار گرفته است. این افزونه رایگان وردپرس ، سفارشی سازی کاملی را از یک منوی کاملا رسپانسیو و پیشزفته به رایگان در اختیار کاربر قرار میدهد. بدون اینکه به کدنویسی و دانش خاصی نیاز داشته باشید میتوانید منوی وبسایت خود به شکلی بسیار زیبا و کارا طراحی و پیاده کنید.
در تعریف این افزونه در مخزن وردپرس آمده است که با 150 گزینه مختلف در پیکربندی و سفارشی سازی، شما میتوانید 2500 ترکیب مختلف از یک منو قدرتمند در قالب خود داشته باشید.
علاوه بر آموزش پارسی آن در ادامه، مستندات کاملی برای کار با افزونه در سایت توسعه دهنده نیز  در دسترس است. همچنین، این افزونه برای اجرا به وردپرس 4 به بالا و پی اِچ پی 5.4 به بالا نیاز دارد.
امکانات افزونه رایگان وردپرس Responsive Menu


رسپانسیو کامل
مستندات و آموزش از طرف توسعه دهنده
سفارشی سازی با بیشتر از 150 آپشن مختلف
دستیابی به ترکیب 2500 نوعی از منو و فهرست
سازگار با قالب های وردپرس مختلف
رنگ بندی تمام قسمت ها
تنظیم فونت، اندازه فونت، تراز بندی فونت
تنظیم موقعیت دکمه ی منو، در سمت و ارتفاع مختلف
تنظیم ظاهر شدن منو از چهار جهت مختلف
استفاده از تصویر سفارشی در دو ترکیب مختلف برای منو
انواع مختلف انیمیشن برای فهرست
امکان استفاده از هر نوع منو پشتیبانی شده در قالب وردپرس
تنظیم نمایش منو برای نمایشگر های با عرض سفارشی (تغییر بر اساس پیکسل)
تنظیم نمایش یا پنهان شدن عنصر های سی اِس اِس مختلف هنگام نمایش منو
تنظیم عمق زیر منو ها در فهرست اصلی
تنظیم انیمیشن و سرعت سفارشی برای منو و دکمه همبرگری منو
یکپارچه بودن با فرم جستجوی قالب
پشتیبانی از محتوای سفارشی در فهرست
منوی پیمایشی همراه با پیمایش کاربر در برگه یا ثابت
پشتیبانی از لوگو و تصویر برای زیر منو ها
پشتیبانی از اسکریپت ها در منو به همراه فشرده سازی و بهینه سازی آن و درج در فوتر
بخش برون بری و درون ریزی تنظیمات افزونه
استفاده از کدهای HTML و شرت کد در فهرست
پشتیبانی از راست چین
پشتیبانی از چند زبانه شدن
به همراه آموزش تصویری پیکربندی از فریش تم
و امکانات زیاد دیگری که در ادامه و بعد از نصب خواهید دید


آموزش کار با افزونه رایگان وردپرس Responsive Menu
Initial Setup : پیکربندی ابتدایی
Initial Setup » Menu : پیکربندی ابتدایی > فهرست
Breakpoint : نقطه جدایی
This is the width of the screen at which point you would like the menu to start showing : این عرض، همان قسمتی از نمایشگر است که فهرست شروع به نمایش میکند. بر اساس پیکسل
Menu to Use : فهرستی که میخواهید استفاده کنید را انتخاب کنید.
CSS of Menu to Hide : اگر میخواهید میتوانید از سی اِس اِس برای پنهان سازی فهرست استفاده کنید.
Menu : فهرست
Menu » Section Ordering : فهرست > بخش ترتیب بندی
Order of Menu Items : ترتیب عناصر فهرست را انتخاب کنید.
Drag the items to re-order and click to turn them on/off : روی بخش سبز رنگ برای فعال/ غیر فعال سازی کلیک کنید. سپس به صورت کشیدن و رها کردن، میتوانید آنها را دوباره مرتب کنید.
Title : عنوان وبسایت در فهرست
Menu : منو در فهرست
Search : جستجو
Additional Content : محتوای متفرقه
Menu » Title : فهرست > عنوان
Text : متن را در اینجا بنویسید.
Link : پیوند را در اینجا قرار دهید.
Link Location : اینجا نیز میتوانید نوع باز شدن لینک را انتخاب کنید.
Title Font Size : اندازه فونت عنوان را تغیین کنید.
Font Icon : آیکن فونت (فقط در نسخه تجاری افزونه در دسترس است)
Image : تصویر منو را میتوانید در این قسمت قرار دهید.
Alt Text : متن جایگزین تصویر برای سئوی بهتر که میتوانید استفاده کنید.
Title Background Colour : رنگ پس زمینه عنوان را تعیین کنید.
Title Background Colour Hover : رنگ پس زمینه عنوان، وقتی که عنوان زیر نشان گر موشی کاربر است.
Title Colour : رنگ عنوان را تعیین کنید.
Title Hover Colour : در این گزینه هم رنگ عنوان، وقتی که عنوان زیر نشان گر موشی کاربر است.
Menu » Additional Content : فهرست > محتوای اضافی
Text : متن خود را بنویسید تا در فهرست قرار گیرد.
HTMl and Shortcodes can be used : شما میتوانید از اِچ تی اِم اِل و کدهای کوتاه قالب وردپرس خود نیز استفاده کنید.
Colour : رنگ این محتوای اضافی را هم با این گزینه تعیین کنید.
Menu » Animation : فهرست > انیمیشن
Appear From : نحوه ظاهر شدن منو را تعیین کنید.
Animation Type : نوع انیمیشن را هم انتخاب کنید.
Page Wrapper CSS selector : انتخاب گر سی اِس اِس برگه را بنویسید
This is only needed if you are using the push animation above : البته این گزینه زمانی نیاز است که شما از انیمیشن فشار push در گزینه ی قبلی استفاده کنید.
Close Menu on Body Clicks : پس از فعال کردن این گزینه، با کلیک در بخشی خارج از منو، منو بسته خواهد شد.
Close Menu on Link Clicks : با فعال کردن این گزینه، اگر کاربر روی لینکی کلیک کند، منو دوباره بسته خواهد شد.
Menu » Search Box : فهرست > باکس جستجو
Text : متن باکس جستجو را بنویسید
Text Colour : رنگ متن را با این گزینه تعیین کنید.
Border Colour : رنگ حاشیه ی باکس جستجو را با این گزینه تعیین کنید.
Background Colour : رنگ پس زمینه ی باکس جستجو را با این گزینه تغییر دهید.
Placeholder Colour : رنگ متنی که وارد میشود را تعیین کنید.
Menu » Background Colors : فهرست > رنگ های پس زمینه
Background Image : تصویر پس زمینه را انتخاب کنید.
Enabling this will deactivate all other colour options : با فعال کردن این گزینه و استفاده از تصویر، تمام تنظیمات رنگ بندی پایین تر از بین خواهد رفت.
Background Colour : رنگ پس زمینه را با این گزینه تغییر دهید.
Item Background Colour : از این گزینه برای تغییر رنگ پس زمینه آیتم منو استفاده کنید.
Item Background Colour Hover : از این گزینه هم برای تغییر رنگ آیتم منو وقتی زیر نشانگر ماوس است استفاده کنید.
Current Item Background Colour : رنگ فعلی پس زمینه آیتم منو را انتخاب کنید.
Current Item Background Colour Hover : این گزینه هم رنگ آیتم منو را در حال هاور تغییر میدهد.
Menu » Border Colors : فهرست > رنگ های پس زمینه
Item Border Colour : رنگ حاشیه ی آیتم در منو
Item Border Colour Hover : این گزینه هم رنگ حاشیه ی آیتم در منو را در حالت هاور تعیین میکند.
Current Item Border Colour : رنگ فعلی حاشیه ی حاشیه ی آیتم در فهرست را تغییر دهید.
Current Item Border Colour Hover : این گزینه هم رنگ کنونی حاشیه ی آیتم فهرست را در حالت هاور تغییر میدهد.
Menu » Text Colours : فهرست > رنگ متن
Link Colour : رنگ پیوند یا لینک ها در منو را تغییر دهید.
Link Hover Colour : با این گزینه، رنگ لینک را در حالتی که زیر نشانگر ماوس کاربر باشد تنظیم کنید.
Current Link Colour : رنگ کنونی لینک را با این گزینه تعیین کنید.
Current Link Hover Colour : با این گزینه هم رنگ فعلی لینک در حالت هاور را تغییر دهید.
Menu » Text Styling : فهرست > استایل متن
Font : نام فونتی که در قالب وردپرس خود استفاده میکنید را در اینجا بنویسید. اگر از قالب های وردپرس فریش تم استفاده میکنید، در پوشه فونت در قالب وردپرس خود، نام فونت را دقیق کپی کرده و در اینجا با نام کامل قرار دهید.
Font Size : اندازه فونت را تغییر یا تنظیم کنید.
Text Alignment : با این گزینه هم میتوانید تراز بندی متن را تغییر دهید که برای پارسی روی Right قرار دهید تا متن از راست به چپ قرار داده شوند.
Word Wrap : مرتب سازی کلمات (زمانی که کلمات شما زیاد باشند و در یک سطر نباشند)
Menu » Advanced : فهرست > پیشرفته
Depth : عمق زیر منوهای خود را انتخاب کنید.
Disable Scrolling when Menu Active : با این کار، وقتی منو فعال باشد پیمایش برای کاربر غیر فعال میشود.
Theme Location Menu : مکان فهرست را هم طبق ویژگی های قالب وردپرس خود انتخاب کنید
Button : دکمه
Button » Animation : دکمه > انیمیشن
Animation Type : نوع انیمیشن منو را انتخاب کنید (برای دیدن همه امکانات میتوانید روی لینکی داده است کلیک کنید)
Position Type : نوع موقعیت و وضعیت انیمیشن را انتخاب کنید.
Push Button with Animation : با این گزینه، دکمه ی منو هم دارای انیمیشن میشود.
Button » Location : دکمه > مکان
Distance from Side : فاصله ی دکمه از کناره را انتخاب کنید.
Button Side : دکمه ی کناری را تعیین کنید. در چه سمتی باشد!
Distance from Top : فاصله ی دکمه از بالا را تعیین کنید. بر اساس پیکسل
Button » Container Sizing : دکمه > اندازه ی در بر گیرنده
Height : ارتفاع را بر اساس پیکسل قرار دهید.
Width : عرض را هم بر اساس پیکسل تنظیم کنید.
Button » Hamburger Sizing : دکمه > منوی همبرگری
Line Height : ارتفاع خط را با این گزینه تعیین کنید.
Line Margin : با این گزینه نیز مارگن یا کناره های خط را تغییر دهید.
Line Width : عرض خط را هم میتوانید با این گزینه تغییر دهید. منظور از خط، همان سه خطی هستند که روی هم منوی همبرگری را می سازند.
Button » Background Colors : دکمه > رنگ پس زمینه
Background Colour : رنگ پس زمینه را در این قسمت میتوانید تغییر دهید.
Background Hover Colour : رنگ پس زمینه وقتی دکمه زیر نشانگر موشی کاربر است.
Transparent Background : اگر بخواهید میتوانید به پس زمینه شفافیت هم اضافه کنید.
Button » Line Colors : دکمه > رنگ بندی خط
Line Colour : رنگ خط را میتوانید با این گزینه تغییر دهید.
Button » Tiltle : دکمه > عنوان
Text : متن خود برای دکمه را بنویسید.
Colour : رنگ بندی دکمه را با ابزار انتخاب رنگ تنظیم کنید.
Title Text Position : موقعیت متن عنوان که روی دکمه قرار میگیرد را تغییر دهید.
Font : فونت را هم میتوانید انتخاب کنید، همانطور که گفته شد، اگر قالب وردپرس خود را از فریش تم خریداری کرده اید میتوانید در پوشه فونت نام دقیق فونت قالب وردپرس خود را پیدا کرده و در اینجا بنویسید.
Font Size : اندازه فونت را به راحتی در این گزینه تنظیم کنید.
Line Height : ارتفاع خط را هم در این گزینه تعیین کنید. بر اساس پیکسل
Button » Image : دکمه > تصویر
Font Icon : فونت آیکن، که در نسخه تجاری افزونه در دسترس است.
Font Icon When Clicked : فونت آیکن زمانی که کلیک شد، این گزینه زمانی در دسترس خواهد بود که شما نسخه حرفه ای را خریداری کنید.
Image : در این قسمت میتوانید تصویر خود را بارگذاری کنید.
Alt Text : با این گزینه برای تصویر خود متن جایگزین بنویسید و سئو را بهتر کنید.
Image When Clicked : در این قسمت هم میتوانید از تصویر دیگری استفاده کنید تا وقتی روی تصویر قبلی کلیک شد، پس از کلیک این گزینه نمایش داده شود.
Alt Text : متن جایگزین برای تصویر جدید هم بنویسید.
Button » Advanced : دکمه > پیشرفته
Trigger : در این گزینه هم برای دکمه خود شناسه ی ماشه را قرار دهید.
Sub-Menus : زیر منو
Sub-Menus » Toggle Background Border Colours : زیر منو > رنگ حاشیه ی دکمه ماشه
Background Colour : رنگ پس زمینه را میتوانید با این گزینه تغییر دهید.
Background Hover Colour : رنگ پس زمینه را در حالت هاور تنظیم کنید.
Background Colour Active : رنگ دکمه فعال را تعیین کنید.
Background Hover Colour Active : رنگ دکمه فعال را وقتی زیر نشانگر ماوس کاربر است تعیین کنید.
Sub-Menus » Toggle Button Border Colours : زیر منو > رنگ حاشیه ی دکمه ماشه
Border Colour : رنگ حاشیه را میتوانید با این گزینه تنظیم کنید.
Border Hover Colour : رنگ حاشیه در حالت هاور را تغییر دهید.
Border Colour Active : از این گزینه برای تعیین رنگ حاشیه فعال استفاده کنید.
Border Hover Colour Active : رنگ حاشیه در حالت هاور و فعال را تعیین کنید.
Sub-Menus » Toggle Button Icon Colours : زیر منو > رنگ بندی آیکن دکمه ماشه
Icon Colour : رنگ آیکن را با این گزینه تغییر دهید.
Icon Hover Colour : رنگ آیکن در حالت هاور را تنظیم کنید.
Icon Colour Active : رنگ آیکن در حالت فعال را تغییر دهید.
Icon Hover Colour Active : از این گزینه هم برای تغییر رنگ آیکن در حالت هاور استفاده کنید.
Sub-Menus » Animations : زیر منو > انیمیشن
Use Accordion Animation : استفاده از انیمیشن آکادرئون
Auto Expand All Submenus : گشودن خودکار تمامی زیر منو ها
Auto Expand Current Submenus : گشایش خودکار فقط برای زیر منوهای فعلی
Disable Parent Item Clicks : با این گزینه میتوانید کلیک روی آیتم های مادر را غیر فعال کنید
Use slide effect instead of drop-down : این گزینه در نسخه تجاری در دسترس است.
Sub-Menus » Sizing : زیر منو > اندازه ها
Toggle Button Height : ارتفاع دکمه ماشه را بر اساس پیکسل تنظیم کنید
Toggle Button Width : عرض دکمه ماشه را میتوانید با پیکسل تغییر دهید.
Sub-Menus » Toggle Icons : زیر منو > آیکن ماشه
Font Icon Active : این گزینه در نسخه تجاری در دسترس است.
Font Icon Inactive : این گزینه هم مانند قبلی
HTML Shape Active : حرف اِچ تی اِم اِل، یا شکل اِچ تی اِم اِل در حالت فعال را وارد کنید.
HTML Shape Inactive : حرف اِچ تی اِم اِل، یا شکل اِچ تی اِم اِل زمانی که غیر فعال است وارد کنید.
Image Active : تصویر فعال را بارگذاری کنید.
Alt Text : از این گزینه برای قرار دادن متن جایگزین استفاده کنید.
Image Inactive : تصویری را هم برای حالت غیر فعال انتخاب کنید.
Alt Text : در این زمینه یا فیلد متن جایگزین تصویر خود را بنویسید.
Icon Position : موقعیت کلی آیکن را نیز تعیین کنید.
Technical : بخش فنی
Technical » Scripts : فنی > اسکریپت ها
Use External Files : استفاده از سی اِس اِس خارجی یا مستقل
This will create external files for CSS and JavaScript : با این گزینه، برای جاوا اسکریپت ها و سی اِس اِس های سفارشی که ایجاد میشوند، فایل هایی جدا از پرونده های اصلی قالب وردپرس شما ایجاد میشود.
Minify Scripts : فشرده سازی اسکریپت ها
This will minify CSS and JavaScript output : این گزینه خروجی جاوا اسکریپت و سی اِس اِس مورد استفاده توسط مرورگر را فشرده سازی میکند.
Place Scripts In Footer : قرار دادن اسکرپیت ها در فوتر
This will place the JavaScript file in the footer : همانطور که گفته شده این گزینه اسکریپت ها را در فوتر قرار میدهد تا شناسایی شوند.
Technical » Menu : فنی > فهرست
Custom Walker : واکر سفارشی
Warning: For extremely advanced use only : اگر نمیدانید این گزینه برای چیست از آن استفاده نکنید.
Show on mobile devices only : نمایش در موبایل، این گزینه در نسخه حرفه ای در دسترس است.
Use Shortcode : استفاده از کد کوتاه برای استفاده از افزونه
Please place [responsive_menu] in your files to use : میتوانید کد کوتاه داده شده را در فایل هدر یا فوتر قالب وردپرس خود قرار دهید. البته شیوه های مختلف برای استفاده از کد کوتاه وجود دارد. شما میتوانید آن ها را بر اساس دستگاه فیلتر کنید، بر اساس زبان منوهای مختلف را نمایش دهید و کارهای بیشتری با کدهای کوتاه افزونه انجام دهید.
Technical » Animation Speeds : فنی > سرعت انیمیشن
Animation Speed : سرعت انیمیشن را بر اساس ثانیه وارد کنید.
Transition Speed : سرعت محو و تبدیل شدن انیمیشن را نیز تعیین کنید.
Import/Export : برون بری درون ریزی
Import/Export » Import/Export : برون بری و درون ریزی
Import : از این گزینه برای درون ریزی استفاده کنید.
Choose File : میتوانید با این گزینه فایل خود را انتخاب کنید.
Import Options : روی این گزینه کلیک کنید تا تنظیمات برون بری شوند و در مرورگر دانلود شوند.
Export : بخش برون بری تنظیمات
Export Options : روی این دکمه کلیک کنید تا یک اسکریپت حاوی تنظیمات افزونه برون بری شده و در مرورگر شما دانلود شود.
Reset : با این گزینه هم میتوانید تنظیمات پایه ی افزونه بازیابی کنید.
افزونه رایگان وردپرس Responsive Menu
  دریافت مستقیم Responsive Menu
  مشاهده مشخصات
 

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

آموزش تصویری ایجاد منوی رسپانسیو در وردپرس با Responsive Menu


خرید بک لینک
کپی رابت محفوظ است اخبار ایران و جهان
قدرت گرفته از niloblog